В этом уроке мы научимся создавать макет блога в минималистичном стиле, используя новые технологии Photoshop. В этом нам помогут новые возможности создания и сохранения стилей Character Styles и Paragraph Styles.

Давайте посмотрим, что мы будем создавать в этом уроке.

Для выполнения урока, вам понадобится следующие ресурсы:

• Бесплатный шрифт Free Font Sansation .
• Текстура 26 Repeatable Pixel Pattern
• Набор социальных иконок Free Social Media Icons
• Иконка руки Hand Cursor Icon
• Стоковое изображение Stock photo: Harvest 1
• Стоковое изображение Stock photo: New York Streets 3
• Стоковое изображение Stock photo: Daisy Age
• Стоковое изображение Stock photo: A tree on the horizon
• Стоковое изображение Stock photo: Sales figures
• Стоковое изображение Stock photo: Time is Money!

Подготовка холста

Шаг 1

В этом уроке мы будем использовать фреймворк 960 GS . Нужно с качать шаблон с его главной страницы и найти внутри архива файл "12 Column Grid".

Нажмите на иконку глаза возле слоя 12 Col Grid, чтобы скрыть его видимость — пока он нам не понадобится.

Шаг 2

Пока размер нашего холста достаточно мал. Нажимаем Image> Canvas Size (или Ctrl +Alt + C), чтобы сделать размер немного больше и устанавливаем опорную точку в центре.

Шаг 3

Нажмите Ctrl + R , чтобы показать линейку. Нажмите View> New Guide (Просмотр — Новая направляющая), чтобы создать новую направляющую. Выберите Vertical и Position (Положение): 185 px , чтобы создать вертикальную направляющую, которая будет сдвинута на 185 px от левого края.

Шаг 4

Создайте еще ​​вертикальные направляющие на расстоянии в 150 , 1095 и 1130 пикселей .

Подготовка Color Theme

Шаг 5

В нашем дизайне мы собираемся использовать следующую цветовую комбинацию - Colorlouver . Нажмите на изображение, чтобы открыть цветовую комбинацию и сохранить в формате JPEG.

Разместите цветовую схему внутри файла Photoshop. Размещая изображения непосредственно внутри нашего шаблона, получить доступ к нему будет намного быстрее и легче.

Подготовка фона

Шаг 6

Выберите слой Background и нажмите на значок замка, чтобы разблокировать этот слой. Дважды щелкаем по изображению, чтобы изменить цвет фона.

