Преглед на урок

Шаблон за музикален уебсайт
21 Юли 2009, 18:36 | 12849 преглеждания | 14 коментарa
Оценка:
(5 гласували)
70 добавяния към любими
1/ Създайте нов документ 760 х 770 рх с цвят #1e1e1e.
Вземете инструмен Line Tool (U); цвят #999999 ; 5рх и начертайте 2 линии:

2/ Намалете размера на 1рх и добавете бяла линия в горната част на сивата:

3/ Сменете размера на 50 рх и начертайте червена линия над бялата:

4/ С двоен клик отворете панела за стил и добавете следния ефект:


Резултат:

5/ Вземете инструмента Rectangle Tool (U) и начертайте голям червен правоъгълник под сивата линия:

6/ Добаете следните ефекти:



Резултат:

7/ Създайте нов документ за Pattern: 3х3 рх, прозрачен, увеличете мащаба до 1600% ;
с Pencil Tool - 1рх, начертайте 3 черни точки по диагонал;
запазете го от Edit > Define Pattern
8/ Върнете се в изходния документ и начертайте правоъгълна селекция:

9/ Създайте нов слой ( CTRL+SHIFT+ALT+N). Вземете Paint Bucket с настройки:

Кликнете вътре в селекцията за да я запълните и добавете този ефект:

Отменете селекцията (Ctrl+D) и трябва да имате този резултат:

10/ Добавете маска от бутончето Add layer mask. Вземете Gradient Tool (G); Linear.
Naтиснете "D" за основните цветове и прокарайте линията както ще видите на следващата картинка:

11/ Добавете подходяща картинка и текст по ваш избор:

12/ Начертайте бяла линия 1рх:

Добавете маска ( Add layer mask). Вземете Gradient Tool c настройки:

Начертайте линията по следния начин:

13/ Дублирайте линията (Ctrl+J). С Move Tool (V) кликнете по нея и натиснете еднократно стрелката от клавиетурата "надолу". Селектирайте копието и сменете цвета с #760000

14/ Вземете Rounded Rectangle (U) с радиус 2 рх; начертайте няколко правоъгълни фигури по следния модел:

15/ Добавете към тях следните ефекти:



Резултат:

16/ С Rectangular Marquee (М) начертайте селекция:

17/ Повторете действията от стъпки 8, 9 и 10
Резултата:

18/ Добавете текст, а по желание и някакви подходящи картинки:

19/ Добавете разделителни линии където смятате за необходимо;
използвайте инструмента Type Tool (Т) и и знаците "точка" или "тире":

20/ Върнете се в горната част.
С Rounded Rectangle (U) начертайте бял правоъгълник:

Добавете следните ефекти:



Резултат:

Тук можете да създадете плеяр , с фигури и текст по ваш избор, за тях можете да използвате следните ефекти:



Резултат:

Ето го и финалния резултат:

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.
Урокът е добавен от: maqpen4eva
Източник: http://demiart.ru/
Коментари
BraveHand
Хм, много добре :)
понеже съм дизайнер бих казал, че е доста стилен, стига градиентите да ги бяха изпипали и да бяха добавили прозрачни елементи чрез Opacity на слоевете :)
Иначе е добре!
joko_turbo
ае извинете за глупавия вапрос , ама искам да питам как да си пренеса дизаина на саита в htmlто?
boby_29
Зависи кво използваш пишеш ли или използваш някоя програма!
ErAgOn
Дайте пример и за двата начина ако си го пишеш и ако ползваш програма
DarkFateSilver
дам и аз искам да разбера после как да го направя това активно и как да го пренеса през dreamaweaver примерно
killersoft
да и аз незнам как става моля кажете
Lachezar_17
Трябва да изрежете дизайна и по-части да го поставите в html-а или php-то и вече си добавяте линкове и др. работи ;)
NGIE
Е ако има някъде уроци как да го направим активно няма да е лошо да кажете
Lachezar_17
Супер урок! :)
thinklinux
Учете HTML CSS и PHP и ще го направите активен ... за това няма урок в рамките на две страници. Става с четене и пробване.
lolibi
;(;(;( само да можех да го направя реален ;( иначе е перфектен тоя сайт ;(
scooter100
maqpenc4eva.......... това е готино, но нека оставиме на страна съветите на thinklinux да живеем праведно и да се храним природосъобразно, както и клишетата че ще сполучиме с учене... може ли да поговорим по усилено за ActionScript ............ моля
joistik
значи много е як дизайна аз също правя сайтове ама нямам мой довършен щото нямам достатъчно въображение +6 за урока от мен :)
c1ko
Супер лудница стана http://c1ko.roomforum.com/users/a4/37/13/48/smiles/962641.gif
Добави коментар