Как да създадете професионален хедър за уебсайт в Photoshop

Photoshop CC 2014 е идеален инструмент за създаване на професионални графики за вашия уебсайт, включително банери. При проектиране на първия банер запазете дизайна прост, за да не претоварвате изображението с излишна визуална информация. Ако вашата фирма разполага с корпоративни цветове и шрифт, спокойно ги използвайте в банера.

Стъпка 1

Стартирайте Photoshop. Натиснете Ctrl+N или изберете New от менюто File. В диалоговия прозорец задайте ширина 900 пиксела и височина 150 пиксела и натиснете OK.

Стъпка 2

Ако желаете, задайте плътен фон, като кликнете върху иконата за преден цвят в лентата с инструменти, изберете цвят и след това използвате Rectangle Tool, за да запълните цялото платно. В това ръководство ще използваме два градиента вместо плътен фон.

Стъпка 3

Изберете инструмента Gradient. В лентата с опции кликнете върху Fill и изберете готовия градиент „Black & White“. Поставете курсора над банера, задръжте и влачете надолу, след което пуснете бутона, за да приложите градиента.

Стъпка 4

Изберете Horizontal Type Tool. Плъзнете курсора върху банера, за да създадете текстово поле. В лентата с опции изберете шрифт, размер и цвят. Позиционирайте текста така, че да е центриран в лявата част на банера.

Стъпка 5

От менюто File изберете Open и заредете изображение, което искате да включите в банера – например фирмено лого, ваш портрет или продукт. Когато изображението се отвори, от менюто Layer изберете Duplicate Layer, задайте като целевия файл вашия банер (по подразбиране „Untitled‑1“) и натиснете OK. Снимката ще се появи като нов слой върху банера.

Стъпка 6

От менюто Edit изберете Transform → Scale. Дръжте ъгъла на изображението, задръжте клавиша Shift, за да запазите пропорциите, и мащабирайте до желаната ширина. Натиснете Enter и плъзнете изображението в дясната част на банера.

Стъпка 7

Кликнете върху иконата за преден цвят, отворете Color Picker и кликнете върху произволно място в дясната част на банера, за да вземете цвят от изображението. Потвърдете с OK.

Стъпка 8

Изберете Rectangle Tool. В лентата с опции Fill изберете Gradient. Плъзнете курсора от лявата страна на изображението до левия ръб на банера, за да създадете правоъгълник с градиент, базиран на избрания цвят.

Стъпка 9

В панела Layers намерете слоя Rectangle 1 (градиентният правоъгълник) и го преместете под слоя с текста – това ще бъде третият слой отгоре. Намалете непрозрачността до около 50 % чрез плъзгача Opacity. Полупрозрачният градиент се слива с фона и създава по‑богат вид.

Стъпка 10

Изберете слоя с текста. От менюто Layer изберете Layer Style → Bevel & Emboss. В прозореца задайте Style на „Emboss“ и намалете плъзгача Depth до около 225 % за лек ефект.

Стъпка 11

В същия прозорец за стилове изберете Satin. Задайте Blend Mode на „Multiply“ и намалете Opacity до около 15 %. Потвърдете с OK.

Финален етап – Записване

За уеб‑оптимизиране изберете Save for Web от менюто File. Формат – JPEG, качество – между 75 % и 80 %. Този компромис осигурява малък размер на файла и бързо зареждане без значителна загуба на качество. Кликнете Save, изберете място за запазване и след затваряне на Photoshop добавете готовия банер към вашата уеб страница.