С помощью пипетки выберите второй цвет нашей цветовой схемы (# 948371) .

Шаг 7

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

Шаг 8

Выберите созданную форму и перейдите в панель Option Bar. откройте Fill Color и нажмите иконку выбора цвета. Когда появится диалоговое окно Color Picker, выберите первый цвет. В поле Stroke выберите None

Шаг 9

Создайте новый слой и с помощью Rectangular Marquee Tool выделите верхний прямоугольник. Активируйте инструмент градиентной заливки и залейте выделенную область радиальным градиентом от белого к черному.

Измените его режим Blend mode на Screen и уменьшите непрозрачность Opacity до 37% .

Шаг 10

Создайте новый слой и назовите его «тень».

Нарисуйте прямоугольное выделение в нижней части второго фона, как показано на рисунке ниже. Нажмите Edit: Fill . Установить Use - Black . Нажмите OK , чтобы заполнить выделение черным.

Шаг 11

Размойте его с помощью Gaussian Blur. Нажмите Filter> Blur> Gaussian Blur .

Шаг 12

Удерживая нажатой Alt , поместите курсор между тенью и слоем со вторым фоном. Не отпуская Al , нажмите, чтобы преобразовать слой в обтравочную маску . Преобразовав его в Clipping Mask, тени сейчас размещены внутри верхнего фона.

Шаг 13

Измените прозрачность тени Opacity до 50% . Ниже вы можете увидеть результат при 100% увеличении.

Шаг 14

Пришло время, чтобы разместить все слои в одну группу. Чтобы сделать это, выберите все слои и нажмите Ctrl + G .

Header

Шаг 15

Нарисуйте прямоугольник в верхней части холста, как показано на рисунке.

Шаг 16

В панели Option Bar , установите цвет Stroke - # af9f8e .

Шаг 17

Для заливки выберите следующие цвета линейного градиента — от # d0c4b9 к #a89c91 .

Название сайта

Шаг 18

В левой стороне шаблона добавляем название нашего сайта. Обратите внимание, чтобы размещение соответствовало рисунку ниже. Дважды щелкните текст и добавьте Drop Shadow . В уроке был использован шрифт Sansation .

Меню

Шаг 19

Используя шрифт Sansation 14 пт, создаем меню. Опять обратите внимание на место размещения.

Шаг 20

Для активного кнопки меню установите тип шрифта — bold.

Шаг 21

Активируйте инструмент создания многоугольника Polygon tool и установите количество сторон - 3 . Нарисуйте треугольник с цветом заливки Fill: # 3d3123 и значение обводки Stroke : None . Добавляем к слою тень - Layer Style > Drop Shadow .

Шаг 22

Подчеркнем активную кнопку меню. Активируйте инструмент Линия и установить ее размер weight - 5 пикселей . Выберите цвет # f76b6a и линия должна быть без обводки.

Разместите линию под активным меню и добавьте расстояния между линией и прямоугольной формой в 1 пиксель.

Использование стилей символа

Шаг 23

Давайте сохраним настройки стилей для текста. Эта что-то похожее на упрощенную версию стилей символов в InDesign. Чтобы сохраним их, нужно активировать текст, а затем нажать на иконке "New Character Style".

Дважды щелкните на новый стиль и выберете следующие настройки.

Шаг 24

Выберите следующий пункт меню, а затем нажмите кнопку Character Style для применения настроек стиля. Если вы нашли знак плюс возле стилей, это означает, что они имеют разные настройки.

Шаг 25

Повторите предыдущий шаг, чтобы применить созданный стиль для активного меню.

Шаг 26

Так в чем же преимущество использования стилей символов? Они помогут нам централизовать настройки текста. Мы можем просто изменить стиль символа, чтобы отредактировать любой текст. Например, если изменить стиль Top Menu – Normal на Corbel, все элементы меню автоматически изменятся на Corbel.

Шаг 27

Создайте новый слой и поместите его под элементами меню. Нажмите Ctrl и кликните по меню, чтобы сделать следующее выделение. Залейте его черным.

Шаг 28

Удалите выделение, нажав Ctrl + D. Размойте черную область, применив фильтр Filter> Blur> Gaussian Blur .

Слайдер

Шаг 29

Нарисуйте прямоугольную форму шириной в столбцов (см. ниже).

Для цвета заливки выберите # dfd1c2 . Цвет Stroke — # c8baac, размер 10 pt . Нажмите на маленькую стрелку рядом с линией, чтобы убедиться, что выбрана опция Align Insid.

Шаг 30

Вставляем изображение, как показано на рисунке ниже. Конвертируйте его в Clipping Mask, нажав Ctrl + Alt + G . Изображение будет автоматически размещено внутри блока слайдера. При необходимости, вы можете изменять размер и перемещать его, никак не влияя на его рамку.

Шаг 31

Нарисуйте еще ​​одну прямоугольную форму возле слайдер таким же цветом. Убедитесь в том, что форма будет привязана к крайней направляющей. Добавляем стили Layer Style> Pattern Overlay, используя текстуру

Создание привлекательных и функциональных веб-макетов - неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.

Ресурсы урока:

1. Набор иконок (wefunction.com)
   Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт Bebas (dafont.com)

Шаг 1. Mockup

Прежде, чем мы начнем создавать макет сайта, нужно создать план-эскиз будущего макета, на котором будет видна его функциональность и приблизительный внешний вид.

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение - Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete , чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T) .

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование - Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete) .

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) . Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.

Прежде, чем начать проектировать макет сайта, нам понадобится эскиз, на котором будет виден его внешний вид и функциональность. Для эскиза я использовал только серые тона, чтобы в целом сосредоточиться на "планировке" и пока не заморачиваться с цветами. В результате вы в любой момент можете быстренько что-то поменять местами или переделать.

2. Создание документа

Макет сайта будет шириной 960 пикселей, поэтому нам необходимо создать документ с размерами 1200х1500 пикселей, с разрешением 72пикс/дюйм.

Мы определились с шириной, теперь нам необходимо обозначить эту область при помощи . Нажатием клавиш Ctrl + A выделите весь документ.

