Заголовок сайта в фотошопе

• May 17, 2024

В этом уроке мы создадим заголовок веб-сайта в Photoshop.^р который мы будем анимировать во Flash^р катализатор^TM, Анимация начинается с пустого фона, и элементы дизайна вставляются, чтобы «построить» заголовок на наших глазах. Анимация будет запрограммирована на запуск «под нагрузкой» и будет длиться всего несколько секунд. Этот заголовок веб-сайта будет предназначен для визитной карточки.

Наш первый шаг - создать заголовок в Photoshop. Каждый элемент дизайна будет помещен в отдельный слой для подготовки к работе с ними в Flash Catalyst. Как видите, у нас будет 6 элементов дизайна.

1. Фон
2. Нижняя полоса по ширине заголовка
3. Название компании
4. День Рождения
5. Тыквенная записка
6. Рождественская открытка

1. Давайте начнем новый проект в Photoshop. Установите ширину 1000 пикселей, высоту 225 пикселей и фон прозрачным. Этот размер будет хорошо вписываться в верхней части нашей веб-страницы.
   
   
2. Единственный элемент, который будет виден в начале анимации, это белый фон. Заполните первый слой изображения выбранным цветом фона. На панели «Слои» переименуйте этот слой в «Фон».
   
   
3. Чтобы создать заштрихованный край, я использовал Inner Shadow Layer Style. Дважды щелкните на фоновом слое и установите флажок рядом с Inner Shadow. Установите Расстояние и Дроссель на 0 и Размер на 49.
   
   
4. Далее мы добавим тонкую рамку вокруг изображения с помощью стиля слоя обводки. Я установил цвет на коричневый (# 6e674f), размер на 2 и положение внутрь.
   
   Далее мы добавим карты. Я уменьшил размер своих поздравительных открыток до 230 х 175 пикселей. Это будет держать их пропорционально размеру заголовка.
   
   
5. Давайте скопируем / вставим карту Pumpkin в наш заголовок. Назовите новый слой "Тыква". Нажмите Edit - Free Transform, чтобы повернуть карту немного вправо. Нажмите на слой Pumpkin и примените стиль слоя Drop Shadow, сохраняя настройки по умолчанию.
   
   
6. Повторите последний шаг как для дня рождения, так и для рождественской открытки.
   
   Далее мы добавим панель внизу заголовка. Мы заправим наши карты за эту планку, чтобы подражать картам на полке.
   
   
7. Добавьте новый слой на панель Layers и назовите его «Bar».
   
   
8. С помощью инструмента «Прямоугольная область» выберите нижнюю область заголовка прямо внутри коричневой границы. Выберите цвет для своей панели и заполните выделение этим цветом.
   
   
9. Дважды щелкните на слое и добавьте стиль слоя обводки, как вы это сделали в фоновом слое.
   
   
10. Нажмите на инструмент «Горизонтальный тип» и выберите шрифт для названия вашей компании. Я использовал тот же коричневый цвет, что и цвет границы. Введите название компании в левой части заголовка.
    
    
11. Этот шаг не является обязательным. Мы растеризуем текст. Щелкните правой кнопкой мыши на текстовом слое и выберите Rasterize Type из меню.
    
    
12. Сохраните ваш проект в формате Photoshop .psd.
    
    

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.

Видео инструкция: Web Banner AD Design Tutorial - Photoshop CC (May 2024).