Заголовок веб-сайту у Photoshop

• Може 16, 2024

У цьому підручнику ми побудуємо заголовок веб-сайту у Photoshop^R яку ми будемо оживляти у Flash^R Каталізатор^TM. Анімація починається з порожнього фону, а елементи дизайну засуваються, щоб "побудувати" заголовок перед нашими очима. Анімація буде запрограмована, щоб розпочатись "на завантаження" і триватиме лише кілька секунд. Цей заголовок веб-сайту буде присвячений справжній вітальній листівці.

Наш перший крок - скласти заголовок у Photoshop. Ми покладемо кожен елемент дизайну на свій шар під час підготовки до роботи з ними у Flash Catalyst. Як бачите, у нас буде 6 елементів дизайну.

1. Передумови
2. Нижня смужка по ширині заголовка
3. Назва компанії
4. Листівка до дня народження
5. Гарбузовий блокнот
6. Різдвяна листівка

1. Почнемо новий проект у Photoshop. Встановіть Ширину на 1000 пікселів, Висоту на 225 пікселів та Фон на прозорий. Цей розмір чудово вміститься вгорі нашої веб-сторінки.
   
   
2. Єдиний елемент, який буде видно на початку анімації, - білий фон. Заповніть перший шар зображення кольором тла на ваш вибір. На панелі "Шари" перейменуйте цей шар "Фон".
   
   
3. Для створення затіненого краю я використав стиль «Внутрішній шар тіні». Двічі клацніть на шарі «Фон» і поставте прапорець біля пункту Внутрішня тінь. Встановіть відстань і дросель на 0, а розмір - на 49.
   
   
4. Далі ми додамо тонку межу навколо зображення за допомогою стилю шару штриху. Я встановив колір для коричневого (# 6e674f), розмір - 2 та "Положення всередину".
   
   Далі ми додамо картки. Я зменшив розмір вітальних листівок до 230 х 175 пікселів. Це дозволить зберегти їх пропорційно розміру заголовка.
   
   
5. Копіюємо / вставляємо гарбузову карту в наш заголовок. Назвіть новий шар «Гарбуз». Клацніть Редагувати - Безкоштовна трансформація, щоб повернути карту трохи праворуч. Клацніть на шар гарбуза і застосуйте стиль шару тіні шару, зберігаючи налаштування за замовчуванням.
   
   
6. Повторіть останній крок як для листівки до дня народження, так і для Різдва.
   
   Далі ми додамо смужку в нижній частині заголовка. Ми підкладемо наші картки за цей бар, щоб імітувати картки на полиці.
   
   
7. Додайте новий шар на панель «Шари» та назвіть його «Бар».
   
   
8. За допомогою інструмента «Прямокутний намет» виберіть нижню область заголовка, просто всередині коричневої рамки. Виберіть колір для своєї смуги та заповніть вибір цим кольором.
   
   
9. Двічі клацніть на шарі та додайте стиль шару обведення, як ви робили до шару «Фоновий».
   
   
10. Клацніть інструмент "Горизонтальний тип" і виберіть шрифт для назви вашої компанії. Я використовував той же коричневий колір, що і колір облямівки. Введіть назву компанії в лівій частині заголовка.
    
    
11. Цей крок не є обов'язковим. Ми будемо растрирувати текст. Клацніть правою кнопкою миші на текстовому шарі та виберіть у меню Rasterize Type.
    
    
12. Збережіть проект у форматі Photoshop .psd.
    
    

Авторські права 2018 Adobe Systems Incorporated. Всі права захищені. Знімки екрана продуктів Adobe передруковані з дозволу Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst та Flash Paper є або є [a] зареєстрованою торговою маркою (ими), або торговою маркою (іми) Adobe Systems Incorporated у США та / або інших країнах.

Відео Інструкція: Обучение веб дизайну Азы создание сайта Урок 1 (Може 2024).