Перейдите в Select (Выделение) и выберите Transform Selection (Трансформировать выделенную область). В панели параметров вверху для ширины установите значение 960, это рабочая область будущего макета.

Расположите направляющие по краям выделения.

Теперь мы создадим отступ между границей рабочей области и областью для контента, который будет добавлен позже. Убедитесь, что у вас выделение активно, после этого снова пройдите в меню Select > Transform Selection (Выделение - Трансформировать выделенную область). Размер ширины уменьшите до 920 пикселей. А это значит, что с обеих сторон макета появится отступ по 20 пикселей, а в целом 40 пикселей.

Добавим еще две вертикальные направляющие по краям нового выделения.

3. Создание шапки сайта

В верхней части макета образуйте выделение высотой 465px.

Выделенный участок заполните серым оттенком, чуть позже мы применим к нему стили слоя для изменения цвета.

К шапке добавьте градиент при помощи стиля Наложение градиента. Градиент будет состоять из двух цветов #0f201c и #002931.

Вот, что должно получиться:

Теперь к шапке добавим подсветку. Возьмите кисть с мягкими краями, диаметром 600px, цвет - #19535a и на новом слое сделайте клик кистью в верху в центре шапки.

В верхней части шапки образуйте выделение размером 110px.

Нажатием клавиши Delete удалите выделенный участок.

При помощи свободного трансформирования (Ctrl + T) отразите по вертикали слой с подсветкой.

Убедитесь, что подсветка на шапке расположена ровно по центру. Для этого активируйте слои с подсветкой и шапкой, на панели инструментов выберите Перемещение (V). В верху на панели параметров выберите функцию Align Horizontal Centers (Выравнивание центров по горизонтали).

Создав новый слой, инструментом Карандаш (B) нарисуйте линию в 1 пиксель по ширине всего документа. Цвет - #01bfd2.

При помощи градиентной маски, сгладьте края созданной линии. Возьмите инструмент Градиент (G) и настройте его, подобно скриншоту ниже:

Созданный слой заполните градиентом.

4. Создание узора

Шапку макета мы украсим клетчатым узором. Карандашом в 2 пикселя нарисуйте две точки, расположенные по диагонали. На время отключите фоновый слой, кликнув по глазку возле миниатюрки фонового слоя. Затем создайте узор, перейдя в меню Edit (Редактирование) и выбрав Define Pattern (Определить узор).

Ниже подсветки создайте новый слой. Выберите участок, к которому необходимо применить узор. Нажатием клавиш Shift + F5 заполните шапку.

Результат:

Осталось сделать плавный переход от узора к шапке. Добавив маску к слою с узором, сделайте плавный переход мягкой кистью белого цвета с непрозрачностью 60%.

Смотрите результат:

5. Добавление логотипа

Логотип - это неотъемлемая часть каждого сайта. Для его создания возьмите мягкую кисть, установите цвет #19535a и в верхнем левом углу нарисуйте пятно.

Затем напишите текст для логотипа.

Примените к нему следующие эффекты:

Наложение градиента:

6. Навигация

Создайте кнопку для выделенной категории навигации при помощи инструмента Прямоугольная область (M). Заполните выделенный участок любым цветом и значение заливки понизьте до 0%.

7. Слайдер для контента

Образуйте выделенную область 580х295 пикселей.

Выделенный участок залейте любым оттенком серого цвета.

Сверху наложите изображение и прикрепите его к нижнему слою.

К слайдеру нужно добавить тень. Создав новый слой, возьмите Кисть (B) размером 400px и нажатием клавиши F5 откройте окно настроек кистей. Все настройки смотрите на изображении ниже.

Цвет установите черный и нарисуйте пятно.

Чтобы смягчить края используйте фильтр Gaussian Blur (Размытие по Гауссу).

Образуйте выделение для нижней половины тени и удалите ее.

Тень расположите вверху слайдера.

Сначала немного сожмите тень, а затем отцентрируйте её, используя функцию Align Horizontal Centers (Выравнивание центров по горизонтали).

Продублируйте тень и копию расположите внизу слайдера.

При помощи инструмента Прямоугольная область (M) на слайдере создайте две кнопки и заполните их черным цветом.

Для слоя с кнопками снизьте непрозрачность до 50%.

Используя стандартные фигуры Фотошоп, добавьте стрелочки на кнопки.

Внизу слайдера создайте полоску и заполните черным цветом.

