Хедер для коммерческого сайта
В этом уроке мы рассмотрим, создание хедера для сайта. Вы узнаете много секретов и уловок, которыми пользуются профессионалы при создании хедеров на заказ, для своих клиентов.
(Кликните, чтобы увеличить изображение)
Шаг #1. Создайте новый документ с разрешением 780/160, из которого мы и будем делать хедер для сайта, (для этого пройдите в пункт меню файл -> новый или нажмите сочетание клавишCtrl+N). Заполните фон белым (#FFFFFF) (для этого вначале выберите цвет, а затем, выбрав инструмент, заливка заполните фон).
Шаг #2. Сначала нам необходимо создать новый паттерн, который мы будем использовать при изготовлении хедера. Поэтому нажмите сочетание клавиш Ctrl+N на вашей клавиатуре и создайте новый документ с разрешением 10x6 и прозрачным фоном. (как показано на рисунке ниже):
Затем установите следующее значение цвета: #FFA800, выберите инструмент карандаш ( ) и установите следующие его настройки:
При помощи карандаша сделайте следующий паттерн, для этого масштабируйте изображения и кликая карандашом закрасьте его, чтобы у вас получился узор, похожий на тот который расположен ниже:
Шаг #3. Теперь определим наш узор как текстуру, для этого пройдите в пункт меню редактирование -> определить узор (Edit->Define Pattern), дайте имя вашему узору и нажмите “да” (ok).
После этого можете свернуть или закрыть изображение 10x6 пикселей и вернитесь к нашему основному изображению, теперь мы готовы работать дальше.
Шаг #4. Создайте новый слой, слой -> новый -> слой… или (Shift+Ctrl+N) если Вы этого еще не делали и сделайте прямоугольное выделение, как показано здесь:
(Кликните, чтобы увеличить изображение)
Заметьте: это выделение размером 6 пикселей по высоте и охватывает всю длину холста.
Затем выберите инструмент заливка ( ) и установите следующие настройки:
Убедитесь, что вы выбираете новый узор, который мы создали с вами ранее в этом уроке.Как только вы это сделали, заполните прямоугольное выделение на холсте при помощи инструмента заливка. Результат:
Шаг #5. Затем создайте новый слой, установите ваш цвет в значение #E1E1E1, выберите инструмент карандаш и примените следующие настройки:Теперь начертите линию на всю длину холста приблизительно на 2 пикселя выше оранжевого узора, который мы только что сделали:
Шаг #6. Теперь используя те же самые параметры настройки, создайте новый слой и начертите еще одну линию на всю длину холста но уже на 2 пикселя ниже оранжевого узора, у вас должно получится следующее:
Теперь пройдите в пункт меню слой -> стиль слоя -> параметры наложения и примените следующие настройки:
Тень:
Результат:
Шаг #7. Затем создайте новый слой и разместите его непосредственно выше заднего плана (таким образом, новый слой будет находиться ниже всех предыдущих слоев, см. изображение):
На новом слое, используя инструмент “Прямоугольная область”, сделайте следующее прямоугольное выделение:
(Кликните, чтобы увеличить изображение)
Заполните это выделение белым (#FFFFFF) и нажмите сочетание клавиш Ctrl+D на вашей клавиатуре, чтобы снять выделение.Теперь дважды щелкните по этому слою, и примените следующие параметры:
Внешнее свечение:
Результат:
Шаг #8. Затем нажмите сочетание клавиш Ctrl+T на вашей клавиатуре и чтобы запустить свободное трансформирование и растянуть правую и левую стороны блока за пределы холста, чтобы скрыть внутренне свечение с правой и левой стороны. (см. изображение):
Перетащите правую и левую сторону по направлению наружу.
Нажмите клавишу Enter на вашей клавиатуре, чтобы завершить преобразование, результат:
Шаг #9. Создайте новый слой, установите цвет в значение #EEEEEE. Выберите инструмент карандаш и сделайте настройки как на рисунке ниже:
Начертите линию на всю длину холста приблизительно на 3 пикселя ниже блока, который мы создали в позапрошлом шаге.
Результат:
Шаг #10. Теперь мы сделаем кнопки. Создайте новый слой. Затем инструментом прямоугольная область в той части вашего холста, где вы хотите видеть кнопки сделайте следующее выделение:
Пройдите в пункт меню выделение -> модификация -> растушевка… (Select -> Modify -> Smooth) и в настройках установите радиус в 3 пикселя:
Заполните этот выбор цветом #F3F3F3 и нажмите сочетание клавиш CTRL + D на вашей клавиатуре, чтобы снять выделение:
Дважды кликните по данному слою, и примените следующие параметры:
Внутренняя тень:
Внешнее свечение:
Обводка:
Результат:
Шаг #11. Затем дублируйте ваш слой, с кнопкой нажимая сочетание клавиш CTRL + J, затем используя инструмент перемещения, переместите ваши кнопки в лево или в право в то место где бы вы хотели их видеть.
Подсказка: удерживайте клавишу Shift в то время когда вы будете перемещать кнопки это будет гарантировать, то, что кнопка, которую вы перемещаете, останется на одном уровне с той кнопкой, которую вы копируете.
Результат:
Шаг #12. Затем мы добавим текст к Вашим кнопкам. Для этого выберите цвет #575757 и нанесите текст на Ваши кнопки. В данном случае использовался шрифт 12pt, Vernada, полужирный.
Шаг #13. Затем мы создадим область, в которую будет помещена эмблема компании. Создайте новый слой и разместите его выше всех остальных слоев:
Сделайте следующее прямоугольное выделение при помощи инструмента прямоугольная область.
(Кликните, чтобы увеличить изображение)
Пройдите в пункт меню выделение -> модификация -> растушевка… (Select -> Modify -> Smooth) и в настройках установите радиус в 4 пикселя:
Заполните это выделение цветом (#FEFEFE) и нажмите Ctrl+D чтобы снять выделение. Два раза кликните по этому слою, и примените следующие параметры наложения:
Наложение градиента (Gradient Overlay):
Результат:
Шаг #14. Затем поместите эмблему вашей компании или сайта в этой области.Обратите внимание что эмблема и название компании размещено в левом верхнем углу страницы, это первое что видит пользователь, начиная просматривать страницу. Это очень важная часть дизайна любого комерческого сайта.
Шаг #15. Если хотите вы можете продолжить совершенствовать дизайн вашего хедера для сайта, здесь l've добавил несколько маленьких деталей к кнопкам. Это небольшие кружки с обеих сторон с внутренним свечением. А так же небольшие оранжевые линии, расположенные вдоль вершин кнопок, чтобы их лучше выделить. Наконец l've добавил слоган компании.Вот - заключительный результат:
(Кликните, чтобы увеличить изображение)
Я надеюсь, что в ходе выполнения данного урока вы узнали для себя несколько новых приемов работы, спасибо за внимание.
Материал подготовлен порталом: webmastermix.ru
Источник
- Подробности
-
Опубликовано: 14 Январь 2010
-
Обновлено: 08 Сентябрь 2013
-
Просмотров: 11247