Designfire.ru - блог о дизайне, обо мне, ну и немного о заработке в сети. Это не очередной сайт с кисточками для фотошопа. Это мой личный блог, в который я буду записывать все свои попытки научиться чему-то новому. Так что будем учиться вместе !

Создание шапки для сайтов — Урок

Мне срочно понадобилось сделать дизайн для одного сателлита на тему «Путешествия по Украине». Сателлит в данном случае не путать с ГС (говносайтом). Это полноценный сайт, но использоваться будет как сателлит … Решил убить сразу двух зайцев и в процессе создания диза сделать урок создания шапки для сайтов.  Все было замучено на скорую руку и ошибок хватает, потому попрошу строго не судить :)

urok_shapka_dly_sayta_1

Шапку для сайта нужно сделать фиксированной ширины 950 px. Как основу выбрал вот такую вот фотографию Киева (кликабельно):

urok_shapka_dly_sayta_ishodnik

Как вы наверное заметили — фотка очень блеклая и не насыщенная, но нам это в данном случае только на руку — большее поле для действий :) Нам понадобится небольшой микс из материалов для данного урока шапки для сайтов, вот собственно и он (основа, небо, шар, Андреевская церковь, и Киево-Печерская Лавра):

urok_shapka_dly_sayta_ishodniki

В основной фотографии, которую я показал как иходник я  предварительно при помощи Clone Stamp Tool поубирал лишние в воде (всякие буксиры, баржи, краны и буйки). Но не пойму до сих пору куда я дел начальный вариант :) Будем считать стартом фотографию на данном этапе.

1) Начнем !

Вырезаем небо, которое выглядит уж очень угрюмо, в данном случае пользоваться выделениями типа Magic Wand Tool и Magnetic Lasso не очень удобно.  Я пользовался Polygonal lasso и обычным прямоугольным выделением. Вы уже делайте как вам удобно.

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

urok_shapka_dly_sayta_2

2) Работаем с цветом

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

Выделяем часть острова слева с помощью быстрой маски. Для этого на панели инструментов нажимаем на пиктограмму маски (или Q с клавиатуры). В Chanels два раза кликаем по Quick Mask и выбираем Selected Areas.

urok_shapka_dly_sayta_3

Зарисовываем кистью в режиме быстрой маски остров, где намазили лишнего — убираем ластиком. Время от времени переключайтесь из режима маски в выделение, чтобы видеть результат (клацаем Q).

urok_shapka_dly_sayta_42

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

Теперь добавим контрастности острову  Image >>> Adjustments >>> Hue/Saturation. Ставим Saturation +35. Также можно немного пошарпить деревья на строве (Sharpen Tool (R) с Strength 9%).

urok_shapka_dly_sayta_5

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

Я создал три копии слоя с холмом и применял к ним разные значения на панели Hue/Saturation (Image >>> Adjustments >>> Hue/Saturation), а также на панели Color Balance (Image >>> Adjustments >>> Color Balance).  Потом я ластиком подтер на каждом из слоев ненужные части, оставив лучшие участи из 3 слоев.  В итоге вышло следующее:

urok_shapka_dly_sayta_6
Не «фонтан» конечно, но на данном этапе сойдет :)

Приступим к реке.  Выделяем реку любым способом (я пользовался инструментом полигонал тул). Преходим в Image >>> Adjustments >>> Hue/Saturation. Ставим Saturation +40 и Hue -3.

urok_shapka_dly_sayta_7

3) Работаем с пиксельным карандешем

Теперь немного подрихуем мост. Чтобы облегчить работу — шарпим его с помощью Sharpen Tool (R). Далее дорабатываем однопиксельным карандашем.

urok_shapka_dly_sayta_8

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

urok_shapka_dly_sayta_9

Русем пиксельным карандашем здания на холмах (правая часть нашего холста). Я особо не заморачивался и нарисовал вот такие вот дома (если хотите, чтобы шапки для сайтов были красивые, то все же стоит позаморачиваться):

urok_shapka_dly_sayta_10

Слои с домами дублируем и расставляем их друг за другом, высветляя и затемняя где нужно.

Теперь нужно заменить Киево-Печерскую Лавру. Аккуратно вырезаем, уменьшаем в размере и кладем на слой ниже основного (под холмы). Я еще немного подкорректировал пиксельным карандашем для четкости.

urok_shapka_dly_sayta_111

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

urok_shapka_dly_sayta_121

Теперь можно уже и небо сделать нормальное. Нашел в гугле вот такой кусок и вставил его под основной слой. Линию горизонта немного высветлил. Скрин показывать не буду — видно в конечном резултате.

