Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Урок фотошоп - Як зробити шапку для сайту або блогу

Наша взаимовыгодная связь https://banwar.org/

Дорогі друзі сьогодні ми з вами розглянемо таке актуальне питання - як зробити шапку для сайту або блогу? Після вивчення даного уроку ви навчитеся робити шапки для сайтів в фотошопі. Робити ми будемо ось таку шапку: Дорогі друзі сьогодні ми з вами розглянемо таке актуальне питання - як зробити шапку для сайту або блогу

(Натисніть на Картік для перегляду оригіналу)

У мене стоїть Photoshop CS4 (англійська версія). Будемо вважати що до нас надійшло замовлення на виготовлення шапки для сайту або блогу. Замовник надіслав зразок майбутньої шапки і пояснив:

Зліва на шапці хочу тематичну іконку + назва сайту та слоган, праворуч буде 3 тематичних картинки з мультфільму і фільмів. Знизу на шапці буде горизонтальне меню (по центру).

(Натисніть на Картік для перегляду оригіналу)

І так, сідайте за зручніше, я починаю свою розповідь 🙂 1. Створюємо новий документ File → New (Файл → Новий або CTRL + N - в дужках разом з перекладом буду вказувати скорочення - простіше кажучи "гарячі" клавіші, які дозволяють економити час в програмі фотошоп). У віконці я вказав наступні параметри:

В результаті вийшов новий документ: В результаті вийшов новий документ:

(Натисніть на Картік для перегляду оригіналу)

Після цього зробимо невелику налаштування фотошопа: Ставлю галочку Auto-Select (Автоматично вибрати) і в випадаючому меню вибираю Layer (Шари) - це налаштування дозволяє вибрати будь-який шар при натисканні на ньому.

Після цього зробимо невелику налаштування фотошопа: Ставлю галочку Auto-Select (Автоматично вибрати) і в випадаючому меню вибираю Layer (Шари) - це налаштування дозволяє вибрати будь-який шар при натисканні на ньому

Включаємо шкалу-лінійку для документа: Йдемо Views → Rules (Вид → Лінійки або просто тиснемо CTRL + R) повинна з'явитися горизонтальна і вертикальна шкала-лінійка. Включаємо шкалу-лінійку для документа: Йдемо Views → Rules (Вид → Лінійки або просто тиснемо CTRL + R) повинна з'явитися горизонтальна і вертикальна шкала-лінійка Відразу ж слід переконатися, що дані на лінійці відображаються в пікселях. Для цього клацаємо двічі мишкою по самій шкалою з лінійкою і вибираємо такі дані: Після цього я з допомогою напрямних (клацаєте по лінійці і тягнете мишку вправо або вниз), розмічаю місця під основні елементи шапки:

(Натисніть на Картік для перегляду оригіналу)

Напрямні можна Показувати / Ховати за допомогою View → Show → Guides (Вид → Показувати → напрямні) або CTRL +; 2. Приступимо до створення основних елементів шапки. Створимо фон для шапки. Йдемо Windows → Layers (Вікно → Шари або F7). Двічі клацаємо по шару Background, тим самим перетворимо його в простий шар (назва шару я вказав - fon-shapki)

Двічі клацаємо по шару Background, тим самим перетворимо його в простий шар (назва шару я вказав - fon-shapki)

Далі ще раз двічі клацаємо по шару fon-shapki і відкривається віконце зі стилями шару, там вибираємо потрібний стиль для шару, я вибрав градієнтну заливку - Gradient Overlay (Заливка градієнтом) і поставив наступні настройки. Клацаємо двічі по смужці з градентом: Далі ще раз двічі клацаємо по шару 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).

беремо інструмент   Paint Bucket Tool (Відро, G) і натискаємо по виділенню (я вибрав колір 165394)

Переходимо в стилі нового шару і ставимо галочки навпроти наступних пунктів: Drop Shadow (Відкидати тінь), Gradient Overlay (Градиентная заливка), Stroke (Обведення), з наступними настройками: Переходимо в стилі нового шару і ставимо галочки навпроти наступних пунктів: Drop Shadow (Відкидати тінь), Gradient Overlay (Градиентная заливка), Stroke (Обведення), з наступними настройками:   Після цього вкажемо Opacity (Непрозорість) шару в 80% Після цього вкажемо Opacity (Непрозорість) шару в 80%.

