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

Создание хедера для коммерческого сайта в Фотошопе

final
(Кликните, чтобы увеличить изображение)

Шаг #1. Создайте новый документ с разрешением 780/160, из которого мы и будем делать хедер для сайта, (для этого пройдите в пункт меню файл -> новый или нажмите сочетание клавишCtrl+N). Заполните фон белым (#FFFFFF) (для этого вначале выберите цвет, а затем, выбрав инструмент, заливка заполните фон).

Шаг #2. Сначала нам необходимо создать новый паттерн, который мы будем использовать при изготовлении хедера. Поэтому нажмите сочетание клавиш Ctrl+N на вашей клавиатуре и создайте новый документ с разрешением 10x6 и прозрачным фоном. (как показано на рисунке ниже):

1

Затем установите следующее значение цвета: #FFA800, выберите инструмент карандаш ( 2 ) и установите следующие его настройки:

3

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

5

Шаг #3. Теперь определим наш узор как текстуру, для этого пройдите в пункт меню редактирование -> определить узор (Edit->Define Pattern), дайте имя вашему узору и нажмите “да” (ok).

6

После этого можете свернуть или закрыть изображение 10x6 пикселей и вернитесь к нашему основному изображению, теперь мы готовы работать дальше.

Шаг #4. Создайте новый слой, слой -> новый -> слой… или (Shift+Ctrl+N) если Вы этого еще не делали и сделайте прямоугольное выделение, как показано здесь:

7

(Кликните, чтобы увеличить изображение)

Заметьте: это выделение размером 6 пикселей по высоте и охватывает всю длину холста.

Затем выберите инструмент заливка ( 8 ) и установите следующие настройки:

9

Убедитесь, что вы выбираете новый узор, который мы создали с вами ранее в этом уроке.Как только вы это сделали, заполните прямоугольное выделение на холсте при помощи инструмента заливка. Результат:

10

Шаг #5. Затем создайте новый слой, установите ваш цвет в значение #E1E1E1, выберите инструмент карандаш и примените следующие настройки:Теперь начертите линию на всю длину холста приблизительно на 2 пикселя выше оранжевого узора, который мы только что сделали:

12

Шаг #6. Теперь используя те же самые параметры настройки, создайте новый слой и начертите еще одну линию на всю длину холста но уже на 2 пикселя ниже оранжевого узора, у вас должно получится следующее:

14

Теперь пройдите в пункт меню слой -> стиль слоя -> параметры наложения и примените следующие настройки:

Тень:

13

Результат:

15

Шаг #7. Затем создайте новый слой и разместите его непосредственно выше заднего плана (таким образом, новый слой будет находиться ниже всех предыдущих слоев, см. изображение):

16

На новом слое, используя инструмент “Прямоугольная область”, сделайте следующее прямоугольное выделение:

17
(Кликните, чтобы увеличить изображение)

Заполните это выделение белым (#FFFFFF) и нажмите сочетание клавиш Ctrl+D на вашей клавиатуре, чтобы снять выделение.Теперь дважды щелкните по этому слою, и примените следующие параметры:

Внешнее свечение:

18

Результат:

19

Шаг #8. Затем нажмите сочетание клавиш Ctrl+T на вашей клавиатуре и чтобы запустить свободное трансформирование и растянуть правую и левую стороны блока за пределы холста, чтобы скрыть внутренне свечение с правой и левой стороны. (см. изображение):

20

Перетащите правую и левую сторону по направлению наружу.

21

Нажмите клавишу Enter на вашей клавиатуре, чтобы завершить преобразование, результат:

22

Шаг #9. Создайте новый слой, установите цвет в значение #EEEEEE. Выберите инструмент карандаш и сделайте настройки как на рисунке ниже:

23

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

Результат:

24

Шаг #10. Теперь мы сделаем кнопки. Создайте новый слой. Затем инструментом прямоугольная область в той части вашего холста, где вы хотите видеть кнопки сделайте следующее выделение:

25

Пройдите в пункт меню выделение -> модификация -> растушевка… (Select -> Modify -> Smooth) и в настройках установите радиус в 3 пикселя:

26

Заполните этот выбор цветом #F3F3F3 и нажмите сочетание клавиш CTRL + D на вашей клавиатуре, чтобы снять выделение:

27

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

Внутренняя тень:

28

Внешнее свечение:

29

Обводка:

30

Результат:

31

Шаг #11. Затем дублируйте ваш слой, с кнопкой нажимая сочетание клавиш CTRL + J, затем используя инструмент перемещения, переместите ваши кнопки в лево или в право в то место где бы вы хотели их видеть.

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

Результат:

32

Шаг #12. Затем мы добавим текст к Вашим кнопкам. Для этого выберите цвет #575757 и нанесите текст на Ваши кнопки. В данном случае использовался шрифт 12pt, Vernada, полужирный.

33

Шаг #13. Затем мы создадим область, в которую будет помещена эмблема компании. Создайте новый слой и разместите его выше всех остальных слоев:

34

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

35
(Кликните, чтобы увеличить изображение)

Пройдите в пункт меню выделение -> модификация -> растушевка… (Select -> Modify -> Smooth) и в настройках установите радиус в 4 пикселя:

36

Заполните это выделение цветом (#FEFEFE) и нажмите Ctrl+D чтобы снять выделение. Два раза кликните по этому слою, и примените следующие параметры наложения:

37

Наложение градиента (Gradient Overlay):

38

39

Результат:

40

Шаг #14. Затем поместите эмблему вашей компании или сайта в этой области.Обратите внимание что эмблема и название компании размещено в левом верхнем углу страницы, это первое что видит пользователь, начиная просматривать страницу. Это очень важная часть дизайна любого комерческого сайта.

Шаг #15. Если хотите вы можете продолжить совершенствовать дизайн вашего хедера для сайта, здесь l've добавил несколько маленьких деталей к кнопкам. Это небольшие кружки с обеих сторон с внутренним свечением. А так же небольшие оранжевые линии, расположенные вдоль вершин кнопок, чтобы их лучше выделить. Наконец l've добавил слоган компании.Вот - заключительный результат:

final

(Кликните, чтобы увеличить изображение)

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

Материал подготовлен порталом: webmastermix.ru
Источник

Рекомендуем ознакомиться со следующими материалами:
1 1 1 1 1 1 1 1 1 1 Рейтинг 0.00 (0 Голосов)