Далее приступим к обработке левой части холста — дома в далеке. Начнем с того, что пошарпим их с помощью Sharpen Tool (R), а также дорисуем «пучек небоскребов» для солидности.

urok_shapka_dly_sayta_13

Основная работа проделена. Теперь нужно немного подправить то, что вышло.

Начнем с левой части и сделаем более зеленым остров (уберем желтизну). Выделяем остров, заходим в Image >>> Adjustments >>> Color Balance и ставим +28 в сторону зеленого цвета.

Холм справа — слилась текстура в зеленый цвет — нужно добавить текстуры. Копируем кусок острова и накладываем несколько копий поверх холма. Делам прозрачность около 30% и подтираем ластиком.

urok_shapka_dly_sayta_14

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

urok_shapka_dly_sayta_15

На последок добавим еще воздушные шары в небо и вуаля! Шапка для сайта готова (картинка кликабельна).

rezultat

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

Знаю, что тут есть немало ошибок, недоработки со светом и т.д., но надеюсь дальше у меня будет выходить лучше. Все-таки делать полноценные свои уроки — тяжелое занятие.

Автор: Ткачук Евгений
Источник: www.designfire.ru

!!! Дублирование разрешается только при наличии активной прямой ссылки на www.designfire.ru без запрета на ее индексацию (без noindex и nofollow) и указанием автора !!!

_________________________
создание сайта саратов

Если вам интересно читать этот блог, подпишитесть на RSS feed
Сделайте это сейчас!

Комментарии (20)

Rakutin

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

DesignFire

Спасибо, учту. Я вообще впервые подобное делаю и это мои первые попиксельно нарисованные здания. Как говорится «первый блин …».
Я раньше ленился учиться делать что-то в таком стиле и больше к минимализму склонялся без особой графики, либо готовое уже компоновать, но нужно перебороть лень и учиться )))

Rakutin

А я люблю заморачиваться) Че нить отрисовать или попиксельно прорисовать)

Vir2al

Хороший урок, но забний фон слижком уж четкий.

Cветлана

Ну вот, теперь понятно, почему я не могу порой узнать знакомые вроде-бы места, так их «отфотошопили» :)

Не поняла, зачем небоскребы рисовали на реальном пейзаже? Не легче ли от нуля нарисовать город мечты, или наоборот, использовать клипарт с высотками для фона? Цель — просто красивый вид, или вид будущего, или «облагороженный» снимок сегодняшнего дня?

Designfire

Цель скорее объединить несколько уроков в одном, но не совсем вышла совместимость всех элементов. Как-нибудь на досуге попробую довести картинку до ума и сделать работу над ошибками.

YuGran

Хотелось бы видеть все исходники последующих уроков.

yellowcat

Интересно, дизайн заказчику прокатил, если он был выполнен на скорую руку?

Designfire

Yellowcat , да, заказчику понравилось. Но стоит обратить внимание на то, что указано в первом абзаце:

«дизайн для одного сателлита на тему “Путешествия по Украине”. Сателлит в данном случае не путать с ГС (говносайтом). Это полноценный сайт, но использоваться будет как сателлит »

Потому и требований жестких не было. В другом случае я бы все-таки картинку дорабатывал. Уж слишком сырая и ошибки имеют место.

weergoreulk

Отличный дизайн !

Saipux

Спасибо, красивая шапка получилась.

idesign

Чтобы задний фон был менее резким я бы посоветовал эффект тумана сверху, т.е. слой градиента с Opaque и чем то там еще, видел где то статью, называется «Реалистичный эффект тумана»

Sir

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

Дмитрий

Интересно, но мне кажется что там лишнея та крутая церква и как раз те воздушные «шарики»

kot

Спасибо за полезную информацию! Как раз сайт делаю, шапку тоже хочу сам сделать.

Женька

Технический дизайн не техничен.

Klerik

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

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

Designfire спасибо за урок.

Максим

Спасибо! Нормальный урок! Приму к сведению…

Daos теперь и на sosnovskij.ru + конкурс!

[...] у посетителя. Если вас интересует создание шапки для сайтов с нуля в фотошопе, то на блоге designfire.ru можно найти [...]

Ilyia

Спасибо большое а то я в фотошопе хорошо разбираюсь а простую шапку для сайта сделать не могу( И тут я увидел ваш блог))) Спасибо большое!


Оставить комментарий


Ваше имя (обязательно)
Ваше e-mail (обязательно)
Ваш блог или сайт