(Натисніть на Картік для перегляду оригіналу)

Після того як у нас готовий фон, можна приступати до створення інших елементів шапки. 4. Напишемо назву сайту, слоган і текст для горизонтального меню. Для цього вибираємо інструмент Після того як у нас готовий фон, можна приступати до створення інших елементів шапки Horizontal Type Tool (Горизонтальний текст) і клацаємо на шапці в тому місці, в якому плануємо написати напис, і пишемо її. Маленька підказка. Cлоі дуже зручно рухати або перетягувати з документа в документ за допомогою інструменту Move Tool. Я вибрав для назви сайту напис "Myvideo.com" і настройки тексту вибрав наступні:

com і настройки тексту вибрав наступні:

Для слогану вибрав напис "тільки краще відео і фільми" і наступні настройки тексту: Для слогану вибрав напис тільки краще відео і фільми і наступні настройки тексту:   Для пунктів меню я вибрав написи Головна, Про сайт, Контакти, Пошук, Реклама на сайті, Блог я вибрав наступні настройки тексту:   І ось що у мене вийшло Для пунктів меню я вибрав написи "Головна", "Про сайт", "Контакти", "Пошук", "Реклама на сайті", "Блог" я вибрав наступні настройки тексту: І ось що у мене вийшло.

(Натисніть на Картік для перегляду оригіналу)

Для шару з назвою сайту, застосував такі настройки для стилів шару (Drop Shadow і Bevel and Emboss).

Для шару з назвою сайту, застосував такі настройки для стилів шару (Drop Shadow і Bevel and Emboss)

Що б змінити колір тексту, вибираємо інструмент Що б змінити колір тексту, вибираємо інструмент   , Клацаємо прямо по тексту з назвою сайту і виділяємо текст для якого потрібно змінити колір (я вибрав колір - add7fe) , Клацаємо прямо по тексту з назвою сайту і виділяємо текст для якого потрібно змінити колір (я вибрав колір - 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 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), натискаємо на кнопочку Після цього в палітрі Layers (Шар, F7), натискаємо на кнопочку . Далі прибираємо замочок (клікаєм по ньому мишкою) між картинкою і її маскою. Після цього вибираємо саму картинку. Виконані дії дозволять нам рухати картинку всередині маски, так само всередині картинку можна трансформувати. Рухати картинку можна клавішами - Вправо, вліво, Вгору і Вниз на клавіатурі або за допомогою інструменту Move Tool. Рухаючи і трансформуючи картинку доб'ємося потрібного нам результату:

(Натисніть на Картік для перегляду оригіналу)

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

Для цього йдемо в палітру з шарами (тиснемо F7), виділяємо наш шар з картинкою і вибираємо піктограму з маскою шару

Далі встановлюємо в фотошопі колір переднього / заднього плану за замовчуванням (чорний / білий), для цього тиснемо D на клавіатурі, так само можна змінювати кольори місцями за допомогою клавіші X (є так само відповідні кнопочки внизу панелі з інструментами). Далі встановлюємо в фотошопі колір переднього / заднього плану за замовчуванням (чорний / білий), для цього тиснемо D на клавіатурі, так само можна змінювати кольори місцями за допомогою клавіші X (є так само відповідні кнопочки внизу панелі з інструментами) Після цього вибираємо інструмент Brush Tool (Кисть, B). Тепер малюючи пензлем коли обраний Чорний колір - як колір переднього плану, на картинки у нас буде маска стиратися, а коли у кисті стоятиме Білий колір - як колір переднього фону, картинка у нас буде з'являтися. Простіше кажучи, при активному Чорному кольорі, пензлик працює як Гумка (тобто стирає зображення), а при активному Білому кольорі пензлик працює як Восстановитель (відновлює все те, що приховано). Акуратно обробивши картинку пензлем, у нас вийшов ефект виходу з картинки (шапка виходить за межі картинки). Додамо внутрішню тінь для картинки. Додамо стиль для шару Inner Shadow (Внутрішня Тінь). ось що вийшло: Залишилося повторити всі ці дії для другої і третьої картинки. В кінцевому підсумку у мене вийшла готова шапка для сайту або блогу. (Натисніть на Картік для перегляду оригіналу)
Шапка вийшла простенька, але зі смаком.

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: