16:22 Рисуем ретро-шапку для блога в фотошопе | |
Рисуем ретро-шапку для блога в фотошопеОдно направление дизайна сменяет другое. Некогда глянцевый, сверкающий дизайн — сменился плоским и эргономичным. Но что-то скоротечно и быстро меняется, а что-то вечно и остается на всегда. К вечному, как раз, и относится ретро-стиль.
Сегодня я расскажу, как рисуется шапка для сайта в фотошопе в ретро-стиле. Это не займет у вас много времени, так-как она очень проста и не требует профессиональных знаний и колосальных усилий. РазметкаРазметим рабочую область при помощи линейки (Ctrl+R). По идеи, шапка должна быть высотой около 200px. Но я буду показывать в большем масштабе и сделаю ее 450px. Ширина должна соответствовать будущему макету — 1000px. Откройте дополнительные материалы, загрузите тексутру bg_header и размножьте её на созданном ранее макете.
Горизонтальное менюТеперь давайте сделаем горизонтальное меню. При помощи направляющих и линейки отмерьте снизу 80px и залейте этот прямоугольник белым цветом. Из дополнительных материалов загрузите файл bg_menu и размножьте его в пределах созданного ранее прямоугольника. При помощи Type Tool (T). используя шрифт Georgia, напишите пункты меню, сделав их темно-серого цвета (#575757). Расстояние между пунктами должно быть не менее 60px. Далее выберите на панели инструментов Rounded Rectangle Tool (U) и нарисуйте вокруг каждого пункта меню обводку. Теперь нам необходимо сделать активный пункт меню. Допустим, это будет Веб-дизайн. Измените текст активного пункта на белый, а подложку на красно-оранжевый, убрав при этом все параметры слоя, включая обводку.
Создание логотипаСейчас мы займемся разработкой логотипа. Из дополнительных материалов загрузите файл bg_logo и расположите его в центре нашей шапки — это будет основа. В центре основы создайте круг диаметром 240 px и задайте ему нежно-кремовый оттенок #f1e8d5. У нас должно получиться нечто подобное:
Отлично, наш логотип приобретает формы, двигаемся дальше. Теперь, при помощи Rectangle tool. нарисуйте полоску высотой 370px и расположите ее в центре круга. Цвет полоски должен совпадать с цветом основы #e77817.
Как копировать параметры слоя: Допустим шапка для сайта в фотошопе рисуется всего на двух слоях: А — с параметрами и Б — без параметров. Кликнем в панели слоев на названии слоя А правой клавишей мыши и выбираем пункт Copy Layer Style. Затем кликнем на названии слоя Б и выбираем пункт Paste Layer Style. Так же, можно удалить все параметры слоя, выбрав пункт Clear Layer Style. P.s. При копировании параметров от слоя А к слою Б, параметры слоя Б, если таковые имелись, полностью заменяются, а не дополняются. Из дополнительных материалов загрузите шрифт Bazar и напишите белым цветом на ранее созданной полоске слово Blog. Любым другим шрифтом, например Georgia. сверху от полоски, напишите слово ВЕБ, а снизу ДИЗАЙНЕРА, как показано на рисунке ниже:
На самом деле, вместо надписей вы можете поискать на фотостоках подходящее изображение и вставить его. Финальные доработкиИз дополнительных материалов загрузите текстуру tx_logo. Расположите ее над всеми слоями. Измените Opacity до 26% и режим наложения на linear Burn. Зажав Ctrl кликните левой клавишей мыши на слой bg_logo для того чтобы получить выделение. Не снимая выделение, перейдите на слой с текстурой и нажмите на кнопку создания маски (находится на панели слоев прямоугольник с кружочком внутри). У вас должно получиться примерно следующее:
Из дополнительных материалов загрузите файл tx_logo_2. Поместите его выше всех слоев и проделайте с ним те же манипуляции, что и с текстурой ранее (не забудьте про режим наложения и прозрачность, которая теперь составляет 60%). Загрузите файл Okantovka и расположите его в центре логотипа под текстурами.
При помощи кистей, например Thick Heavy Brushes. нанесите потертости на логотип кремовым цветом (#f1efdd). Поиграйтесь с размерами кистей и режимами наложения. Из дополнительных материалов загрузите файл forlogo. Разместите его выше всех слоев. Измените режим наложения на Color Burn и Opacity до 13%. Добавьте к слою маску так же, как вы это делали несколько шагов назад.
Все готово, остался последний штрих. Поверх всех созданных слоев создайте корректирующий слой, перейдя на панели слоев в new adjustment layer > levels. Удалите у него маску, кликнув по ней правой клавишей мыши и выбрав пункт Delete Layer Mask. Установите следующие параметры:
Файлы для скачиванияВ заключенииШапка для сайта в фотошопе рисуется очень просто, не так ли? Теперь она готова стать частью целого макета. Кстати, уже сейчас вы можете скачать PSD макет. который выполнен в том же ретро-стиле.
Рисуем ретро-шапку для блога в фотошопеОдно направление дизайна сменяет другое. Некогда глянцевый, сверкающий дизайн — сменился плоским и эргономичным. Но что-то скоротечно и быстро меняется, а что-то вечно и остается на всегда. К вечному, как раз, и относится ретро-стиль.
Сегодня я расскажу, как рисуется шапка для сайта в фотошопе в ретро-стиле. Это не займет у вас много времени, так-как она очень проста и не требует профессиональных знаний и колосальных усилий. РазметкаРазметим рабочую область при помощи линейки (Ctrl+R). По идеи, шапка должна быть высотой около 200px. Но я буду показывать в большем масштабе и сделаю ее 450px. Ширина должна соответствовать будущему макету — 1000px. Откройте дополнительные материалы, загрузите тексутру bg_header и размножьте её на созданном ранее макете.
Горизонтальное менюТеперь давайте сделаем горизонтальное меню. При помощи направляющих и линейки отмерьте снизу 80px и залейте этот прямоугольник белым цветом. Из дополнительных материалов загрузите файл bg_menu и размножьте его в пределах созданного ранее прямоугольника. При помощи Type Tool (T). используя шрифт Georgia, напишите пункты меню, сделав их темно-серого цвета (#575757). Расстояние между пунктами должно быть не менее 60px. Далее выберите на панели инструментов Rounded Rectangle Tool (U) и нарисуйте вокруг каждого пункта меню обводку. Теперь нам необходимо сделать активный пункт меню. Допустим, это будет Веб-дизайн. Измените текст активного пункта на белый, а подложку на красно-оранжевый, убрав при этом все параметры слоя, включая обводку.
Создание логотипаСейчас мы займемся разработкой логотипа. Из дополнительных материалов загрузите файл bg_logo и расположите его в центре нашей шапки — это будет основа. В центре основы создайте круг диаметром 240 px и задайте ему нежно-кремовый оттенок #f1e8d5. У нас должно получиться нечто подобное:
Отлично, наш логотип приобретает формы, двигаемся дальше. Теперь, при помощи Rectangle tool. нарисуйте полоску высотой 370px и расположите ее в центре круга. Цвет полоски должен совпадать с цветом основы #e77817.
Как копировать параметры слоя: Допустим шапка для сайта в фотошопе рисуется всего на двух слоях: А — с параметрами и Б — без параметров. Кликнем в панели слоев на названии слоя А правой клавишей мыши и выбираем пункт Copy Layer Style. Затем кликнем на названии слоя Б и выбираем пункт Paste Layer Style. Так же, можно удалить все параметры слоя, выбрав пункт Clear Layer Style. P.s. При копировании параметров от слоя А к слою Б, параметры слоя Б, если таковые имелись, полностью заменяются, а не дополняются. Из дополнительных материалов загрузите шрифт Bazar и напишите белым цветом на ранее созданной полоске слово Blog. Любым другим шрифтом, например Georgia. сверху от полоски, напишите слово ВЕБ, а снизу ДИЗАЙНЕРА, как показано на рисунке ниже:
На самом деле, вместо надписей вы можете поискать на фотостоках подходящее изображение и вставить его. Финальные доработкиИз дополнительных материалов загрузите текстуру tx_logo. Расположите ее над всеми слоями. Измените Opacity до 26% и режим наложения на linear Burn. Зажав Ctrl кликните левой клавишей мыши на слой bg_logo для того чтобы получить выделение. Не снимая выделение, перейдите на слой с текстурой и нажмите на кнопку создания маски (находится на панели слоев прямоугольник с кружочком внутри). У вас должно получиться примерно следующее:
Из дополнительных материалов загрузите файл tx_logo_2. Поместите его выше всех слоев и проделайте с ним те же манипуляции, что и с текстурой ранее (не забудьте про режим наложения и прозрачность, которая теперь составляет 60%). Загрузите файл Okantovka и расположите его в центре логотипа под текстурами.
При помощи кистей, например Thick Heavy Brushes. нанесите потертости на логотип кремовым цветом (#f1efdd). Поиграйтесь с размерами кистей и режимами наложения. Из дополнительных материалов загрузите файл forlogo. Разместите его выше всех слоев. Измените режим наложения на Color Burn и Opacity до 13%. Добавьте к слою маску так же, как вы это делали несколько шагов назад.
Все готово, остался последний штрих. Поверх всех созданных слоев создайте корректирующий слой, перейдя на панели слоев в new adjustment layer > levels. Удалите у него маску, кликнув по ней правой клавишей мыши и выбрав пункт Delete Layer Mask. Установите следующие параметры:
Файлы для скачиванияВ заключенииШапка для сайта в фотошопе рисуется очень просто, не так ли? Теперь она готова стать частью целого макета. Кстати, уже сейчас вы можете скачать PSD макет. который выполнен в том же ретро-стиле.
Landing Page часть #1. Рисуем дизайн меню и шапки сайта.Интересные записи | |
|
| |
| Всего комментариев: 0 | |