Для полоски снизьте непрозрачность до 50%.

Здесь вы можете добавить описание для своего проекта.

8. Текст с приветствием

Левее слайдера введите текст с приветствием.

9. Завершение работы над шапкой

Мы заканчиваем работать над шапкой. И напоследок кистью добавим чуть заметную тень.

Между тенью и заголовком оставьте расстояние в 1 пиксель.

Ниже слоя с шапкой создайте новый слой. Примените к нему градиент.

10. Кнопки для слайдера

Пришло время добавить кнопки для смены слайдов.

К первой кнопке примените стиль слоя Внутренняя тень, чтобы сделать её активной.

11. Разделитель для контента

Чуть ниже кнопок для слайдера, нарисуйте линию светло-серого цвета #aaaaaa, шириной в 1 пиксель.

Добавив маску к линии, сделайте на краях плавный переход, используя градиент. Мы создали разделительную линию.

12. Добавление контента

Теперь добавим области для контентной части. Они будут разделены на 3 колонки с отступом в 25px.

Расположите вертикальные направляющие по обеим краям колонок.

Для каждой колонки добавьте заголовок и подходящую иконку. Ниже заголовков добавьте контент.

Используя инструмент Прямоугольник со скругленными углами, создайте кнопку Read More. Обратите внимание, чтобы на панели параметров был выбран режим Фигура.

К кнопке примените стили Наложение градиента и Обводка.

Кнопку Read More продублируйте (Ctrl + J) еще два раза и расположите их в каждой колонке под контентом.

Как и ранее нужно создать разделительную линию, расположив её под кнопками. Ниже расположите прямоугольники серого цвета и примените к ним стиль Обводка.

На каждый прямоугольник наложите изображение.

Как и ранее создайте тени и расположите их ниже областей с изображениями.

Ниже каждого изображения разместите заголовок, контент, кнопку Read More и разделительную линию.

Ниже в первую колонку поместите иконку Twitter.

Затем разместите сообщение о Twitter.

Нарисуйте ещё одну кнопку More Tweets.

К этой кнопке примените стили Наложение градиента и Обводка:

Напишите на ней текст More Tweets.

13. Создаем футер

В самом низу макета сайта образуйте выделенную область и залейте её серым цветом.

Примените к футеру стиль Наложение цвета.

И в заключении разместите на футере навигацию и копирайт.

Макет сайта готов!

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема - создание дизайна сайта в Photoshope. В целом, все, что касается создания рабочих макетов сайтов, это практические уроки, и в интернете информации об этом крайне мало. Умельцев много, много рекламы и платных курсов, вебинаров… но, по сути, бесплатно делиться секретами и тонкостями никто не хочет. Типа, попробуйте, помучайтесь, и убедитесь, что «без меня» вам не справиться.

В этой статье я постараюсь ответить на самые распространенные вопросы, осветить, так сказать, общее направление. Уверен, мои советы вам пригодятся!

Photoshop и веб-дизайн

С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?

Дизайн-макет сайта - это прототип интернет-ресурса (портала, блога, торговой площадки и т. д.), отдельно взятой его странички, лендинга, графический образ с прорисованными деталями различных уровней. Картинка может быть общей, а может достаточно подробно давать представление обо всем структурном наполнении сайта, навигации и даже информационном контенте.

В идеале, на выходе должна получиться многослойная раскладка, полностью готовая к верстке и кодированию. Дизайн сайта в Фотошопе имеет ряд обязательных элементов:

расположение меню;

навигация;

цветовая гамма;

шрифты и т. д.

Но начинается все, естественно, с концепции. Тут может быть два варианта: или дизайнер получает готовый плоский рисунок, который необходимо воплотить в объеме, или «концепцию». Под концепцией каждый заказчик понимает свое: название, целевую аудиторию, просто общий перечень неких функций и задач, что угодно.

Но дизайн-макет - это уже не бла-бла-бла, а функциональный интерфейс, с готовой формой подачи информации, эстетичный и практичный.

С чего начать разработку макета?

Заказчики не всегда попадаются люди творческие, не все окончательно могут объяснить чего хотят, и как это должно выглядеть. Задача веб-дизайнера - задавать умные вопросы и получать умные ответы! Чем умнее спросишь, тем меньше будешь переделывать

Как я предлагаю подойти к разработке дизайна сайта в photoshop, буквально по шагам.

Пункт номер раз. Макет надо прорисовать на бумаге. Общими графическими формами - квадратиками, кружочками, прямоугольниками расставить по местам шапку, основное меню, статьи, фото, разделы, сайдбары, рекламу. Детали здесь не важны, главное - распланировать пространство.

У любого макета есть технические требования, вот на них и нужно нанизать ваш скелет. Сделайте несколько набросков, в сравнении все познается лучше. Какие-то варианты могут быть отвергнуты категорично, это тоже хорошо, отрицательный результат - тоже результат. Двигаемся дальше.

Пункт второй. Бумажный вариант в карандаше согласован, можно переходить к цветовому решению. Опять-таки можно обойтись рисунками, но более профессионально уже будет работать в графических программах. Можно в плоских, не принципиально.

Пункт три. Для того чтобы сделать действительно качественный дизайн-макет, не постесняйтесь зайти на ресурсы конкурентов. Определились с нишей и основными ключевыми запросами, забиваем их в Google или Yandex.

Нас интересует максимум ТОП-10. Проанализируйте функционал этих сайтов. В контент особо не вникайте, тестируйте навигацию. Станьте на время обыкновенным пользователем, который пришел на сайт по запросу и ищет для себя самый удобный и релевантный ресурс.

Если все ваши передвижения интуитивно понятны, и вы не тратите время на поиск необходимых кнопок, указателей, то постарайтесь отметить, с помощью чего достигнут такой результат. И наоборот, зафиксируйте себе, что вас раздражало, мешало, может меню кривое или много баннеров, рекламы. Ну и т. д. Ваша задача - объективно оценить основных конкурентов, взять на заметку достоинства и исключить явные недостатки.

Ну, это, как вы понимаете, теория, уделим время практике, и посмотрим, как создать дизайн сайта в Фотошопе, когда уже точно знаешь, что нужно нарисовать.

Дизайн-макет в Photoshope

Создание дизайна сайта в фотошопе, неважно, примитивного или мега крутого, всегда начинается с создания документа.

Документ

Стандартный макет имеет ширину 960 пикселей. Открываем «Документ» - Новый - задаем размеры. 1200*1500 пикселей будет достаточно, разрешение оставляем 72.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Теперь выделяем весь документ (клавиши Ctrl+A), нам нужно определить область в 960 пикселей и добавить направляющие.

В меню программы выбираем «Select/Выделение» - «Transform Selection/Трансформировать выделенную область». В свойствах устанавливаем значение ширины - 960 и фиксируем рабочую область макета. Направляющие оставляем на границах выделения.

Распространенной ошибкой дизайнеров является расположение контента в пределах рабочей области макета и ручной отступ. На стандартном экране это допустимо, но при открытии страницы на телефоне или планшете текст просто-напросто прилипнет к краю. Как это исправить?

Заходим «Select/Выделение» - «Transform Selection/Трансформировать выделенную область», и уменьшаем выделение до 920 пикселей. Макет автоматически разместится по центру, и у вас получится отступ в 20 пикселей с каждой стороны. При изменении ширины не забывайте переустанавливать направляющие.

2. Шапка и текстура

Для создания шапки надо отделить пространство в верхней части макета, например в 460 пикселей. Достаточно эффектно смотрятся градиенты цвета. Делаются они так:

выделенная область заливается 1 цветом;

в меню выбираются стили слоя;

«Gradient Overlay/Наложение градиента».

Объем можно добавить подсветкой:

создается новый слой;

выбирается мягкая кисть размером 600 px;

для кисти устанавливается цвет #19535a;

в 1 клик в нужной части шапки рисуется блик.

Расскажу еще про одну функцию - текстуру. Из любого цвета можно сделать текстурную картинку:

инструментом «Pencil Tool/Карандаш» рисуем 2 точки;

видимость фонового слоя временно отключаем;

через меню «Edit/Редактирование» - «Define Pattern/Определить узор» получаем готовую текстуру.

Приблизительно так:

Ну как, получилось? Увлекает процесс? Начало положено, вы на пути потрясающих экспериментов, которые открывает для вас графический Photoshop.

Теперь самое время открыть Фотошоп, который для веб-дизайна давно стал незаменимым помощником, и сделать набросок какого-нибудь простенького макета из 2–3 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу - залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Давайте поподробнее рассмотрим задачу, которую нам предстоит решить — создание макета сайта в Photoshop .

