Как да си направим банер

В този раздел ще се поместват уроците, свързани с програмирането и дизайна.
User avatar
TheOnLy
V.I.P.
V.I.P.
Posts: 514
Joined: 30 Mar 2009, 14:35
Steam Community ID: 34490057
Location: Карлово

Как да си направим банер

Post by TheOnLy »

Здравейте! Днес ще ви покажа как да си направите един лесно направим банер за сайт. Искам да добавя, че за да се справите успешно с урока, трябва да имате поне малко разбираемост кое къде се намира и как се ползва. Съветвам ви ако сте нови с програмата Adobe Photoshop, изгледайте първо тези уроци: http://videotutorials-bg.com/lessons.ph ... wsub&id=22

Image

Stock-a, който използвах е - http://store.picbg.net/pubpic/28/DC/185 ... 5c28dc.png

1. Правите нов документ с размери 468x60 (стандартните размери за един банер).

Image

2. Натискате Ctrl + T, задържате Shift и смалявате картинката до определено ниво. След този процес, нашата картинка би трябвало да изглежда така:

Image

3. Сега трябва да сложим малко светлина на нашия банер. За да направим това, отиваме на инструмента Rectangular Marquee Tool, нагласяме Style на Fixed size и пишем на Width: 468 px, а на Height: 30 px.

Image

4. Правим нов слой и цъкаме някъде по банера, за да се направи селекция и след това със стрелката нагоре нагласяме селекцията да е най-отгоре на банера. След това взимаме Paint Bucket Tool, правим цвета на бял и запълваме селекцията. Ctrl + D се маха селекцията. Променяме Opacity на 10%, отиваме на Blending Options -> Gradient Overlay -> цъкаме на Reverse и променяме Opacity на 50%. След това нашия банер трябва да изглежда така:

Image

5. Добавяне на текст. Тука няма да обеснявам много. Сагате си какъвто искате текст. Само да добавя, че текста трябва да е под слоя със светлинната лента. Аз направих това:

Image

6. Слагане на border/stroke. За да направите това, цъкате на Edit -> Stroke (1 px). След това правим Opacity на слоя 25%.

Image

7. След всичко това, банера трябва да изглежда така:

Image

8. Тази стъпка е последната. Тук трябва да добавим няколко Gradients, за да може цвета на банера да стане по-готин.
1. Цъкаме този бутон Image, който се намира най-доло в дясно и цъкаме на Black & White. След това цъкаме на Auto.
2. Пак влизате в този прозорец и намирате Gradient Map. Правите го вместо да е бяло и черно да е така и променяте Blending Mode на Soft Light, 25%.

Image

3. Слагаме още един Gradient Map, но този път с този цвят. Пак променяме Blending Mode на Soft Light, 25%.

Image


И така, това беше от мен. Урока е направен специално за CS-bg.info! Моля, не го копирайте без мое разрешение.
User avatar
Andreew
V.I.P.
V.I.P.
Posts: 804
Joined: 24 Oct 2011, 14:25
Steam Community ID: shitmove

Re: Как да си направим банер

Post by Andreew »

Може ли да ми дадеш Gradient Map, които си използвал (и 2-те) ?
User avatar
TheOnLy
V.I.P.
V.I.P.
Posts: 514
Joined: 30 Mar 2009, 14:35
Steam Community ID: 34490057
Location: Карлово

Re: Как да си направим банер

Post by TheOnLy »

Andreew wrote:Може ли да ми дадеш Gradient Map, които си използвал (и 2-те) ?
По default фотошоп си ги има. :dcygpd:

Image
User avatar
Andreew
V.I.P.
V.I.P.
Posts: 804
Joined: 24 Oct 2011, 14:25
Steam Community ID: shitmove

Re: Как да си направим банер

Post by Andreew »

User avatar
TheOnLy
V.I.P.
V.I.P.
Posts: 514
Joined: 30 Mar 2009, 14:35
Steam Community ID: 34490057
Location: Карлово

