Наша взаимовыгодная связь https://banwar.org/
Дорогі друзі сьогодні ми з вами розглянемо таке актуальне питання - як зробити шапку для сайту або блогу? Після вивчення даного уроку ви навчитеся робити шапки для сайтів в фотошопі. Робити ми будемо ось таку шапку: 
(Натисніть на Картік для перегляду оригіналу)
У мене стоїть Photoshop CS4 (англійська версія). Будемо вважати що до нас надійшло замовлення на виготовлення шапки для сайту або блогу. Замовник надіслав зразок майбутньої шапки і пояснив:
Зліва на шапці хочу тематичну іконку + назва сайту та слоган, праворуч буде 3 тематичних картинки з мультфільму і фільмів. Знизу на шапці буде горизонтальне меню (по центру).
(Натисніть на Картік для перегляду оригіналу)
І так, сідайте за зручніше, я починаю свою розповідь 🙂 1. Створюємо новий документ File → New (Файл → Новий або CTRL + N - в дужках разом з перекладом буду вказувати скорочення - простіше кажучи "гарячі" клавіші, які дозволяють економити час в програмі фотошоп). У віконці я вказав наступні параметри:
В результаті вийшов новий документ: 
(Натисніть на Картік для перегляду оригіналу)
Після цього зробимо невелику налаштування фотошопа: Ставлю галочку Auto-Select (Автоматично вибрати) і в випадаючому меню вибираю Layer (Шари) - це налаштування дозволяє вибрати будь-який шар при натисканні на ньому.
Включаємо шкалу-лінійку для документа: Йдемо Views → Rules (Вид → Лінійки або просто тиснемо CTRL + R) повинна з'явитися горизонтальна і вертикальна шкала-лінійка. 
Відразу ж слід переконатися, що дані на лінійці відображаються в пікселях. Для цього клацаємо двічі мишкою по самій шкалою з лінійкою і вибираємо такі дані: 
Після цього я з допомогою напрямних (клацаєте по лінійці і тягнете мишку вправо або вниз), розмічаю місця під основні елементи шапки: 
(Натисніть на Картік для перегляду оригіналу)
Напрямні можна Показувати / Ховати за допомогою View → Show → Guides (Вид → Показувати → напрямні) або CTRL +; 2. Приступимо до створення основних елементів шапки. Створимо фон для шапки. Йдемо Windows → Layers (Вікно → Шари або F7). Двічі клацаємо по шару Background, тим самим перетворимо його в простий шар (назва шару я вказав - fon-shapki)
Далі ще раз двічі клацаємо по шару fon-shapki і відкривається віконце зі стилями шару, там вибираємо потрібний стиль для шару, я вибрав градієнтну заливку - Gradient Overlay (Заливка градієнтом) і поставив наступні настройки. Клацаємо двічі по смужці з градентом: 
У наступному віконці клацаємо мишкою по лівому маркера: 
У віконці, внизу вказуємо колір 196ca6 і тиснемо OK. 
Далі клацаємо по правому маркера і в віконці вказуємо колір 0048a0 і тиснемо OK. Далі копіюємо наш шар з фоном. У палітрі Layers (Шари, F7) вибираємо наш шар мишкою, далі натискаємо мишкою на шари і не відпускаючи кнопки миші переносимо шар на наступну іконку 
і відпускаємо мишку. Створиться новий шар - копія попереднього (можна просто натиснути CRTL + J). Не знімаючи виділення з нового шару, встановимо йому Opacity (Непрозорість) в 18%. 
Далі клацаємо два рази нового шару, знімаємо галочку з Gradient Overlay (Заливка градієнтом) і ставимо галочку Pattern Overlay (Заливка текстурою), ставимо такі налаштування: 
Все фон для шапки у нас готовий. 3. Далі зробимо фон для горизонтального меню знизу. Робимо новий шар - натискаємо на піктограму або просто тиснемо Shift + Ctrl + N (у нас вийшов новий прозорий шар). Після цього вибираємо інструмент 
Rectangular Marque Tool (Прямокутне виділення, M) і малюємо прямокутне виділення. 
(Натисніть на Картік для перегляду оригіналу)
Після цього заливаємо наше виділення довільним кольором. беремо інструмент 
Paint Bucket Tool (Відро, G) і натискаємо по виділенню (я вибрав колір 165394).
Переходимо в стилі нового шару і ставимо галочки навпроти наступних пунктів: Drop Shadow (Відкидати тінь), Gradient Overlay (Градиентная заливка), Stroke (Обведення), з наступними настройками: 
Після цього вкажемо Opacity (Непрозорість) шару в 80%. 
(Натисніть на Картік для перегляду оригіналу)
Після того як у нас готовий фон, можна приступати до створення інших елементів шапки. 4. Напишемо назву сайту, слоган і текст для горизонтального меню. Для цього вибираємо інструмент 
Horizontal Type Tool (Горизонтальний текст) і клацаємо на шапці в тому місці, в якому плануємо написати напис, і пишемо її. Маленька підказка. Cлоі дуже зручно рухати або перетягувати з документа в документ за допомогою інструменту 
Move Tool. Я вибрав для назви сайту напис "Myvideo.com" і настройки тексту вибрав наступні:
Для слогану вибрав напис "тільки краще відео і фільми" і наступні настройки тексту: 
Для пунктів меню я вибрав написи "Головна", "Про сайт", "Контакти", "Пошук", "Реклама на сайті", "Блог" я вибрав наступні настройки тексту: 
І ось що у мене вийшло. 
(Натисніть на Картік для перегляду оригіналу)
Для шару з назвою сайту, застосував такі настройки для стилів шару (Drop Shadow і Bevel and Emboss).
Що б змінити колір тексту, вибираємо інструмент , Клацаємо прямо по тексту з назвою сайту і виділяємо текст для якого потрібно змінити колір (я вибрав колір - add7fe). 
5. Після цього нам потрібно підібрати тематичну іконку. Іконку можна легко знайти на цікавому сайті Iconfinder.com , Просто заходимо на сайт, вводимо слово характеризує потрібну нам тематику (я ввів слово - Video) і натискаємо Search (Пошук). Вибираємо вподобану іконку і зберігаємо (натискаємо правою кнопкою миші по картинці і вибираємо пункт Зберегти зображення ...) її на комп'ютер. Я вибрав таку картинку: 
Далі відкриваємо картинку в фотошопі File → Open. Тепер потрібно перенести шар з іконкою в наш документ з шапкою. Для цього вибираємо інструмент Move Tool, вибираємо шари з іконкою, натискаємо правою кнопкою миші і вибираємо пункт Dublicate Layer (Копія шару). 
У віконці, що з'явилося вказуємо, який шар, в який документ копіювати: 
Після виконаних маніпуляцій іконка повинна додатися в документ з шапкою. Як бачимо, вона має набагато більший розмір, ніж нам потрібен, будемо її зменшувати. 
Для цього йдемо Edit → Free Transform (Правка → Вільна Трансформація, Ctrl + T). Навколо картинки утворилася рамочка з маркерами. Далі для рівномірного зменшення картинки, натиснемо Shift і не відпускаючи його робимо рамку менше (зменшуючи мишкою рамку) тим самим трансформуємо картинку як нам потрібно. 
У мене вийшло ось так: 
(Натисніть на Картік для перегляду оригіналу)
Як бачите більшу частину шапки ми вже зробили, залишилося додати тематичні картинки праворуч і у нас вийти цікава шапка для сайту або блогу. 6. Покажу, на прикладі як я робив першу картинку. Як бачите на кінцевому зразку шапки (картинка на самому початку цієї новини), все картинки вставлені в рамочки. Нам потрібно створити рамку і помістити в неї картинку з нашим зображенням. Для цього створимо новий шар Shift + Ctrl + N. Вибираємо інструмент інструмент Rectangular Marque Tool (Прямокутне виділення) і малюємо прямокутне виділення. Зручно робити виділення з направляющимися (якщо потрібен точний розмір), але можна і без них (на око).
Заливаємо наше виділення будь-яким кольором беремо інструмент Paint Bucket Tool (Відро, G) або просто тиснемо Alt + Backspace. Після цього клацаємо по шару два рази і потрапляємо в стилі шару. Я виставив такі настройки для Drop Shadow, Color Overlay: 
Тематичні картинки мультфільмів і фільмів я взяв з сайту Kinomania.ru . Після того як ми підібрали картинки, відкриваємо їх в фотошопі. Переносимо кожну картинку в документ з нашої шапкою.
([color = # ce2c2c] Увага! [/ color] Шар з картинкою після додавання в новий документ може виявитися нижче інших верств распложение в цьому документі. Порядок шарів в документі можна змінювати мишею. Для цього в палітрі Layer (Шари, F7) виберіть потрібний шар, натисніть мишею на нього, тепер не відпускаючи миша перетягніть шар вище або нижче інших верств в документі.) Якщо ви хочете що б шар виявився вище всіх шарів - виділіть шар і натисніть Shift + Ctrl +].)
(Натисніть на Картік для перегляду оригіналу)
Далі будемо робити ефект виходу картинки з кадру. Для цього ми будемо використовувати маски в фотошопі. Вибираємо шар з нашої картинкою, після цього вибираємо інструмент інструмент Rectangular Marque Tool (Прямокутне виділення, M) і малюємо прямокутне виділення поверх зробленого фону.
Після цього в палітрі Layers (Шар, F7), натискаємо на кнопочку 
. 
Далі прибираємо замочок (клікаєм по ньому мишкою) між картинкою і її маскою. Після цього вибираємо саму картинку. 
Виконані дії дозволять нам рухати картинку всередині маски, так само всередині картинку можна трансформувати. Рухати картинку можна клавішами - Вправо, вліво, Вгору і Вниз на клавіатурі або за допомогою інструменту Move Tool. 
Рухаючи і трансформуючи картинку доб'ємося потрібного нам результату: 
(Натисніть на Картік для перегляду оригіналу)
Тепер нам залишилося тільки додати ковбоєві обрізану капелюх. Для цього йдемо в палітру з шарами (тиснемо F7), виділяємо наш шар з картинкою і вибираємо піктограму з маскою шару.
Далі встановлюємо в фотошопі колір переднього / заднього плану за замовчуванням (чорний / білий), для цього тиснемо D на клавіатурі, так само можна змінювати кольори місцями за допомогою клавіші X (є так само відповідні кнопочки внизу панелі з інструментами). 
Після цього вибираємо інструмент 
Brush Tool (Кисть, B). Тепер малюючи пензлем коли обраний Чорний колір - як колір переднього плану, на картинки у нас буде маска стиратися, а коли у кисті стоятиме Білий колір - як колір переднього фону, картинка у нас буде з'являтися. 
Простіше кажучи, при активному Чорному кольорі, пензлик працює як Гумка (тобто стирає зображення), а при активному Білому кольорі пензлик працює як Восстановитель (відновлює все те, що приховано). Акуратно обробивши картинку пензлем, у нас вийшов ефект виходу з картинки (шапка виходить за межі картинки). 
Додамо внутрішню тінь для картинки. Додамо стиль для шару Inner Shadow (Внутрішня Тінь). 
ось що вийшло: 
Залишилося повторити всі ці дії для другої і третьої картинки. В кінцевому підсумку у мене вийшла готова шапка для сайту або блогу. (Натисніть на Картік для перегляду оригіналу)
Шапка вийшла простенька, але зі смаком.
