Заглавна страница на уебсайта във Photoshop

• Може 18, 2024

В този урок ще изградим заглавка на уебсайт в Photoshop^R които ще анимираме във Flash^R катализатор^TM, Анимацията започва с празен фон, а дизайнерските елементи се плъзгат, за да „изграждат“ заглавката пред очите ни. Анимацията ще бъде програмирана да започне "при натоварване" и ще продължи само няколко секунди. Тази заглавна страница на уебсайта ще бъде за бизнес с опасни картички.

Първата ни стъпка е да изградим заглавката във Photoshop. Ще поставим всеки дизайнерски елемент на свой собствен слой, за да се подготвим за работа с тях във Flash Catalyst. Както можете да видите, ще имаме 6 дизайнерски елемента.

1. Предистория
2. Долна лента по ширина на заглавката
3. Име на компанията
4. Карта за рожден ден
5. Тиквена бележка
6. Коледна картичка

1. Нека започнем нов проект във Photoshop. Задайте Ширина на 1000 пиксела, Височина до 225 пиксела и Фонът на прозрачен. Този размер ще се побере добре в горната част на нашата уеб страница.
   
   
2. Единственият елемент, който ще се вижда в началото на анимацията, е белият фон. Запълнете първия слой на изображението с цвета на фона по ваш избор. В панела "Слоеве" преименувайте този слой "Фон".
   
   
3. За да създам засенчения ръб, използвах стила на вътрешния сянка слой. Кликнете два пъти върху фоновия слой и поставете отметка в квадратчето до Inner Shadow. Задайте разстоянието и дросела на 0 и размера на 49.
   
   
4. По-нататък ще добавим тънката рамка около изображението със стила Stroke Layer. Поставих Цвета на кафяв (# 6e674f), Размерът до 2 и Позицията до вътре.
   
   След това ще добавим картите. Намалих размера на моите поздравителни картички до 230 х 175 пиксела. Това ще ги поддържа пропорционално на размера на заглавката.
   
   
5. Нека копираме / поставим тиквената карта в заглавката ни. Наименувайте новия слой "Тиква". Кликнете върху Редактиране - Безплатна трансформация, за да завъртите картата леко вдясно. Кликнете върху слоя Тиква и приложете стила на слоя Drop Shadow Layer, като запазите настройките по подразбиране.
   
   
6. Повторете последната стъпка както за картичката за рожден ден, така и за Коледа.
   
   След това ще добавим лентата в долната част на заглавката. Ще тупнем картите си зад този бар, за да подражаваме на карти на рафт.
   
   
7. Добавете нов слой към панела "Слоеве" и го наречете "Bar".
   
   
8. С инструмента Rectangular Marquee изберете долната област на заглавката, точно вътре в кафявата рамка. Изберете цвят за вашия бар и попълнете селекцията с този цвят.
   
   
9. Кликнете два пъти върху слоя и добавете Stroke Layer Style, както сте го направили към фоновия слой.
   
   
10. Кликнете върху инструмента за хоризонтален тип и изберете шрифт за името на вашия бизнес. Използвал съм същия кафяв цвят като цвета на рамката. Въведете името на фирмата отляво на заглавката.
    
    
11. Тази стъпка не е задължителна. Ще растрираме текста. Щракнете с десния бутон върху текстовия слой и изберете Rasterize Type от менюто.
    
    
12. Запазете проекта си във формат Photoshop .psd.
    
    

Copyright 2018 Adobe Systems Incorporated. Всички права запазени. Екран (и) на екрана с продукти на Adobe препечатани с разрешение от Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, 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 в Съединените щати и / или други страни.

Инструкции Видео: БЪРЗ и ЛЕСЕН ретуш във Photoshop (под 3 минути!) (Може 2024).