Мені терміново знадобилося зробити дизайн для одного сателіта на тему «Подорожі по Україні». Сателіт в даному випадку не плутати з ГС (говносайти). Це повноцінний сайт, але використовуватися буде як сателіт … Вирішив убити відразу двох зайців і в процесі створення диза зробити урок створення шапки для сайтів.  Все було замучено на швидку руку і помилок вистачає, тому попрошу строго не судити Створення шапки для сайтів урок фотошопу технічний дизайн

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

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

В основній фотографії, яку я показав як іходнік я попередньо за допомогою Clone Stamp Tool поприбирав зайві у воді (всякі буксири, баржі, крани та буйки). Але не зрозумію до цих пору куди я справ початковий варіант Будемо вважати стартом фотографію на даному етапі.

1) Почнемо!

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

У місцях де потрібно вирізати попіксельно я беру Rectangular Marquee Tool (Прямокутне виділення) роблю виділення одного пікселя, рухаю його стрілками і бекспейсом видаляю зайві пікселі. Ось що повинно вийти (клікабельно):

2) Працюємо з кольором

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

Виділяємо частина острова зліва за допомогою швидкої маски. Для цього на панелі інструментів натискаємо на піктограму маски (або Q з клавіатури). В Chanels два рази клікаємо по Quick Mask і вибираємо Selected Areas.

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

Виходимо з режиму швидкої маски і отримуємо виділення.

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

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

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

Не «фонтан» звичайно, але на даному етапі зійде

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

3) Працюємо з піксельним карандешем

Тепер трохи подріхуем міст. Щоб полегшити роботу — Шарп його за допомогою Sharpen Tool (R). Далі допрацьовуємо однопіксельні карандашем.

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

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

Шари з будинками дублюємо і розставляємо їх один за одним, висвітлюючи і затемнюючи де потрібно.

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

Як зробити красивими стійки прожекторів від стадіону не уявляю, потім поемпровізіруем і придумаємо щось інше. Я вирішив вставити туди Андріївську церкву (її там в реалі немає, але для краси поставимо) і парочку будівель (про них писав вище).

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

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

Основна робота просмикнули. Тепер потрібно трохи підправити те, що вийшло.

Почнемо з лівої частини і зробимо більш зеленим острів (приберемо жовтизну). Виділяємо острів, заходимо в Image Adjustments Color Balance і ставимо +28 убік зеленого кольору.

Пагорб праворуч — злилася текстура в зелений колір — потрібно додати текстури. Копіюємо шматок острова і накладаємо кілька копій поверх пагорба. Справах прозорість близько 30% і Підтираємо гумкою.

Зліва ще є якась будівля біля води. Чесно кажучи не знаю що це, але підмалювати доведеться. Беремо все той же піксельний олівець і працюємо:

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

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

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

Автор: Ткачук Євген

Джерело: www.designfire.ru

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

_________________________

створення сайту саратов