Преглед на урок
Дизайн на мебелен сайт
1/ Създайте нов документ с размери 960х900рх.
Запълнете фона с цвят #f5f2ef с помощта на Paint Bucket Tool (G)
2/ Вземете Rounded Rectangle Tool (U)
в режим Shape Layers, радиус 10рх и начертайте правоъгълник с цвят #3d342b
3/ Добавете стил на правоъгълника от Layer - Layer Style - Blending Options:
4/ Задръжте Ctrl и кликнете в квадратчето на маската, за да активирате селекцията на правоъгълника:
5/ Създайте нов слой
най-горе.Вземете Brush Tool и с голяма мека бяла четка направете петно в средата на правоъгълника:
6/ Променете Blend Mode на Soft Light:
7/ Отменете селекцията Ctrl+D и трябва да имате следващия резултат:
8/ Изберете шейпа с кафявия правоъгълник и го дублирайте (Ctrl+J).
Сменете цвета на копието с #bab0a4.
С десен бутон отворете менюто и изберете Rasterize layer:
9/ Вземете Polygonal Lasso Tool (L)
и селектирайте лявата част на правоъгълника. Натиснете Delete за да я изтриете. (Трябва да остане фактически само светлата фигура)
10/ Намалете Оpacity на 20%:
11/ Отворете снимка, копирайте я и я поставете в документа, с Ctrl+T я наместете така, че да се вижда тази част, която трябва. Активирайте селекцията на фигурата в която ще се вижда картинката и я свийте с няколко пиксела: Select - Modify - Contract. Добавете маска
към слоя с картинката за да скриете излишните части от нея:
12/ С Rectangle Tool (U)
и цвят #e9e6e1, начертайте правоъгълна лента:
13/ Под шейпа с правоъгълната лента с Pen Tool (P)
, начертайте фигура, като показаната на следващата картинка:
14/ Размийте я по контурите, като използвате Filter > Blur > Gaussian Blur с радиус 5-10рх.
15/ Дублирайте слоя със сянката, обърнете го вертикално (Edit - Transform - Flip Vertical) и го преместете над горната линия на правоъгълната лента:
16/ С Pen Tool (P) начертайте следващата фигура:
17/ Добавете настройки в Blending Options:
18/ Дублирайте фигурата толкова пъти, колкото бутона са ви необходими, в случая автора е направил 4 копия. Разместете ги.
Активирайте селекцията на правоъгълната лента и добавете клипинг маска към всяка фигура. (Шейповете с фигурите за бутоните трябва да са точно над този с правоъгълната лента)
19/ Вземете Line Tool (U)
и начертайте бяла линия 1рх:
20/ Растеризирайте шейпа, земете Eraser Tool (Е)
, голяма мека четка и кликнете в долната част на линията за заострите края.
21/ Дублирайте слоя с линията и разместете копията и по останалите бутони:
22/ Начертайте и една разделителна бяла линия в лявата част на картинката:
23/ С Rounded Rectangle Tool начертайте следващите фигури както се виждат на следващата картинка:
24/ Изберете слоя с големия бял правоъгълник и активирайте селекцията му:
25/ Създайте нов слой и с помощта на Paint Bucket Tool, го запълнете с някакъв Pattern.
Автора само е показал, но не е предоставил този, който е използвал, но можете да изтеглите един от тези които аз използвах от ТУК:
26/ Изтрийте с гумата долната част на патерна и намалете Opacity на слоя до 20-30%
27/ Напишете текста, който ви е необходим, автора разбира се е импровизирал с напълно произволен текст:
28/ Добавил е и няколко стрелки върху бутони с четки, които също не са предоставени за ползване.
Резултата:
Моят опит:
Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.
Урокът е добавен от: maqpen4eva
Източник: http://www.grafpedia.com/
Коментари
Alore
Частта с бутоните (clipping mask-а) не е обяснена добре, но с малко импровизация става работата :)
maqpen4eva
Това не са уроци от Основни техники за да се обяснява, кое как се прави, трябва да ги знаеш тези подробности, преди да се захванеш да правиш цялостен дизайн на сайт, хората само ти дават примерен дизайн, даже не трябва да го следваш стъпка по стъпка, а да импровизираш
Alore
Е мислиш ли, че ако не ги знаех тези подробности щях да се захвана да правя цялостен сайт :)
Просто за някой по-нов би било трудно и ще се налага доста да експериментира, докато се получи :)
maqpen4eva
Точно де, след като е нов, да чете уроците в Основни техники, докато научи кое как се прави и тогава да се захваща с дизайн на сайт
cem_cem
maqpen4eva, би ли помогнала от къде да прочетем за Основни техники, благодаря!
maqpen4eva
Напиши в търсачката на сайта Основни техники и ще излязат всички уроци от тази категория, после преглеждаш наред и правиш опити, докато научиш кое къде е и как се използват, ако има нещо неясно четеш първо коментарите след уроците, ако няма същото питане, питаш там и чакаш някой да отговори
Добави коментар
