Лично портфолио с photoshop
18-05-2011
[1] Направете нов документ (1200х1200) пиксела
[2] Вземете "Rectangle tool" и направете форма (около 45-50 пиксела) в горния край на

документа.
[3]Запълнете формата с цвят #0a0a0a
Трябва да сте получили нещо такова:

[4]Отново вземете "Rectangle Tool" и направете втора форма на нов слой(Shift+CRTL+N) от

края на първата с размери(около 390-400пиксела)
[5]Кликнете два пъти на слоя с втората форма,за да влезете в менюто "Blending

Options",отидете на "Gradient Overlay" с настройки:

Дотук трябва да имате нещо подобно:

[6]Зуумнете до 2700-3000 пиксела докато видите границите на 2-те форми

[7] Вземете "Pencil Tool" с големина 1пиксел,натиснете "D" ,за да върнете цветовете (черно

и бяло) и направете 2 линии,една под друга (горната черна,а долната бяла).Прави линии може

да направите,като натиснете и задържите "SHIFT",след което рисувате линията.Дотук трябва да

имате нещо подобно:

Сметене "Blending Mode" нa "Overlay".Ето какво имаме дотук:

[8] Вземете "Horizontal Type Tool",шрифт "Verdana",размер 14-16 пиксела,цвят: #ebebeb и

направете линковете на менюто в/ъ първата форма,която направихте и го преместете вдясно:

[9] Вземете "Rectangle Tool" и направете форма с размери (290х60) пиксела с произволен

цвят:

[10] Вземете "Gradient Tool",нагласете "Foreground" цвят: #32abe0 | "Background" цвят