Это задача создания макета информационного сайта, причем резинового, ширина которого будет меняться динамически.

Для резинового сайта всегда нужно определять верхнее и нижнее значения ширины, в пределах которых он будет тянуться.

Минимальное значение, чтобы при верстке отдельные элементы не наползали друг на друга, разрушая структуру сайта, и максимальное значение, чтобы сайт не стал чрезмерно широким. В этом случае текст тоже становится неудобочитаемым из-за слишком длинных строчек.

Можно предусмотреть, чтобы при дальнейшей верстке сайт был резиновым в пределах, например, от 1200 до 1400px (чтобы блоки и колонки текста были тянущимися).

Что потребуется для выполнения этого урока?

• Photoshop — редактор растровой графики, который как правило применяется при создании макетов.
• Комплекты иконок. В сети можно найти большое количество бесплатных наборов иконок.
• Несколько небольших картинок для заполнения контента.
• Генератор бреда от Яндекса (referats.yandex.ru). Он понадобится для заполнения текстом нашего макета (в качестве «рыбы»).
• Шрифты. В примере используется один нестандартный шрифт — Arsenal. Он доступен для скачивания на сайте fontsquirrel с множеством других кириллических шрифтов.

Итак, приступим.

Создадим новый документ, прозрачный, размером 1400 х 2000 (Нажмите ctrl+N и заполните поля в открывшемся окошке).

новый рисунок

Открываем панель со слоями, соответствующими созданному документу. Единственный существующий слой переименовываем в Фон (два раза щелкнув по названию слоя).

На панели инструментов выбираем цвет переднего плана фиолетовый, нажимаем клавиши shift+F5 и заливаем этим цветом фон будущего макета.

Создаем структуру папок, соответствующую частям макета. Упорядоченность позволит лучше ориентироваться, не путаться в слоях. Нужно создать следующие папки — шапка, меню, контент, футер. (Нажимаем сочетание ctrl+f и указываем название соответствующей папки).

Весь дальнейший процесс создания макета можно разделить на несколько этапов.

Размечаем макет направляющими

Направляющие — очень удобный инструмент, позволяющий выполнить разметку размеров отдельных элементов и отступов с точностью до одного пиксела, в результате чего ваш макет будет иметь аккуратный вид.

Направляющие представляют собой цветные линии, вертикальные и горизонтальные, устанавливающиеся на соответствующем делении линейки (например горизонтальная направляющая 100px отмечает расстояние 100px на вертикальной линейке и т.п.).

Есть два быстрых способа создать направляющие. Более известный — перетаскивание от линейки, но более удобный на мой взгляд — вводить точное положение направляющих с клавиатуры, с помощью диалогового окошка.

Для этой цели я использую сочетание горячих клавиш ctrl+shift+; (горячие клавиши нужно настроить)

Создайте горизонтальные направляющие 140px, 180px, 200px, 574px, 900px, 1450px, 1510px, 1610px и вертикальные направляющие 100px, 110px, 130px, 1270px, 1290px, 1300px.

Макет примет вид как на картинке. Это линии, расчерчивающие основные блоки.

Рисуем основные блоки

Переходим в папку, соответствующую шапке сайта. Выбираем основной цвет #3e0b1b.

Рисуем прямоугольник высотой 140 px, до первой горизонтальной направляющей,убедившись, что в параметрах инструмента выбран тип рисования слой-фигура. Называем этот слой Подложка .

шапка подложка

Теперь перейдем к папке меню. Меню у нас будет фиксированной ширины 750 px, всего 5 пунктов по 150 px. Cоответственно нужно прочертить вертикальные направляющие 350px, 1100px, 500px, 650px, 800px, 950px.

Выбрем цвет переднего плана #7652a5 и изобразим первый пункт. Теперь сделаем полученный прямоугольник слегка наклонным. Нажимаем ctrl+T . В параметрах сверху выбираем наклон -10. Жмем галочку, применяя изменения.

Осталось применить к полученному пункту стили. Если два раза щелкнуть по слою Пункт , откроется окно с настройкой стилей.Применяем стиль Внутренняя тень с настройками как на картинке.

Остальные пункты размножим путем копирования первого. Получится что-то подобное.

