Помогни ни да направим Uroci.net по - богат! Добави урок

Професионална шапка за сайт

Adobe Photoshop » Уеб сайтове и банери
iordan_93   трудност:    видян: 18278


Стъпка 1.
a.Направете нов файл с размери 800 на 600.

b.Оцветете фона с #САСАСА

c.С "Rectangular Marguee Tool" направете правоъгълник в горната част на работната площ, както е показано по-долу, оцветете го на нов слой с #5b5b5b;

1.jpg

 

Стъпка 2. Изберете слоя с правоъгълника, и от менюто Layer > Layer Style. Нагласете стиловете како се водите по долните картинки.

2.jpg

3.jpg

 

Стъпка 3. След прилагането на стиловете правоъгълника ще има сянка. Искаме сянката от двете страни да я няма, така че направете нов слой под този с правоъгълника. Изберете слоя с правоъгълника и натиснете Ctrl+E, за да го слеете с долният (нов празен) слой. След това вземете Rectangular Margue Тool и изтрийте сенките от лявата и дясната страна на правоъгълника


4.jpg

 

Стъпка 4. Сега, използвайки Rounded Rectangle Tool (от семейството на Custom Shape tool), с радиус 10 пиксела, направете бял правоъгълник под черния:

5.jpg

 

Стъпка 5. Копирайте го и подредете всичко по този начин:
6.jpg



Приложете показаните долу стилове на някой от белите елементи и след това ги копирайте или повторте при останалите копия.

Layer > Layer Style > Outer Glow


7.jpg



... Gradient Overlay
8.jpg



...Stroke
9.jpg

 

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


10.jpg

 

Стъпка 8. Сложете указателен текст в бутоните си. Аз съм използвал шрифт "Futura" за моят текст.


11.jpg

 

Стъпка 9. Използвайки шрифт "Futura" отново, аз съм сложил и лого. Направил съм и отражение на текста.

*За да направите отражението, копирайте текста отново, и изберете командата Edit/Transform/Flip Vertical. Преместете текста малко по-долу. После използвайте Layer Style със следните настройки:

12.jpg

 

Стъпка 10. Трябва да сте получили нещо такова:

13.jpg



Източник: shadowness.com
Превел: Йордан Даракчиев

 



Сподели |

Коментари (12)

advokata на 06.10 2006 в 18:50ч.
Хубав урок.
backoty на 17.10 2006 в 19:30ч.
с този урок и малко импровизация от моя страна ето какжо се получи. http://vodi.data.bg
AragoN на 21.10 2006 в 14:32ч.
@backoty получило се е ужасно гадно. Намали размера ан бутоните както и на самия черен фон изглежда ужасно иначе като изпълнение става
iordan_93 на 25.10 2006 в 21:03ч.
1. Трябва да натисна ТОЧНО бутона ENTER за да вляза в сайта ти
2. Бутоните са прекалено големи
3. Слагал си лого, добре, но логото трябва да е стилизирано. А твоето не е.

Ами като цяло не ми харесва, но това, че си импровизирал е хубаво.
danail на 19.11 2006 в 16:22ч.
нищо не стана
ivas на 16.01 2007 в 00:58ч.
Получи се прилично, но пък урока е чудесен!
Моите почитания на Йордан!
deam0n на 21.02 2007 в 10:05ч.
@backoty - Импровизацията с WPM ли е :) Че тия бутони дет ги гледам ...
deam0n на 21.02 2007 в 10:07ч.
Неще не върви хедъра да е с Photoshop, а останалата част да е с Web Page Maker 2.
sevic на 09.03 2007 в 14:39ч.
Някой може ли да ми обясни, как да вкарам белия правоъгълник под черния?
witch_honor на 22.05 2008 в 19:13ч.
Аз обаче го доразвих малко - като го слагах в html направих бутоните да са Rollover и когато мишката мине през тях те слизат надолу (просто местим слоевете им надолу заедно с текста).
nikssa23 на 08.07 2011 в 21:12ч.
супер е с джава скрипт после може много готини неща да се спретнат ;)
anony123 на 26.08 2012 в 09:13ч.
Ето го моят опит ..мисля ,че се получи що годе добре :)
http://prikachi.com/images.php?images/468/5185468g.png

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини