Статьи

Використовуючи прогамму Photoshop, малюємо оригінальний банер для сайту

Освоєння програми Photoshop вимагає старання, так як той функціонал, який вона в собі містить, настільки різноманітний, що, володіючи цим арсеналом знань, будь-який дизайн буде вам по плечу. У цьому вам допоможуть наші уроки Photoshop .

В даному уроці ми на простому прикладі розглянемо процес створення банера для веб-сайту або блогу. Два основних моменти, які слід зазначити відразу ж. Перше, ви повинні мати базові поняття про html-структурі вашого сайту, тобто, розбиратися в цьому питанні. Друге, коли ми малюємо банер для сайту, кінцевий результат повинен відповідати не тільки колірній гамі сторінки, але також і її тематиці, і настрою загальної теми оформлення.

Банер - це верхня частина веб-сторінки, її заголовок, де зазвичай вказується назва, представлений логотип і, можливо, навігація по сторінці або корисні посилання. Він є ключовим елементом дизайну, так як це перше, що кидається в очі при першому відвідуванні тієї чи іншої веб-сторінки, і саме банер несе в собі той інформативний мінімум, завдяки якому можна скласти перше уявлення про зміст сайту або блогу. Найпростіше рішення, яке можна запропонувати для виготовлення банера, це фотографія чи ілюстрація, оформлена належним чином. Краще використовувати ті зображення, які належать вам.

Увага! Всі картинки клікабельні.


Ми в нашому прикладі використовуємо фотографію кольорових олівців, з якої виріжемо самі олівці, «підкладемо» під них папір, на якій напишемо адресу нашого сайту - in4art.ru. Отже, малюємо дизайн для сайту .

Крок 1: Обробка фотографії

Перед початком роботи ви повинні визначити розміри банера, який повинен чітко вписується в html-шаблон веб-сторінки. Розміри залежать від параметрів, зазначених в html. У нашому випадку це 800 × 160 пікселів. Завдяки багатошаровій структурі файлів програми Photoshop дані параметри легко підігнати під html-шаблон.

Завдяки багатошаровій структурі файлів програми Photoshop дані параметри легко підігнати під html-шаблон

Використовуючи інструмент «Перо» (P) в режимі «Контури», обведіть олівці, щоб потім їх вирізати. Закрийте контур. Правою кнопкою миші відкрийте меню та виберіть «Утворити виділену область» з радіусом розтушовування 0. Після чого комбінацією Ctrl-Shift-I інвертуйте виділену область і натисніть Delete. Ctrl-D знімає виділення.

Два крайніх олівця на нашій фотографії трохи «не в фокусі», тому можна, використовуючи інструмент «Розмиття» (R), трохи розмити їх чіткі межі.

Крок 2: Основа для банера

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

Створіть новий документ розмірами 800 × 160 пікселів.

Відкрийте в Photoshop файл з текстурою паперу. У списку шарів лівою кнопкою миші виберіть «Створити дублікат шару». У графі «Призначення → Документ» виберіть наш файл Баннер.psd. Цей шар з'явиться над нашим документом. Потім зменшіть розміри зображення олівців так, щоб його висота дорівнювала висоті банера - 160 пікселів (Зображення → Розмір зображення). Цей шар, методом, описаним вище, скопіюйте в файл Баннер.psd.

Крок 3: Тінь

Світло на олівці падає праворуч. Для більшої реалістичності ми можемо додати тінь, що додасть нашому зображенню обсяг. Під шаром з олівцями створіть новий шар (Ctrl-Shift-N). Затискаючи Ctrl на клавіатурі, підведіть курсор миші до іконки шару з олівцями і натисніть ліву кнопку. Так ми позначили контури зображення. Використовуючи інструмент «Заливка» (G), залийте цей контур чорним кольором.

Використовуючи інструмент «Заливка» (G), залийте цей контур чорним кольором

Далі використовуємо фільтр розмиття, щоб тінь виглядала більш реалістично (Фільтр → Розмиття → Розумієте по Гауса). Оскільки олівці ми вже зменшили, то параметр розмиття слід встановити невисокий - 1,0-1,5 пікселів. Використовуючи інструмент «Переміщення» (V), змістите тінь в напрямку падіння світла, тобто справа наліво і на кілька пікселів вниз.

Два рази клацніть мишкою на шарі з тінню і встановіть режим непрозорості на свій розсуд.

Крок 4: Напис

Крок 4: Напис

З огляду на загальну задумку даної роботи, напис слід наносити рукописним шрифтом, яких в мережі багато. Загляньте хоча б в директорію Google Web Fonts. Якщо шрифт знайдений і встановлений, то зробимо напис, використовуючи інструмент «Горизонтальний текст» (T). Шрифт в даному прикладі, називається Cabin Sketch. Як квітів застосуємо кольору двох олівців на нашому зображенні. Інструментом «Переміщення» (V) вийшла напис можна легко рухати по картинці. За допомогою меню «Вільне трансформування» (Ctrl-T) текст можна обертати і викривляти. Щоб букви виглядали так, ніби вони намальовані олівцем на шорсткому папері, можна використовувати ластик з грубої кисті, з яким установлено параметр непрозорості приблизно 40-50%. Для цього попередньо зробіть копію шару з написом і растрируются один з цих шарів (Меню шару → Растеризувати текст). Взагалі завжди в процесі роботи з програмою Photoshop ті верстви, які ви плануєте поставити під значним змінам, краще дублювати, тому що історія ваших дій обмежена і не завжди є можливість повернутися до первісного варіанта.

Великий м'якою кистю можна позначити контури зображення, що імітують затемнення на папері. Для цього створіть новий шар поверх самого першого шару, в якому збережена папір.

Наш банер практично готовий. Збережіть отриманий файл в одному з можливих веб-форматів (JPG, PNG). Папір в кроці 2 можна не використовувати, а зробити її загальним тлом для сайту. Тоді наш банер можна створити в форматі PNG, зберігши його напівпрозорість, і якщо ви захочете змінити фон, вам не доведеться міняти банер.

І тепер ще раз подивимося на наш результат:

І тепер ще раз подивимося на наш результат:

Також слід згадати, що сучасний HTML5 дає цілий спектр можливостей. Наприклад, того, що було зроблено нами в останньому кроці, легко домогтися засобами html. Однак поки ще не всі браузери вміють коректно працювати з HTML5. Але пам'ятайте, що просування неминуче .

Подобається як я пишу? Давайте разом формувати цікаві матеріали на моєму блозі. Ви можете зробити ретвіт даної статті або підписатися на мою стрічку в системі мікроблогів Твіттер. Читайте мене в Твіттері і будьте в курсі останніх моїх дій. А так же підписуйтесь на мою RSS стрічку .
2leep .com

Подобається як я пишу?

Новости