#2d95c5 и теглете една черта в/у формата.
[11] На нов слой направете бяла форма в/у горната част на логото с бял цвят (с "Rectangle

Tool")

Кликнете на слоя с бялата форма,след което,задръжте "CTRL" и кликнете в/у слоя с формата на

логото(синята),натиснете "SHIFT+CRTL+I" за да обърнете селекцията и най накрая натиснете

"Del"/"Backspace".Трябва да сте получили това:

Намалете "Opacity" на слоя с бялата форма до 20%-30%
[12] Напишете текст във формата на логото с бял цвят:

[13] Взимате "Rectangle Tool" и на нов слой правите нова форма с височина (50-60 пиксела).
След това кликвате 2-пъти в/у слоя,за да влезете в "Blending Options" и отивате на

"Gradient Overlay" с настройки:

След което повтаряте стъпка [6].Трябва да имате това:

[14] На нов слой направете нова форма.Кликнете 2-пъти на слоя ->"Drop Shadow" с настройки:

"Gradient Overlay" с настройки:

[15] Повторете стъпка [6].Трябва да имате това:

[16] Направете нов слой,преместете го под формата,която направихте в стъпка [14],направете

нова форма с височина около 300-310пиксела.Следва двоен клик в/у слоя на новата форма-

>DropShadow:

->Gradient Overlay:


Дотук трябва да имате това:

[17] Направете нов слой и го преместете под формата,която направихте в стъпка

[16],направете нова форма с височина около 300-315пиксела и запълнете с цвят: #131313
[18]Направете нов слой и го преместете под всичките слоеве,които сте направили до

сега.Кръстете го "Footer".Направете още една форма и я запълнете с цвят: #0a0a0a .По

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

Вече сме готови с бекграунда.Маркирайте всичките слоеве,натиснете "CTRL+G" ,за да направите

група и я кръстете "Background".

[19] След като сте направили групата "Background" вземете "HorizontalTypeTool" и под логото с шрифт "Arial/24 px/#ffffff;"
Напишете текст/цветът на "Nazi_93 Designs" - #72cff8;
Трябва да имате нещо подобно:


Отново вземете "HorizontalTypeTool" и напишете още текст с шрифт "Arial/12 px/#ffffff;"


[20]С "Rounded Rectangle Tool" с радиус 10-15 пиксела направете нова форма,на нов слой.Кликнете 2 пъти в/у слоя
и приложете следните настройки:


"Gradient Overlay " с цветове: #171717/#272727



Кликнете ок и добавете текст.Ето какво трябва да имате дотук:

[21] (по желание) Добавете вдясно картинка:
http://web-tourist.net/userfiles/3/3926.jpg
[22] Идва ред да напишем малко информация (За мен)
Шрифт: Verdana / Големина:20px / Цвят: #72cff8 (син) и #fff (бял)
Добавете малко лична информация с цвят #838080 (сиво) и повторете стъпка [20].Ето какво трябва да имате дотук:


[23] Следва да напишем "Какво Правя" (вдясно на "за мен")
Шрифт: Verdana / Големина:20px / Цвят: #72cff8 (син) и #fff (бял)
Под него с цвят #838080 напишете още малко информация:


[24] Вземете "Rounded Rectangle Tool" и направете на нов слой малка форма (25х5).Кликнете 2-пъти в/у слоя с настройки:



"Gradient Overlay " с цветове #171717/#272727

С шрифт: Verdana / Italic / Големина:12px / Цвят:#fff (бял) добавете вдясно от формата текст:

[25] Дублирайте формата и добавете още текст:

[26] Идва ред и на бутона "Прочети повече",за целта повторете стъпка [20].Дотук трябва да имате това:

[27] Нека да напишем уменията:
Шрифт: Verdana / Големина:20px / Цвят: #72cff8 (син) и #fff (бял)
Шрифт: Verdana / Големина:16px / Цвят: #fff (бял) добавете текст:

[28] Вземете "Rounded Rectangle Tool" с радиус 10-20px и на нов слой направете форма с размери:
350х30 пиксела.Кликнете 2 пъти в/у слоя,за да влезете в "Blending Options" с настройки:

"Gradient Overlay" с цветове #272727/#171717


Трябва да имате това:


[29] Дублирайте слоя (CRTL+J) и изчистете стиловете (Десен клик в/у дубликата "CLEAR LAYER STYLE")
Следва двоен клик в/у слоя с настройки:


"Gradient Overlay" с цветове #00009 / #272727
Натиснете ОК и вземете "Rectanglular Marquee Tool" селектирайте малко от формата и натиснете "Del/Backspace"
Трябва да сте получили нещо подобно:

[30] Направете нов слой и направете форма и запълнете в бяло както е показано на долната картинка:

Задръжте "CRTL" и кликнете в/у слоя,който дублирахте преди малко,натиснете "SHIFT+CTRL+I",за да обърнете селекцията,
след което натиснете "Del/Backspace" и намалете прозрачността на слоя до (5-20%).Tрябва да имате нещо подобно:

[31] (незадължителна) Може да добавите още информация по същия начин за други програми/езици:

[32]Дойде ред да покажем последните проекти.
Шрифт: Verdana / Големина:20px / Цвят: #72cff8 (син) и #fff (бял) добавете текст:

[33] Вземете "Rounded Rectangle Tool" с радиус 10-15пиксела и направете форма.След което кликнете 2 пъти на слоя
с настройки:

"Gradient Overlay" с цветове #272727/#171717




Дублирайте слоя и изчистете стиловете (погледни стъпка 29)
Кликнете 2 пъти в/у дублирания слой и приложете следните стилове:

"Gradient Overlay" с цветове #000009/#282828

Дотук Трябва да имате нещо подобно:

Повторете стъпка [33] и добавете още 2 форми:
[34]В/у формите може да добавите изображения от последните Ви проекти
Краен резултат :

Урокът е направен специално за web-tourist.net Забранявам копирането,преписването му в други сайтове без моето лично
съгласие или това на администраторите на сайта!







/ Трябва да сте регистриран за да напишете коментар /
От: admin
18:01 18-05-2011
И един видео урок към него щеше да е добре.
От: Nazi_93
18:05 18-05-2011
Ще направя възможно най-скоро
От: stoqnski
13:33 19-05-2011
Браво за труда :)
От: IvanAdamov
17:04 19-05-2011
Малко подравнение му трябва, иначе е добро тутчето.
От: Hous
23:22 19-05-2011
Има прекалено много излишни скрииншоти и стъпки (всеки може да си добави текстовете по желание) но пък доста уроче и доста игра сигурно е било (дано не си го преписал от някъде...)
браво за труда :)
От: Nazi_93
6:52 20-05-2011
Не е преписан,направен е по идеята на " 1stwebdesigner".Обяснил съм го максимално,за да може и начинаещите потребители на фотошоп да могат да го направят.
От: mo7ika
10:56 27-05-2011
Много полезен урок. Видеото ще е още по-полезно.
От: gotiobg
11:08 27-05-2011
На портфолиото случайно ли си избрал г-н Гошов, или си копирал данните на някого?

Иначе добър урок, само малко трябва да стегнеш вида на тута. Браво!
От: Nazi_93
11:43 27-05-2011
Името Гошо Г. Гошов е случайно избрано
От: ZFPuhi
18:16 27-05-2011
Като за начало забравих да се впиша а уш пуснах коментар.Така урокът е много хубав и както каза ' admin ' ако направиш един видео урок няма да имаш грешка.
+ Ако може да направиш и бонус видео урок как да го кодираме от PSD в html или php ще е много полезно,и недей да казваш ' Четете в CSS секцията ' защото някой хора и да четът знания може да не добият или да го объркът много лошо.Затова моля когато имаш свободно време да го направиш.
От: Nazi_93
18:21 27-05-2011
Най-рано сряда ще мога да направя видео урокът,за да мога предварително да си подготвя нещата.Обещавам,че Видео урок ЩЕ ИМА,а по-нататък,ако имам време/възможност, ще направя и урок как се кодира.
От: xmmm
14:14 14-06-2011
offtopic / @ZFPuhi от PSD в php ще му е много трудно,даже невъзможо :)

intopic/ добър урок,браво.
От: nikssa23
23:48 29-07-2011
Пич дизайна ме изкърти по всички параграфи но накрая "последни проекти " щеше да е много по добре ако се смени градиента с #1d1d1d защото само те не ми допадат но това си е мое мнение (: браво за урока :)
1