×
image for ux jobs category in dev.bg

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

Шаблон за музикален уебсайт

Шаблон за музикален уебсайт




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 за урока от мен :)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.