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

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

21 Юли 2009, 18:36 | 11736 преглеждания | 14 коментарa

Категория: Дизайн » Photoshop

Оценка:

(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/

Хм, много добре 🙂
понеже съм дизайнер бих казал, че е доста стилен, стига градиентите да ги бяха изпипали и да бяха добавили прозрачни елементи чрез Opacity на слоевете 🙂
Иначе е добре!

ае извинете за глупавия вапрос , ама искам да питам как да си пренеса дизаина на саита в htmlто?

Зависи кво използваш пишеш ли или използваш някоя програма!

Дайте пример и за двата начина ако си го пишеш и ако ползваш програма

дам и аз искам да разбера после как да го направя това активно и как да го пренеса през dreamaweaver примерно

да и аз незнам как става моля кажете

Трябва да изрежете дизайна и по-части да го поставите в html-а или php-то и вече си добавяте линкове и др. работи 😉

Е ако има някъде уроци как да го направим активно няма да е лошо да кажете

Учете HTML CSS и PHP и ще го направите активен … за това няма урок в рамките на две страници. Става с четене и пробване.

;(;(;( само да можех да го направя реален ;( иначе е перфектен тоя сайт ;(

maqpenc4eva………. това е готино, но нека оставиме на страна съветите на thinklinux да живеем праведно и да се храним природосъобразно, както и клишетата че ще сполучиме с учене… може ли да поговорим по усилено за ActionScript ………… моля

значи много е як дизайна аз също правя сайтове ама нямам мой довършен щото нямам достатъчно въображение +6 за урока от мен 🙂