- Joined
- Nov 15, 2009
- Messages
- 2,234
- Reaction score
- 819
Здравейте,в този урок ще видите,как да си направите свой собствен дизайн на сайт за храна.
В този урок ще ви покажа,как да използвате един от последните пакети от Grafpedia,за създаване на чисти и апетитни хранителни оформления за блог в Photoshop. Ще ви покажа как да се направите кухненска покривка в Photoshop,слайдери и как да използвате вектори в уеб оформление.За това оформление,аз използвах пакета с Хранителни Вектори.Ако искате да използвате този пакет,вие трябва да сте V.I.P. потребител.А ако ли пък не сте,може да станете такъв,за да имате достъп до хилядите ресурси на дизайни и една година безплатни ъпдейти само за 49 долара.Ако платите сумата от 49$,вие ще можете да теглите и използвате всеки ресурс на дизайн,който е сложен в сайта на Grafpedia.
Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Това е крайният вид на дизайна,който ще направим.
Въведение:в този урок ще използваме 960 Grid System.Отидете и го изтеглете и разархивирайте.След това отворете файла "960_grid_12_col.psd" с Photoshop(ще го намерите в "photoshop" папката,която се намира в папката"templates").
След като отворите. PSD файла в Photoshop-а,ще видите 12 червени ленти. Това е системата на преносната мрежа, коqто ще използваме. Можете да скриете червените ленти, като кликнете върху окото с наименование"12 Col Grid" група.
По време на този урок ще ви помоля,да създавате форми с точно определени размери. Отворете панела Info (Window> Info) и при създаването на формата ще видите точната й ширина и височина. Този .PSD файл съдържа някои въведения, както и който ще бъде много полезен. За да активирате ги пускаме на View> Show> Guides, или да използвате комбинация Ctrl / Cmd +;. Аз обикновено се скривам червените барове и активирам, когато имам нужда от тях.
Сега, когато обхванах основните положения при използването на 960 Grid Systerm, можем да преминем към създаване на действително интернет оформление. Нека да започваме.
Стъпка 1:Намалено до 96% (от600 x 1133) - Щракнете за да увеличите
Ще започнем от повишаване на размера на нашия документ,да ни даде достатъчно пространство,за да работим. Отидете в Image > Canvas Size и използвайте настройките от изображението.
Отидете на Layer> New Fill Layer> Solid Color и работа с цвят # fbe0b1. След това щракнете с десния бутон върху слоя и изберете Convert to Smart Object. След това отидете на Filter> Noise> Add Noise и използвайте настройките от картинката по-долу.
Стъпка 2 - Създаване на модел за фон Намалено до 96% (от600 x 867) - Щракнете за да увеличите
Създаване на нов документ (Ctrl / Cmd + N) с размер 80px от 80px. Изберете Rectangle Tool (u) и направете правоъгълник с размери 80px от 40px и цвят # b52a51 в горната част на документа. Именувайте този слой "vorizintal" и нагласете прозрачността на 20%.
Създайте друг правоъгълник с размери 40px от 80px в лявата част на документа. Именувайте този слой "vertical" и нахласете прозрачността на 30%.
Изберете тези два слоя и натиснете Ctrl / Cmd + G за да ги сложите вътре в групата. Именувайте групата "pattern" и нагласете прозрачността на 30%.
Кликнете върху окото на "Background" слоя,за да го скрие. След това отидете на Edit> Define Pattern,именувайте своя модел и щракнете върху OK. Сега можете да затворите този документ и се върнете към първия.
Стъпка 3 - прилагане на модела на заден план Намалено до 96% (от600 x 550) - Щракнете за да увеличите
Направете нов слой и го запълнете с бял цвят,като използвате Paint Bucket Tool (G). Името на този слой ,нека да бъде"pattern" и настройте Fill да е на 0%. След това кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за наслагване на ивици(шарки).
Стъпка 4 Намалено до 96% (от600 x 499) - Щракнете за да увеличите
Създаваме нова група с име "top bar".След това избираме Rectangle Tool (u) и правим правоъгълник с размери 1200px на 15px и цвят # a95858 в горната част на документа. Името на този слой нека да бъде"top bar".Kликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за спускащата се сянка.Цвята на сянката е # 473e2f.
След това изберете Line Tool (u), задайте тегло на 1px, задръжте клавиша Shift и създайте хоризонтална линия в долната част на горния правоъгълник,използвайки цвета # 8b4747. Името на този слой да бъде"1px line ".
Натиснете Ctrl / Cmd + J да копира слоя линия. След това изберете Move Tool (V) и натиснете стрелка на клавиатурата веднъж,за да преместите слоя един пиксел нагоре. Променете цвета на новата линия на # ca7373.
Стъпка 5 Намалено до 96% (от600 x 1595) - Щракнете за да увеличите
Изтеглете "Food Vectors Pack" и отвориете .AI файл-а в Adobe Illustrator. След това изберете "ice cream cup vector" с помощта на Selection Tool (V), копирайте го (Ctrl / Cmd + C), върнете се в Photoshop и да го поставете като Smart Object (Ctrl / Cmd + V). Името на този слой да бъде "ice cream icon" и използването Free Transform (Ctrl / Cmd + T) да се промените размера му.
Активирайте guides/водачите (Ctrl / Cmd + и приведете иконата на лоадоледа,както виждате на картинката отгоре. Поставете този слой вътре в групата (Ctrl / Cmd + G) и го кръстете "logo".
Сега изберете Type Tool (T) и напишете името на вашето оформление с цвят # 8d1c39. Аз използвах три слоя и за текста използвах шрифта Myriad Pro Black (с думата "foog") и Myriad Pro Bold (за другите две думи). За да подредя тези слоеве аз използвах на Move Tool (V).
Кликнете два пъти върху слоя с текста, за да отворите прозореца Layer Style и използвайте настройките от изображението. Ако имате повече от един текстов слой, копирайте стила слой от първия (десен бутон върху слоя и изберете Copy Layer Style) и го поставете на другите (десен бутон и изберете Paste Layer Style).
Стъпка 6 - Добавяне на социални икони Намалено до 96% (от600 x 1205) - Щракнете за да увеличите
Създаваме на нова група с име "social". След това изберете Rounded Rectangle Tool (u) и направете заоблен правоъгълник с размери 260px на 70px с цвят # a95858 в дясната страна на вашият слой. Името на този слой да бъде"social bg",кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението.Цветя на очертанието е # a95858.
Изтегляне на този набор от икони от "Funcion" може да се открие "RSS", "Twitter", "Facebook" и "youtube" икони в Photoshop. Преместване на всяка една от тези икони в първият документ става с помощта на Move Tool (V).Също ги подредете в рамките на правоъгълник със заоблени краища, който сте създали по-рано.
Стъпка 7 - Създаване на фон за съдържанието Намалено до 96% (от600 x 1283) - Щракнете за да увеличите
Изберете Rounded Rectangle Tool (U),с радиус 6px и да се създадете бял,заоблен правоъгълник с размери 980px на 1080px. Името на този слой да бъде "content bg",кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за "Outer Glow".
Стъпка 8 - Създаване на навигационна лента Намалено до 96% (от600 x 1567) - Щракнете за да увеличите
Създайте на нова група (Layer> New> Group),с име "navigation" и го преименувайте на "content bg" група. Изберете Rounded Rectangle Tool (u) и направете заоблен правоъгълник,с размери 938px на 70px с цвят # a95858. Уверете се, че долната част на този правоъгълника е под големият бял правоъгълник. Името на този слой да бъде "navigation bar", кликнете два пъти върху него и използвайте настройките от картинката по-долу.Цвета на очертанието да е # 9c5151.
Стъпка 9 Намалено до 96% (от600 x 1051) - Щракнете за да увеличите
Изберете Type Tool (T) и напишете името на вашите елементи от навигационното меню с цвят # ece2e4 и шрифт-Myriad Pro Semibold курсив. Добавете на сянка към тези слоеве с цвят # 803a3a и настройките от изображението.
Стъпка 10 - Създаване на лентата за търсене Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Създадете нова група с име "search bar". След това изберете Rectangle Tool (u) и направете правоъгълник,с размери 200px от 26px и цвят # f4f0e2. Името на този слой да бъде"search bar", слoжете го в дясната страна на навигационната лента и добавете 1px очертание с цвят # 925050.
Изберете Type Tool (T) и напишете думата "Type and hit enter to search" вътре в лентата за търсене с цвят # 917a7a.
Стъпка 11 - Създайте изображение за слайдера Намалено до 96% (от600 x 1555) - Щракнете за да увеличите
Направете нова група (Layer> New> Group) над "content bg" и я кръстете "image slider". След това изберете Rectangle Tool (U) и направете квадрат с размери 300px на 300px с цвят # d6c8af. Името на този слой да бъде"image_holder", кликнете два пъти върху него и използвайте настройките от изображението. Вътрешнат светлина е с цвят # f1eadf и очертание с цвят # d6cdbc.
Дубликирайте слоя два пъти (Ctrl / Cmd J) и използвайте Move Tool (V), за да организирате тези слоеве, както виждате, в горната снимка. Оставете разстояние от 20px от дъното на лентата за навигация. Активирайте "guides" ,за да ви е по-лесно,да организирате такива пластове по-добре.
Стъпка 12 Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Отварете изображение с храна в Photoshop и да го преместете в първия си документ. Сложете тази снимка над средния квадрат, който сте създали в предишната стъпка. Името на този слой да бъде "image", щракнете с десния бутон върху него и изберете Create Clipping Mask, за да го направим види само в средния квадрат.
Добавете още две снимки вътре в другите два "image_holder"слоя,като използвате същия принцип.Аз използвах няколко хранителни изображения от sxc.hu.
Стъпка 13 - Създаване на двете стрелки на изображението слайдер
Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Създавате нова група с име "right arrow". След това изберате Ellipse Tool (U), задръжте натиснат клавиша Shift и създавате бял кръг с размери 60px на 60px. Името на този слой да бъде "circle" и го поставете в дясната страна на изображението слайдер. Кликнете два пъти върху този слой и използвайте настройките от картинката отгоре за Outer Glow.
Стъпка 14 Намалено до 96% (от600 x 2000) - Щракнете за да увеличите
Създавате нов празен слой (Ctrl / Cmd + Shift + N). След това задръжате натиснат клавиша Ctrl / Cmd и изберате този слой и "circle". Щраквате с десния бутон върху една от тях и изберете Convert to Smart Object. Това ще ни позволи да прикрием лявата половина на кръга, без да добавяме външна сянка или блясък към левия ръб.
Използваме Rectangular Marquee Tool (U), за да създадем селекция както виждате в горната снимка. След това отидете на Layer> Layer Mask> Hide Selection.
Стъпка 15 Намалено до 96% (от600 x 1145) - Щракнете за да увеличите
Изберете Custom Shape Tool (U), щракнете с десния бутон върху изображението и изберете формата на стрелка. След това създайте стрелка вътре в белия кръг с цвят # c4b08e. Името на този слой да бъде "arrow", дубликатирайте я (Ctrl / Cmd + J) и я преместете стрелката до първата.
Стъпка 16 Намалено до 96% (от600 x 1200) - Щракнете за да увеличите
Направете още една стрелка в лявата част на изображението слайдер,точно като сте създали дясна стрелка.
Стъпка 17 - Създаване на разделител под изображението слайдер Намалено до 96% (от600 x 1762) - Щракнете за да увеличите
Създаваме нова група с име "separator". След това избераме Line Tool (U), задаваме Weight-1px и да се създаваме хоризонтална линия под изображението слайдер с цвят # d6cdbc (1). Оставете разстояние от 30px между тази линия и изображенията отгоре.
Използваме Rectangular Marquee Tool (U), за да създадем селекция като тази, която виждате в следното изображение (2). След това отидете в Layer> New Fill Layer> Gradient и използвайте настройките от снимка (3).Аз създадох # a99470 към Transparent Gradient. Имайте предвид, че докато Gradient Fill се отвори нов прозорец, можете да кликнете върху изображението и да се премести на градиента наоколо.Сега,докато е отворен прозореца Gradient Fill.задайте прозрачността на слоя на 20% (4).
Изберете Move Tool (V) и се оставете разстояние 1px между gradient-а и линията, която създадохме по-рано.
Стъпка 18 Намалено до 96% (от600 x 1200) - Щракнете за да увеличите
Добавете mask на групата"separator" от (Layer> Layer Mask> Reveal All). След това изберете от черен към прозрачен gradient (G), задръжте клавиша Shift и преместете gradient-а от ляво на дясно, като се започнете от лявата страна на разделителе(separator). Това ще направи separator-а постепенно да изчезне. След това плъзнете другият gradient от дясно на ляво,като започвате от дясната страна на разделителя(separator). Направете си справка за това,което сторихте с изображението отгоре.
Стъпка 19 - Създаване на блогове Намалено до 96% (от600 x 1169) - Щракнете за да увеличите
Създаваме нова група с име "blog ". Направете още една група вътре в предишния слой и я наречете "post # 1 ".
Изберете Rectangle Tool (U), задръжте клавиша Shift и направете квадрат с размери 200px на 200px. Преместете този квадрат в лявата страна на layout-а,30px под хоризонталния разделител.Активирането на guides,ще ви помогне да позиционирате този слой.
Името на този слой да бъде"image_holder", кликнете два пъти върху него и използвайте настройките от изображението. За inner glow аз използвах цвят # f6eee1,а за очертание-# c9c2b6.
Отворете изображение съдържащо храна в Photoshop и го преместите в първия си документ,като използвате Free Transform (Ctrl / Cmd + T) да се промените размера му. Името на този слой да бъде"image" и го сложете над слоя "image_holder". След това щракнете с десния бутон върху него и изберете Create Clipping Mask.
Стъпка 20 Намалено до 96% (от600 x 720) - Щракнете за да увеличите
Изберете Type Tool (T) и се добавете съдържание до изображението. За заглавие съм използвах шрифта Myriad Pro Bold Italic с цвят # 514d47 и за текстови блок-шрифта Myriad Pro Regular с цвят # 6a655d.
Стъпка 21 - Създаване на "Продължи Четене" Намалено до 96% (от600 x 1525) - Щракнете за да увеличите
Създайте нова група с име "button". След това изберете Rounded Rectangle Tool (U) с радиус 4px и за създайте заоблени правоъгълници с размери 140px на 26px с цвят # e5d6bb. Името на този слой да бъде "button", кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението отгоре.За очертанието,аз използвах цвят # aca291.
Изберете Type Tool (T) и напишете думата "Continue Reading» "вътре заобленият ви правоъгълник с цвят # 847c70 и шрифт Myriad Pro Semibold Italic с размер 14pt.
Стъпка 22 - добавяне на още публикации в блога Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Дубликирайте групата "post # 1" два пъти (щракнете с десния бутон върху него и изберете Duplicate Group). След това използвайте Move Tool (V), за да преместите поста една под другия. Оставете разстояние от 30px между тях. Можете също така да замените снимките на храната с други снимки.
Стъпка 23 - Създаване на разделител за страничната лента Намалено до 96% (от600 x 2700) - Щракнете за да увеличите
Създаваме нова група с име "sidebar". След това създаваме друга група,наречена "separator ".
Изберете Line Tool (U), задайте Weight 1px и да се създадете вертикална линия до постовете (1). Името на този слой да бъде"1px line ".
Използвайте Rectangular Marquee Tool (М), за да създадете селекция като тази от изображението (2). След това отидете в Layer> New Fill Layer> Gradient и използвайте настройките от картинката отгоре (3).Аз създадох # a99470 към прозрачен gradient. Задайте прозрачността на слоя на 20% (4).
Кликнете върху групата"separator", за да я направите активна. След това добавете mask към тази група, като отидете в Layer> Layer Mask> Reveal All. Изберете Gradient Tool (G), задръжте клавиша Shift и преместете вертикалата от черно към прозрачно gradient в горната част на separator-a. След това плъзнете друг gradient в долната част от него. Направете справка за това,което сте направили с снимка (5).
Стъпка 24 - добавяне на съдържание в страничната лента Намалено до 96% (от600 x 673) - Щракнете за да увеличите
Създаваме нова група с име "popular". След това изберате Type Tool (T) и пишете думите "Most popular recipes"с шрифта Myriad Pro Bold Italic с цвят # 514d47 и размер 20pt.
Преминете в Adobe Illustrator, копирайте "the coffee cup vector" от " Food Vectors Pack" и да го поставете в вашият Photoshop документ ,като Smart Object. Името на този слой да бъде "coffee cup icon"i използвайтеFree Transform (Ctrl / Cmd + T) за да промените размерите му и да го преместите в предната част на горната част.
Изберете Type Too (T) и добавете списък с имена на блог постове под заглавието. Използване на шрифта Myriad Pro Regular с цвят # 6a655d и 13pt размер. След това изберете Ellipse Tool (U), задръжте клавиша Shift и създайте точки с размери 5px на 5px пред всеки ред от списъка. Групата на тези слоеве с точки остава заедно (Ctrl / Cmd + G)и именувайте групата "dots ".
Стъпка 25 Намалено до 96% (от600 x 709) - Щракнете за да увеличите
Добавете още един списък за рецепти. Използвайте друг вектор от пакета с вектори ,които сте изтеглили.
Стъпка 26 Намалено до 96% (от600 x 1278) - Щракнете за да увеличите
Създайте нова група с име "Flickr". След това копирайте векторa със сладолед от Illustrator и да го поставете в Photoshop с Smart Object. Името на този слой да бъде "ice cream icon" и променете размерите му,като използвате Free Transform (Ctrl / Cmd + T). Изберете Type Tool (T) и напишете думата "Flickr" до иконата.
Изберете Rectangle Tool (U), задръжте клавиша Shift и за създайте квадрат с размери 65px на 65px с цвят # f4ede2. Кликнете два пъти върху този слой, за да отворите прозореца Layer Style и използвайте настройките от изображението отгоре.Вътрешният отблясък е с цвят # fdfdfd,а очертанието е # d7d1c9.
Дублирайте слоя 8 пъти (Ctrl / Cmd + J) и използвайте Move Tool (V), за да се подредят всички квадрати, както виждате на картинката отгоре. Оставете разстояние 15px между квадратите. Поставете всички слоеве на квадратите в група с име "squares".
Стъпка 27 - Създаване на долния край Намалено до 96% (от600 x 1616) - Щракнете за да увеличите
Създаваме нова група, наречена "footer"и я слагаме под слоя "content bg". След това избираме Rounded Rectangle Tool (U) с радиус 6px и създаваме заоблени правоъгълници с размери 938px на 70px от най-долната част на нашия изглед. Уверете се, че горната половина на този слой е скрита под голям бял правоъгълник. Името на този слой да бъде"footer", кликнете два пъти върху него и използвайте настройките от изображението горе.Цвета,който съм използвам аз е # a95858.
Изберете Type Tool (T) и напишете авторските права в долния край,като използвате шрифта Myriad Pro Regular с цвят # ebd5d5 и размер 13pt.
Окончателни резултати:
Отгоре можете да видите крайната подредба. Надявам се да сте имали ползва този урок и да сте научили някои нови неща.
Както виждате, векторните икони могат лесно да бъдат използвани в уеб дизайна. С VIP профил в Grafpedia,можете да изтеглите всичките възможни вектори на разположение от Grafpedia и да започнете,да ги използвате във вашия дизайн.
Извинявам се,ако има правописни грешки или двумислици.
Автор:Grafpedia
Превел:Крис
По поръчка на:Acced
В този урок ще ви покажа,как да използвате един от последните пакети от Grafpedia,за създаване на чисти и апетитни хранителни оформления за блог в Photoshop. Ще ви покажа как да се направите кухненска покривка в Photoshop,слайдери и как да използвате вектори в уеб оформление.За това оформление,аз използвах пакета с Хранителни Вектори.Ако искате да използвате този пакет,вие трябва да сте V.I.P. потребител.А ако ли пък не сте,може да станете такъв,за да имате достъп до хилядите ресурси на дизайни и една година безплатни ъпдейти само за 49 долара.Ако платите сумата от 49$,вие ще можете да теглите и използвате всеки ресурс на дизайн,който е сложен в сайта на Grafpedia.
Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Това е крайният вид на дизайна,който ще направим.
Въведение:в този урок ще използваме 960 Grid System.Отидете и го изтеглете и разархивирайте.След това отворете файла "960_grid_12_col.psd" с Photoshop(ще го намерите в "photoshop" папката,която се намира в папката"templates").
След като отворите. PSD файла в Photoshop-а,ще видите 12 червени ленти. Това е системата на преносната мрежа, коqто ще използваме. Можете да скриете червените ленти, като кликнете върху окото с наименование"12 Col Grid" група.
По време на този урок ще ви помоля,да създавате форми с точно определени размери. Отворете панела Info (Window> Info) и при създаването на формата ще видите точната й ширина и височина. Този .PSD файл съдържа някои въведения, както и който ще бъде много полезен. За да активирате ги пускаме на View> Show> Guides, или да използвате комбинация Ctrl / Cmd +;. Аз обикновено се скривам червените барове и активирам, когато имам нужда от тях.
Сега, когато обхванах основните положения при използването на 960 Grid Systerm, можем да преминем към създаване на действително интернет оформление. Нека да започваме.
Стъпка 1:Намалено до 96% (от600 x 1133) - Щракнете за да увеличите
Ще започнем от повишаване на размера на нашия документ,да ни даде достатъчно пространство,за да работим. Отидете в Image > Canvas Size и използвайте настройките от изображението.
Отидете на Layer> New Fill Layer> Solid Color и работа с цвят # fbe0b1. След това щракнете с десния бутон върху слоя и изберете Convert to Smart Object. След това отидете на Filter> Noise> Add Noise и използвайте настройките от картинката по-долу.
Стъпка 2 - Създаване на модел за фон Намалено до 96% (от600 x 867) - Щракнете за да увеличите
Създаване на нов документ (Ctrl / Cmd + N) с размер 80px от 80px. Изберете Rectangle Tool (u) и направете правоъгълник с размери 80px от 40px и цвят # b52a51 в горната част на документа. Именувайте този слой "vorizintal" и нагласете прозрачността на 20%.
Създайте друг правоъгълник с размери 40px от 80px в лявата част на документа. Именувайте този слой "vertical" и нахласете прозрачността на 30%.
Изберете тези два слоя и натиснете Ctrl / Cmd + G за да ги сложите вътре в групата. Именувайте групата "pattern" и нагласете прозрачността на 30%.
Кликнете върху окото на "Background" слоя,за да го скрие. След това отидете на Edit> Define Pattern,именувайте своя модел и щракнете върху OK. Сега можете да затворите този документ и се върнете към първия.
Стъпка 3 - прилагане на модела на заден план Намалено до 96% (от600 x 550) - Щракнете за да увеличите
Направете нов слой и го запълнете с бял цвят,като използвате Paint Bucket Tool (G). Името на този слой ,нека да бъде"pattern" и настройте Fill да е на 0%. След това кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за наслагване на ивици(шарки).
Стъпка 4 Намалено до 96% (от600 x 499) - Щракнете за да увеличите
Създаваме нова група с име "top bar".След това избираме Rectangle Tool (u) и правим правоъгълник с размери 1200px на 15px и цвят # a95858 в горната част на документа. Името на този слой нека да бъде"top bar".Kликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за спускащата се сянка.Цвята на сянката е # 473e2f.
След това изберете Line Tool (u), задайте тегло на 1px, задръжте клавиша Shift и създайте хоризонтална линия в долната част на горния правоъгълник,използвайки цвета # 8b4747. Името на този слой да бъде"1px line ".
Натиснете Ctrl / Cmd + J да копира слоя линия. След това изберете Move Tool (V) и натиснете стрелка на клавиатурата веднъж,за да преместите слоя един пиксел нагоре. Променете цвета на новата линия на # ca7373.
Стъпка 5 Намалено до 96% (от600 x 1595) - Щракнете за да увеличите
Изтеглете "Food Vectors Pack" и отвориете .AI файл-а в Adobe Illustrator. След това изберете "ice cream cup vector" с помощта на Selection Tool (V), копирайте го (Ctrl / Cmd + C), върнете се в Photoshop и да го поставете като Smart Object (Ctrl / Cmd + V). Името на този слой да бъде "ice cream icon" и използването Free Transform (Ctrl / Cmd + T) да се промените размера му.
Активирайте guides/водачите (Ctrl / Cmd + и приведете иконата на лоадоледа,както виждате на картинката отгоре. Поставете този слой вътре в групата (Ctrl / Cmd + G) и го кръстете "logo".
Сега изберете Type Tool (T) и напишете името на вашето оформление с цвят # 8d1c39. Аз използвах три слоя и за текста използвах шрифта Myriad Pro Black (с думата "foog") и Myriad Pro Bold (за другите две думи). За да подредя тези слоеве аз използвах на Move Tool (V).
Кликнете два пъти върху слоя с текста, за да отворите прозореца Layer Style и използвайте настройките от изображението. Ако имате повече от един текстов слой, копирайте стила слой от първия (десен бутон върху слоя и изберете Copy Layer Style) и го поставете на другите (десен бутон и изберете Paste Layer Style).
Стъпка 6 - Добавяне на социални икони Намалено до 96% (от600 x 1205) - Щракнете за да увеличите
Създаваме на нова група с име "social". След това изберете Rounded Rectangle Tool (u) и направете заоблен правоъгълник с размери 260px на 70px с цвят # a95858 в дясната страна на вашият слой. Името на този слой да бъде"social bg",кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението.Цветя на очертанието е # a95858.
Изтегляне на този набор от икони от "Funcion" може да се открие "RSS", "Twitter", "Facebook" и "youtube" икони в Photoshop. Преместване на всяка една от тези икони в първият документ става с помощта на Move Tool (V).Също ги подредете в рамките на правоъгълник със заоблени краища, който сте създали по-рано.
Стъпка 7 - Създаване на фон за съдържанието Намалено до 96% (от600 x 1283) - Щракнете за да увеличите
Изберете Rounded Rectangle Tool (U),с радиус 6px и да се създадете бял,заоблен правоъгълник с размери 980px на 1080px. Името на този слой да бъде "content bg",кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението за "Outer Glow".
Стъпка 8 - Създаване на навигационна лента Намалено до 96% (от600 x 1567) - Щракнете за да увеличите
Създайте на нова група (Layer> New> Group),с име "navigation" и го преименувайте на "content bg" група. Изберете Rounded Rectangle Tool (u) и направете заоблен правоъгълник,с размери 938px на 70px с цвят # a95858. Уверете се, че долната част на този правоъгълника е под големият бял правоъгълник. Името на този слой да бъде "navigation bar", кликнете два пъти върху него и използвайте настройките от картинката по-долу.Цвета на очертанието да е # 9c5151.
Стъпка 9 Намалено до 96% (от600 x 1051) - Щракнете за да увеличите
Изберете Type Tool (T) и напишете името на вашите елементи от навигационното меню с цвят # ece2e4 и шрифт-Myriad Pro Semibold курсив. Добавете на сянка към тези слоеве с цвят # 803a3a и настройките от изображението.
Стъпка 10 - Създаване на лентата за търсене Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Създадете нова група с име "search bar". След това изберете Rectangle Tool (u) и направете правоъгълник,с размери 200px от 26px и цвят # f4f0e2. Името на този слой да бъде"search bar", слoжете го в дясната страна на навигационната лента и добавете 1px очертание с цвят # 925050.
Изберете Type Tool (T) и напишете думата "Type and hit enter to search" вътре в лентата за търсене с цвят # 917a7a.
Стъпка 11 - Създайте изображение за слайдера Намалено до 96% (от600 x 1555) - Щракнете за да увеличите
Направете нова група (Layer> New> Group) над "content bg" и я кръстете "image slider". След това изберете Rectangle Tool (U) и направете квадрат с размери 300px на 300px с цвят # d6c8af. Името на този слой да бъде"image_holder", кликнете два пъти върху него и използвайте настройките от изображението. Вътрешнат светлина е с цвят # f1eadf и очертание с цвят # d6cdbc.
Дубликирайте слоя два пъти (Ctrl / Cmd J) и използвайте Move Tool (V), за да организирате тези слоеве, както виждате, в горната снимка. Оставете разстояние от 20px от дъното на лентата за навигация. Активирайте "guides" ,за да ви е по-лесно,да организирате такива пластове по-добре.
Стъпка 12 Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Отварете изображение с храна в Photoshop и да го преместете в първия си документ. Сложете тази снимка над средния квадрат, който сте създали в предишната стъпка. Името на този слой да бъде "image", щракнете с десния бутон върху него и изберете Create Clipping Mask, за да го направим види само в средния квадрат.
Добавете още две снимки вътре в другите два "image_holder"слоя,като използвате същия принцип.Аз използвах няколко хранителни изображения от sxc.hu.
Стъпка 13 - Създаване на двете стрелки на изображението слайдер
Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Създавате нова група с име "right arrow". След това изберате Ellipse Tool (U), задръжте натиснат клавиша Shift и създавате бял кръг с размери 60px на 60px. Името на този слой да бъде "circle" и го поставете в дясната страна на изображението слайдер. Кликнете два пъти върху този слой и използвайте настройките от картинката отгоре за Outer Glow.
Стъпка 14 Намалено до 96% (от600 x 2000) - Щракнете за да увеличите
Създавате нов празен слой (Ctrl / Cmd + Shift + N). След това задръжате натиснат клавиша Ctrl / Cmd и изберате този слой и "circle". Щраквате с десния бутон върху една от тях и изберете Convert to Smart Object. Това ще ни позволи да прикрием лявата половина на кръга, без да добавяме външна сянка или блясък към левия ръб.
Използваме Rectangular Marquee Tool (U), за да създадем селекция както виждате в горната снимка. След това отидете на Layer> Layer Mask> Hide Selection.
Стъпка 15 Намалено до 96% (от600 x 1145) - Щракнете за да увеличите
Изберете Custom Shape Tool (U), щракнете с десния бутон върху изображението и изберете формата на стрелка. След това създайте стрелка вътре в белия кръг с цвят # c4b08e. Името на този слой да бъде "arrow", дубликатирайте я (Ctrl / Cmd + J) и я преместете стрелката до първата.
Стъпка 16 Намалено до 96% (от600 x 1200) - Щракнете за да увеличите
Направете още една стрелка в лявата част на изображението слайдер,точно като сте създали дясна стрелка.
Стъпка 17 - Създаване на разделител под изображението слайдер Намалено до 96% (от600 x 1762) - Щракнете за да увеличите
Създаваме нова група с име "separator". След това избераме Line Tool (U), задаваме Weight-1px и да се създаваме хоризонтална линия под изображението слайдер с цвят # d6cdbc (1). Оставете разстояние от 30px между тази линия и изображенията отгоре.
Използваме Rectangular Marquee Tool (U), за да създадем селекция като тази, която виждате в следното изображение (2). След това отидете в Layer> New Fill Layer> Gradient и използвайте настройките от снимка (3).Аз създадох # a99470 към Transparent Gradient. Имайте предвид, че докато Gradient Fill се отвори нов прозорец, можете да кликнете върху изображението и да се премести на градиента наоколо.Сега,докато е отворен прозореца Gradient Fill.задайте прозрачността на слоя на 20% (4).
Изберете Move Tool (V) и се оставете разстояние 1px между gradient-а и линията, която създадохме по-рано.
Стъпка 18 Намалено до 96% (от600 x 1200) - Щракнете за да увеличите
Добавете mask на групата"separator" от (Layer> Layer Mask> Reveal All). След това изберете от черен към прозрачен gradient (G), задръжте клавиша Shift и преместете gradient-а от ляво на дясно, като се започнете от лявата страна на разделителе(separator). Това ще направи separator-а постепенно да изчезне. След това плъзнете другият gradient от дясно на ляво,като започвате от дясната страна на разделителя(separator). Направете си справка за това,което сторихте с изображението отгоре.
Стъпка 19 - Създаване на блогове Намалено до 96% (от600 x 1169) - Щракнете за да увеличите
Създаваме нова група с име "blog ". Направете още една група вътре в предишния слой и я наречете "post # 1 ".
Изберете Rectangle Tool (U), задръжте клавиша Shift и направете квадрат с размери 200px на 200px. Преместете този квадрат в лявата страна на layout-а,30px под хоризонталния разделител.Активирането на guides,ще ви помогне да позиционирате този слой.
Името на този слой да бъде"image_holder", кликнете два пъти върху него и използвайте настройките от изображението. За inner glow аз използвах цвят # f6eee1,а за очертание-# c9c2b6.
Отворете изображение съдържащо храна в Photoshop и го преместите в първия си документ,като използвате Free Transform (Ctrl / Cmd + T) да се промените размера му. Името на този слой да бъде"image" и го сложете над слоя "image_holder". След това щракнете с десния бутон върху него и изберете Create Clipping Mask.
Стъпка 20 Намалено до 96% (от600 x 720) - Щракнете за да увеличите
Изберете Type Tool (T) и се добавете съдържание до изображението. За заглавие съм използвах шрифта Myriad Pro Bold Italic с цвят # 514d47 и за текстови блок-шрифта Myriad Pro Regular с цвят # 6a655d.
Стъпка 21 - Създаване на "Продължи Четене" Намалено до 96% (от600 x 1525) - Щракнете за да увеличите
Създайте нова група с име "button". След това изберете Rounded Rectangle Tool (U) с радиус 4px и за създайте заоблени правоъгълници с размери 140px на 26px с цвят # e5d6bb. Името на този слой да бъде "button", кликнете два пъти върху него, за да отворите прозореца Layer Style и използвайте настройките от изображението отгоре.За очертанието,аз използвах цвят # aca291.
Изберете Type Tool (T) и напишете думата "Continue Reading» "вътре заобленият ви правоъгълник с цвят # 847c70 и шрифт Myriad Pro Semibold Italic с размер 14pt.
Стъпка 22 - добавяне на още публикации в блога Намалено до 96% (от600 x 770) - Щракнете за да увеличите
Дубликирайте групата "post # 1" два пъти (щракнете с десния бутон върху него и изберете Duplicate Group). След това използвайте Move Tool (V), за да преместите поста една под другия. Оставете разстояние от 30px между тях. Можете също така да замените снимките на храната с други снимки.
Стъпка 23 - Създаване на разделител за страничната лента Намалено до 96% (от600 x 2700) - Щракнете за да увеличите
Създаваме нова група с име "sidebar". След това създаваме друга група,наречена "separator ".
Изберете Line Tool (U), задайте Weight 1px и да се създадете вертикална линия до постовете (1). Името на този слой да бъде"1px line ".
Използвайте Rectangular Marquee Tool (М), за да създадете селекция като тази от изображението (2). След това отидете в Layer> New Fill Layer> Gradient и използвайте настройките от картинката отгоре (3).Аз създадох # a99470 към прозрачен gradient. Задайте прозрачността на слоя на 20% (4).
Кликнете върху групата"separator", за да я направите активна. След това добавете mask към тази група, като отидете в Layer> Layer Mask> Reveal All. Изберете Gradient Tool (G), задръжте клавиша Shift и преместете вертикалата от черно към прозрачно gradient в горната част на separator-a. След това плъзнете друг gradient в долната част от него. Направете справка за това,което сте направили с снимка (5).
Стъпка 24 - добавяне на съдържание в страничната лента Намалено до 96% (от600 x 673) - Щракнете за да увеличите
Създаваме нова група с име "popular". След това изберате Type Tool (T) и пишете думите "Most popular recipes"с шрифта Myriad Pro Bold Italic с цвят # 514d47 и размер 20pt.
Преминете в Adobe Illustrator, копирайте "the coffee cup vector" от " Food Vectors Pack" и да го поставете в вашият Photoshop документ ,като Smart Object. Името на този слой да бъде "coffee cup icon"i използвайтеFree Transform (Ctrl / Cmd + T) за да промените размерите му и да го преместите в предната част на горната част.
Изберете Type Too (T) и добавете списък с имена на блог постове под заглавието. Използване на шрифта Myriad Pro Regular с цвят # 6a655d и 13pt размер. След това изберете Ellipse Tool (U), задръжте клавиша Shift и създайте точки с размери 5px на 5px пред всеки ред от списъка. Групата на тези слоеве с точки остава заедно (Ctrl / Cmd + G)и именувайте групата "dots ".
Стъпка 25 Намалено до 96% (от600 x 709) - Щракнете за да увеличите
Добавете още един списък за рецепти. Използвайте друг вектор от пакета с вектори ,които сте изтеглили.
Стъпка 26 Намалено до 96% (от600 x 1278) - Щракнете за да увеличите
Създайте нова група с име "Flickr". След това копирайте векторa със сладолед от Illustrator и да го поставете в Photoshop с Smart Object. Името на този слой да бъде "ice cream icon" и променете размерите му,като използвате Free Transform (Ctrl / Cmd + T). Изберете Type Tool (T) и напишете думата "Flickr" до иконата.
Изберете Rectangle Tool (U), задръжте клавиша Shift и за създайте квадрат с размери 65px на 65px с цвят # f4ede2. Кликнете два пъти върху този слой, за да отворите прозореца Layer Style и използвайте настройките от изображението отгоре.Вътрешният отблясък е с цвят # fdfdfd,а очертанието е # d7d1c9.
Дублирайте слоя 8 пъти (Ctrl / Cmd + J) и използвайте Move Tool (V), за да се подредят всички квадрати, както виждате на картинката отгоре. Оставете разстояние 15px между квадратите. Поставете всички слоеве на квадратите в група с име "squares".
Стъпка 27 - Създаване на долния край Намалено до 96% (от600 x 1616) - Щракнете за да увеличите
Създаваме нова група, наречена "footer"и я слагаме под слоя "content bg". След това избираме Rounded Rectangle Tool (U) с радиус 6px и създаваме заоблени правоъгълници с размери 938px на 70px от най-долната част на нашия изглед. Уверете се, че горната половина на този слой е скрита под голям бял правоъгълник. Името на този слой да бъде"footer", кликнете два пъти върху него и използвайте настройките от изображението горе.Цвета,който съм използвам аз е # a95858.
Изберете Type Tool (T) и напишете авторските права в долния край,като използвате шрифта Myriad Pro Regular с цвят # ebd5d5 и размер 13pt.
Окончателни резултати:
Отгоре можете да видите крайната подредба. Надявам се да сте имали ползва този урок и да сте научили някои нови неща.
Както виждате, векторните икони могат лесно да бъдат използвани в уеб дизайна. С VIP профил в Grafpedia,можете да изтеглите всичките възможни вектори на разположение от Grafpedia и да започнете,да ги използвате във вашия дизайн.
Извинявам се,ако има правописни грешки или двумислици.
Автор:Grafpedia
Превел:Крис
По поръчка на:Acced