Переключимся на папку Контент в слоях. Изменим основной цвет на #c3b4d8 . Рисуем прямоугольник соответствующий странице.

Затем выше рисуем еще один прямоугольник с цветом, до горизонтальной направляющей 574px. Слой назовем Верх страницы и применим к нему стиль Тень , как показано ниже.

Переключаемся на инструмент Линия на панели инструментов, чтобы нарисовать разделитель для страницы (вдоль горизонтальной направляющей 900px, между вертикальными направляющими 130px и 1270px). Цвет #fff.

Осталось создать слой Подвал . В папке рисуем прямоугольник такого же оттенка как шапка (#3e0b1b).

После всех манипуляций, макет будет выглядеть следующим образом.

Уделяем внимание деталям

Начнем с названия и логотипа. Добавляем дополнительные направляющие: горизонтальная 70px и вертикальная 750px.

Выбираем инструмент Текст, в параметрах выставляем шрифт Arsenal, размер 30px.Щелкаем мышкой в центре, в том месте, где будет находится текст и пишем название (в слоях в этот момент выбрана папка Шапка). Теперь делаем шрифт Verdana 24px и ниже пишем слоган (еще один сайт). Копируем рисунок логотипа в фотошоп (просто перетащив его мышью из папки где он находится).

К слоям логотип, название и слоган применяем слой Тень (см. рисунок).

Копируем иконки в папку меню и размещаем их на пунктах.

Прописываем названия пунктов шрифтом Arsenal italic 24px, оттенка #fff.

Теперь заполним верхнюю часть страницы (папка ).

Расчертим направляющими, где будут располагаться, отступы, названия, блоки. Горизонтальные — 220px, 150px, 260px, 320px, 350px, 380px, 390px, 480px, 550px. Вертикальные -470px, 510px, 880px, 920px. Выглядит это так.

Копируем иконки, которые будут перед текстом.

Переключаемся на Текст, пишем названия шрифтом #444 Arsenal 24px. Рисуем четыре серых блока (оттенок #), называем слои блок1, блок2, блок3, блок4.

Добавим еще 4 направляющих, задающих отступы для строки поиска в блоке1 — 270px, 310px (по горизонтали) и 130px, 450px (по вертикали).

Нарисуем ее в виде прямоугольника #fff. Впишем текст Найти…

Ниже находится еще один Блок. В данном случае, там будет список, написанный шрифтом Verdana 18px.

В блоке справа инструментом Текст вычерчиваем прямоугольник (нажать на левую кнопку мыши и потянуть) , с учетом отступов, отмеченных направляющими 940px и 1270px по вертикали и 280px по горизонтали. Получится текстовая область, ограниченная пунктирами, ее удобно использовать для больших текстов. Помещаем туда список тегов.

Разметим центральный блок, в котором будет находится список свежих записей (картинка+заголовок+категория). Создадим для этой цели в слоях папку Свежие записи.

С помощью направляющих отмечаем отступы слева, справа, сверху, снизу 20px. Заголовок выполняется шрифтом Arsenal 24px, цвета #8f0814 и отстоит от категории статьи на 10px, что отмечено линиями. Расстояние между отдельными записями с картинками также по 20px по вертикали. Текст отстоит от левого края на 120px, плюс отступ 10px.

Копируем заранее подготовленные, произвольные картинки и подгоняем до нужных размеров.

Размечаем среднюю часть страницы — cверху будет отступ 20px для всего контента.

Справа список статей с картинками. Расстояние между картинками 30px, ширина картинок -100 px, отступ до текста справа 10px. Шрифты такие же как в блоке Свежие записи.

Слева находится статья с большой картинкой и кратким содержанием, которая будет занимать пространство между направляющими 130 и 880 пикселей. Картинка от 130px до 430px (ширина 300px). Заголовок Arsenal 24px #444. Текст статьи — Verdana 14px, такого же цвета. От заголовка сделан отступ 10px. Снизу до разделителя такой же отступ 10px.

Внизу страницы, ниже разделителя вставляем большой кусок текста с помощью текстового поля. Я взяла его из рефератов Яндекса, о которых упоминала выше. Параметры шрифта -Verdana, 14px, #444.

Добавляем направляющую посередине футера (1560px по горизонтали), вставляем и центрируем текст с копирайтом по ней.

Вот так выглядит итоговый вариант макета.

На этом все, спасибо за внимание.