Photoshop (Web-design) Урок 11,12 (дз)

Шаг 1. Создадим новый документ размером 300х300 пикселей (pixels) с прозрачным (transparent) фоном (background content) и напишем любую букву, которая нам нравится.

Шаг 2. Теперь делаем три копии этого слоя (три раза нажмите сочетание клавиш Ctrl+J).

Мы находимся на нижнем слое и переходим в меню Редактирование – Трансформация (Edit – Transform) или нажимаем сочетание клавиш Ctrl+T, а затем немного «сплющиваем» нашу букву.

Шаг 3. На следующем этапе выделите средний слой из трех слоев, которые мы создали и подвиньте его немного повыше (прим. сделать это можно при помощи инструментаПеремещение  (Move), при желании можете применить Ctrl+T).

Шаг 4. Для этого слоя, который мы передвинули повыше, создайте еще два дубликата (две копии).

Средний слой среди тех, что мы только что сделали, подвиньте чуть повыше и «растяните» с помощью команды Ctrl+T.

Теперь у нас должно получиться все так, как показано на рисунке. Оставим видимым только первый слой, который мы создали.

Теперь необходимо перейти в Image Ready (для версий до CS3)

или в меню Окно-Анимация (Window-Animation) (в версиях от CS3 и выше).

В окне анимации в верхнем правом углу справа есть стрелка с выпадающим меню, в этом меню необходимо выбрать функцию Создать кадры из слоев (Make Frames from layers). Затем выделим все рамки и выставим интервал на 0,1 секунду, а затем сохраните оптимизированный файл (File-Save optimized(Ctrl+Alt+S)) (для Image Ready) или Сохранить для веб - устройств (File-Saveforweb) (Shift+Alt+Ctrl+S) (для версий CS3 и выше).

Сохраним анимацию в формате GIF.

Блуждающее свечение на букве

Конечный результат:

Шаг 1

Создайте новый документ в Photoshop. Залейте фон любым цветом и примените к нему стиль Наложение градиента (Layer Style – Gradient Overlay): Режим – Нормальный, Стиль – Радиальный, Градиент: #38556f и чёрный.

Шаг 2

Создайте новый слой (Create New Layer) и залейте его понравившимся вам узором через стиль Наложение узора (Layer Style – Pattern Overlay). Режим – Мягкий свет

Шаг 3

Создайте букву при помощи инструмента Горизонтальный текст (Horizontal Type Tool). В примере используется шрифт «Major Snafu».

Шаг 4

Кликните дважды на текстовом слое, чтобы открыть окно стилей. Примените следующие стили:

Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Осветление основы

Внутренняя тень: Режим – Осветление основы

Внутреннее свечение: Режим – Осветление основы, Метод – Мягкий

Наложение цвета: Режим – Осветление основы

Внешнее свечение: Режим – Осветление основы, Метод – Мягкий

Отбрасывание тени: Режим – Умножение

Шаг 5

Сделайте копию текстового слоя. Удалите все стили и примените следующие:

Внутренняя тень: Режим – Осветление основы

Внутреннее свечение: Режим – Осветление основы, Метод – Мягкий

Шаг 6

На скриншоте ниже показан результат после применения стилей. 

Шаг 7

Создайте два новых слоя поверх остальных (Create New Layer). Назовите эти слои «left» и «right» Поместите их в группу (Ctrl + G) и установите Режим наложения группы на Осветление основы (Blending Mode – Color Dodge). Выберите инструмент Кисть (Brush Tool) с мягкими краями и на слое «right» свечение на правой стороне буквы. Затем перейдите на слой «left» и нарисуйте свечение слева.

Шаг 8

Перейдите в меню Окно Временная шкала (Window Timeline). Откроется новая панель. Первое на что нужно обратить внимание – это слои. Выберите два слоя, находящиеся в группе (слои со свечениями), раскройте их в дереве слева и убедитесь, что установлен нулевой кадр. Кликните на опцию Позиция (Position), чтобы создать кадр.

Шаг 9

Переместите позицию на 1:00, а на холсте переместите слои туда, где они должны будут оказаться на первой минуте.

Шаг 10

Это вторая позиция для обоих свечений:

Шаг 11

Создайте ещё один кадр и расположите свечения, как показано ниже.

Шаг 12

Продолжайте создавать кадры, пока на завершите анимацию.

Временная шкала

Так должна выглядеть Ваша шкала времени.

Сохраните анимационное изображение.

Появление и исчезновение текста

Шаг 1

Создайте новый документ размером 1000х300 пикселей. Установите цвет заливки на #000000, а цвет фона на #00ae0f. Выберите инструмент Градиент (Gradient Tool) и сделайте линейную заливку, как показано ниже.

Шаг 2

Примените фильтр Мокрая бумага (Water Paper Filter):

Длина волокна (Fiber Length): 5

Яркость (Brightness): 53

Контрастность (Contrast): 73

Шаг 3

Выберите инструмент Горизонтальный текст (Horizontal Type Tool). Выберите шрифт «Arial Black» и задайте размер 170pt. Установите цвет заливки на #00b75a и напишите какое-нибудь слово.

Шаг 4

Объедините все слои (Слой Объединить слои) (Layer Merge Layers). Переименуйте полученный слой в «Original». Создайте копию этого слоя (Ctrl + J) и примените к ней фильтр Мокрая бумага (Water Paper Filter):

Длина волокна (Fiber Length): 50

Яркость (Brightness): 0

Контрастность (Contrast): 73

Назовите эту копию «1». Этот слой будет первым кадром анимации. Создайте копию слоя «original» и расположите её поверх остальных. Назовите копию «2» и примените фильтр Мокрая бумага (Water Paper Filter) (в течении всего задания мы будем использовать только этот фильтр):

Длина волокна (Fiber Length): 50

Яркость (Brightness): 20

Контрастность (Contrast): 73

Мы будем продолжать создавать копии и применять к ним всё тот же фильтр Мокрая бумага (Water Paper Filter), меняться будут только настройки фильтра. Создавайте копии и называйте их «3», «4», «5» и т.д.

Слой «3»:

Длина волокна (Fiber Length): 50

Яркость (Brightness): 30

Контрастность (Contrast): 73

Слой «4»:

Длина волокна (Fiber Length): 50

Яркость (Brightness): 40

Контрастность (Contrast): 73

Слой «5»:

Длина волокна (Fiber Length): 50

Яркость (Brightness): 50

Контрастность (Contrast): 73

Слой «6» (теперь длина волокон будет уменьшаться):

Длина волокна (Fiber Length): 40

Яркость (Brightness): 50

Контрастность (Contrast): 73

Слой «7»:

Длина волокна (Fiber Length): 30

Яркость (Brightness): 50

Контрастность (Contrast): 73

Слой «8»:

Длина волокна (Fiber Length): 20

Яркость (Brightness): 50

Контрастность (Contrast): 73

Слой «9»:

Длина волокна (Fiber Length): 10

Яркость (Brightness): 50

Контрастность (Contrast): 73

Создайте последнюю копию слоя – «10» и расположите её поверх всех слоёв.

Создайте копии слоёв «1» - «9» и расположите их, как показано ниже.

Шаг 5

Скройте все слои кроме слоя «1». Перейдите в меню Окно Анимация (Window Animation). Кликните на иконке, отмеченной следующем скриншоте, чтобы конвертировать анимацию по временной шкале в покадровую анимацию. Если вместо линии времени у Вас видны кадры, то этого делать не нужно. 

Кликните на первом кадре:

Установите задержку в 0,2 секунды для 10 кадра.

В завершении сохраните файл через меню Файл Сохранить для Web и устройств (File Safe for Web And Devices). Выберите формат GIF.

Вам необходимо создать собственный баннер по примеру. В качестве образца прилагается исходник похожего баннера в формате psd.

Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.

Шаг 2. Поместите логотип в верхней центральной части баннера

Шаг 3. Напишите слоган под логотипом.

Шаг 4. Нарисуйте прямоугольник  и установите цвет # b90909.

Откройте диалоговое окно Стили слоя (layer styles)и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 2px.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение  (Multiply) с непрозрачностью 28%.

Добавьте обводку и уменьшите её  размер до 1 пикс. Установите цвет # a31b1b.

Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно), Basix  (Азы), Videos (Видео), Premuim(Премиум) как показано на рисунке.

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.

Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

Шаг 8. Создайте овальную фигуру  и установите цвет # fdfcfc.

Откройте диалоговое окно Стили слоя (layer styles) и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 1px.

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках  все как есть.

Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity)  6%

Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Откройте панель анимации  Окно – Анимация (Window Animation). В примере используется панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation). Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.

Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента  отдельный скриншот с инструкцией.

Ключевые кадры можно будет перемещать  мышкой. Так же можно выделить несколько ключевых кадров для перемещения.

Шаг 11. Ваша Временная шкала (Timeline Animation),  должна выглядеть примерно так, как ниже.

Шаг 12.  Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл - Сохранить для веб и устройств (File - Save for Web & Devices). Установите настройки как  на скриншоте ниже и нажмите кнопку Сохранить.