|
Стъпка 1: Създаваме нов документ 780x1000px. Стъпка 2: Запълваме фона с цвета #ededed като използваме инструмента заливане(Shift+B). Стъпка 3: Правим нов слой и го кръщаваме „Header“. Стъпка 4: Избираме Правоъгълно избиране(R) и правим правоъгълник с 780px ширина и 125px височина. Стъпка 5: Взимаме инструмента преливка((L) и избираме FG към BG (RGB) преливка и за FG добавяме цвета #000000 а за BG #3a4146.Ако се чудете какво е FG и BG те са цветовете FG е първия по подразбиране цвета е черен а BG е белия цвят. Стъпка 6: Влачим една преливка като започнем от най-горе на правоъгълника който направихме и завършим в най-долната му част. 
Би трябвало резултата да е това: 
За лого ще използваме текст с ефект на отражение. Стъпка 7: Добавяме текст Gimp-tutorials.net с големина 30px и шрифт 'Trebuchet MS Bold' вие може да сложите друг текст и шрифт разбира се. Стъпка 8: Дублираме слоя с текста и го поставяме по дол от оригиналния текст. Стъпка 9: Като използваме инструмента за обръщане(Shift+E) обръщаме слоя вертикално 
Стъпка 10: Селектираме слоя с обърнатия текст и с десен клик с мишката на слоя избираме „Превръщане на прозрачността в селекция“. Стъпка 11: Избираме инструмента за преливка, като изберем FG към прозрачност и променяме цвета на FG на #3a4146. Стъпка 12: Започваме да правим преливка от края(най-дол) към върха на текста. 
Стъпка 13: За навигационната лента правим нов слой, избираме инструмента за правоъгълно избиране(R), правим правоъгълна селекция с 780x ширина и 20px височина.
Стъпка 14: Сега като използваме инструмента за преливки от FG към BG (RGB) и приложим за FG #0276cf и #82c9ff за BG правим преливка от дол нагоре. 
Сега за табовете създаваме нов слой и го кръщаваме Tab. Стъпка 15: Като използваме инструмента за правоъгълно избиране правим правоъгълник 105px широчина и 8px височина, използвайте линията за ориентиране. Стъпка 16: Сега кликнете с десния бутон на мишката върху таб-а и изберете Избиране>Заобляне и променете процентите на радиуса на 45. Стъпка 17: Използвайте инструмента за преливане с 0276cf за FG и 82c9ff за BG. Стъпка 18: Направете преливка от дол нагоре и се уверете че започва около 225px от линията и завършва на 125px от линията, или иначе таба няма да се слее с навигационната лента много добре, може да видите как да го направите на картинката по надол. 
Резултата трябва да е подобен: 
Стъпка 19: Дублирайте слоя няколко пъти, оставете малко място между тях. Може и да ги прекръстите за по добра огранизация. 
Стъпка 20: Да центрираме табовете, кликнете на празното квадратче до иконката с окото в диалога на слоевете. 
Стъпка 21: Сега добавете текст за меню на всеки таб. Добре е да запазите дизайна в формат XFC за да имате резервно копие. 
Време е да направим левия панел. Стъпка 22: Направете нов слой и го кръстете „left sidebar“.
Стъпка 23: Използвайте инструмента за правоъгълно избиране(R) и направете правоъгълник с размер 200px ширина и 950px височина. Запълнете го с цвят #232323.
Стъпка 24: Повторете стъпка 20 и след това преместете табовете да са позиционирани според левия панел както на снимката по дол. 
Стъпка 25: За да направим линията която ще разделя различните линкове в левия панел, правим нов слой и го кръщаваме „Line“. Зоом-ваме го на 300%, направете един правоъгълник 1px височина и ширина почти колкото целия ляв панел и го запълнете с цвят #232222.
Стъпка 26: Направете така още 1 линия под другата в същия слой, но този път я запълнете с цвят #4e4c4c. Така изглежда зоом-нато на 200% 
Дублирайте 7 пъти слоя и ги разположете на горе-дол равно разстояние надол. 
Стъпка 27: За добавянето на ефект преливка на фона първо направете нов слой и го кръстете „gradient effect“ след това направете правоъгълник 205px и го запълнете от дол нагоре с преливка и с цветове #ededed за FG и #ffffff за BG. 
Стъпка 28: Създайте още един слой в долната част на контейнера, обаче този път преливката да е от горе надол. 
Сега основния дизайн е готов, време е да добавим някакво съдържание, сега ви трябва някоя хубава снимка за тук, един от моите любими сайтове за безплатни картинки е http://www.stockvault.net/ 100% безплатно е! Изберете си картинка и я свалете, в урока ще използвам тази 
Може да я свалите от тук http://www.stockvault.net/details.php?gid=98&sgid=&sgid=&pid=6296 Стъпка 29: Отворете свалената снимка и изберете инструмента за мащабиране(Shift+T) и го мащабирайте от 1500x1835px на 1024x705, защото изображението е твърде голямо и няма да изглежда добре, сега вземете инструмента за правоъгълно избиране(R) и очертайте правоъгълник с големина 569x179px сега натиснете CTRL + C за да го копирате и отидете на дизайна който правите и натиснете CTRL + V за да го поставите, подравнете ги и ги наместете където ще е хеадера както е показано на снимката. 
Стъпка 30: Сега ще добавим текстови линкове в лявото меню, затова вземете инструмента за текст(T) и добавете 5-6 думи и ги подравнете перфектно в средата на линиите разделители.
Стъпка 31: Повторете това до другите разделители и се убедете, че са позиционирани перфектно, позиционирането е всичко когато става дума за графичен дизайн, би трябвало да изглежда така лявото меню 
Стъпка 32: Отново вземете инструмента за текст(T) и добавете параграфи и ги поставете в средата на празното пространство и се уверете, че са перфектно наместени. 
Стъпка 33: Сега обикновено за футър се добавя текст за авторските права или допълнителна навигация, ние ще добавим талисман на Gimp който може да намерите на gimp.org и малък текстов линк gimp-tutorials.net 
Това беше вече имате цял дизайн изграден с Gimp :) 
Ето го с сменен шрифт на логото, добре е за направите експеримент с шрифта на логото за да може да изглежда перфектно. 
Превод: Даниел Георгиев(R3sp3k7) специално за Gimp-bg.com Източник: http://gimp-tutorials.net
| 