Re: Как да си направим банер

Post by TheOnLy »

Image



Image
User avatar
Andreew
V.I.P.
V.I.P.
Posts: 804
Joined: 24 Oct 2011, 14:25
Steam Community ID: shitmove

Re: Как да си направим банер

Post by Andreew »

Мерси.Много хубав урок и добре обяснен. Дано да има и други уроци от теб. 10/10 !
User avatar
martokos
V.I.P
V.I.P
Posts: 214
Joined: 21 Feb 2010, 14:08
Skype: echo123
CS Nick: martokosftw-
Favorite version: CS: Global Offensive
Steam Community ID: martokos
Location: Във форума.
Contact:

Re: Как да си направим банер

Post by martokos »

Страхотен урок и много лесен :) 10/10
User avatar
kcrunky_
Extripe-Cs Собственик
Extripe-Cs Собственик
Posts: 166
Joined: 24 Oct 2011, 12:10
Skype: Ползвай по предназначение
Contact:

Re: Как да си направим банер

Post by kcrunky_ »

На същото мнение съм 10/10 ;)
User avatar
xTwilight
Потребител
Потребител
Posts: 426
Joined: 13 May 2011, 16:51
Favorite version: CS: 1.6

Re: Как да си направим банер

Post by xTwilight »

Страхотен урок наистина браво :)
User avatar
SouthWind
V.I.P
V.I.P
Posts: 324
Joined: 11 Jul 2009, 20:42
Location: Пловдив

Re: Как да си направим банер

Post by SouthWind »

Откога чакам ти да напишеш урок. ::inlove:: Много ми харесва крайният резултат, също е и добре обяснено. Браво. :)
User avatar
TheOnLy
V.I.P.
V.I.P.
Posts: 514
Joined: 30 Mar 2009, 14:35
Steam Community ID: 34490057
Location: Карлово

Re: Как да си направим банер

Post by TheOnLy »

Радвам се, че ви харесва урока. Имам интерес да пиша още, но кажете какви искате. :)
User avatar
peace without drama
Потребител
Потребител
Posts: 149
Joined: 03 Dec 2011, 18:38
Location: Куба

Re: Как да си направим банер

Post by peace without drama »

Крайния резултат е хубав. Браво, добър урок. Радвам се, че имаш интерес.
User avatar
z0ommenFML
Потребител
Потребител
Posts: 42
Joined: 17 Sep 2011, 10:20
Skype: world_star_hip_hop
CS Nick: BlunTBlow!n
Favorite version: CS: 1.6
Steam Community ID: z0ommenFML
Location: Бургас
Contact:

Re: Как да си направим банер

Post by z0ommenFML »

TheOnLy wrote:Радвам се, че ви харесва урока. Имам интерес да пиша още, но кажете какви искате. :)
Аз лично бих желал 1 урок за форумни рангове :)
User avatar
Andreew
V.I.P.
V.I.P.
Posts: 804
Joined: 24 Oct 2011, 14:25
Steam Community ID: shitmove

Re: Как да си направим банер

Post by Andreew »

от TheOnLy » 28 Яну 2012 20:01

Радвам се, че ви харесва урока. Имам интерес да пиша още, но кажете какви искате.
Защо не направиш един урок за аватар с ефекти или за рангове.. (както предложиха по-горе) .. :)
User avatar
thedonmakaveli
Потребител
Потребител
Posts: 290
Joined: 29 Apr 2011, 09:02
Steam Community ID: intercoolerbg
Location: Варна

Re: Как да си направим банер

Post by thedonmakaveli »

Защо не направиш един урок за аватар с ефекти или за рангове.. (както предложиха по-горе) .. :)
Аватар: http://cs-bg.info/forum/viewtopic.php?f=107&t=57183
Ранг: http://cs-bg.info/forum/viewtopic.php?f=107&t=50522
Post Reply

Return to “Учебни теми”