Как да създадете добро меню във Photoshop. Как да създадете меню в контакт
Здравейте всички! Този път сме подготвили урок за вас как да създадете готова за печат брошура за въображаемо кафене, наречено „Violet Coffee“. Този урок ще обхване подготовката на фон и няколко поддържащи обекта, които по-късно ще импортираме в Adobe InDesign, за да завършим брошурата. Готов? Отивам!
Преди да започнеш
Този урок е предназначен да бъде ръководство за онези, които започват да разбират изкуството на печатния дизайн. Тук ще засегнем няколко важни теми относно настройките на документа, мерните единици и размерите, маркирането, отстъпите и печатането без тях, работата с цвят, типографията и дори отпечатването на нещо
Разделих урока на две части, едната от които е посветена на създаването на фон за менюто и няколко дизайнерски елемента с помощта на инструменти на Photoshop, а втората част ще говори за работата върху резултатите от първия в Adobe InDesign, за да направите правилното оформление съдържанието, подготвят документа за печат и всъщност го отпечатват.
Работата ще се проведе в рамките на въображаема легенда, според която клиентът “X” ни предостави няколко снимки и Word документ с текст за брошурата. Е, вашата задача като дизайнер ще бъде да съставите от всичко това красиво оформление, което няма да се срамувате да отпечатате и покажете на клиента.
Да започваме. За този урок ще ви трябва следното:
- Чаша кафе,
- дим,
Маркиране на документи
Не забравяйте, че моливът и листът хартия винаги са на първо място! Начертайте желания резултат и варианти за постигането му. По-долу е моята чернова, която ще послужи като отправна точка за по-нататъшно творчество. Трябва да има две страници: предна и задна.
Първата страница ще съдържа оформлението на корицата, а задната страница ще съдържа самия текст на менюто. Листовката ще бъде сгъната на две, като брошура. Основните цветове ще бъдат лилаво и черно за фон и почти бяло за текста. Размерите на платното могат да варират, но според мен „двойната буква“ е доста подходяща. Така ще имаме собствен формат на буквите за всяка страница (215,9 × 279,4 mm). Общоприето е да се отпечатват менюта в големи формати, но в крайна сметка всичко зависи от вашите предпочитания. Е, след като сте решили вашите цели и идеи, можете да продължите напред.
1 стъпка
Нека създадем един документ за шаблона с фон, върху който ще поставим името на компанията и чаша кафе.
Отворете Photoshop и отидете на File > New. Първо решете какъв размер хартия искате да използвате (това може да зависи и от бюджета на клиента). Предлагам да започнете с размер Letter от 8,5 x 11 инча (215,9 x 279,4 mm). Също така е много важно да зададете разделителната способност на този етап (минималната разделителна способност за печат според моя опит е 300 точки на инч (300ppi)). И на същия етап трябва да зададем цветовия режим CMYK.
Корицата на книжката ще бъде една цяла част и ще се получи от прегъването на вече разпечатания лист с меню на две. Следователно, за да бъде фонът гладък, без нежелани вмъквания и преходи, ние ще го създадем като един документ, което означава удвояване на оригиналния размер на шаблона („Двойна буква“).
Увеличете ширината на хартията Letter до 17 инча. След като проверите въведените параметри, щракнете върху Ok.
2 стъпка
Сега имаме нормално отпечатано платно, но все пак няма да навреди да се погрижим за допълнително пространство около периметъра за безопасност при печат без граници. Активирайте линийките (Линийки, Ctrl + R) и поставете четири водача върху работната зона (щракнете върху линийката и ги плъзнете върху платното), по една за всяка граница на документа. След това отидете на Image > Canvas Size и увеличете документа 1/8″ отгоре, отдолу и отстрани. Това може да се постигне чрез просто добавяне на 0,25 инча към височината и ширината, както е показано на моята илюстрация по-долу. Уверете се, че опорната точка е центрирана и щракнете върху Ok.
Фоново развитие
3 стъпка
Да започнем със самата графика. Първо, нека разтегнем слоя Gradient Fill. Отидете на Layer > New Fill Layer > Gradient и задайте цветовете на градиента на Violet (C:80, M:100, Y:30, K:25) и Black (C:70, M:70, Y:70 и K: 95), което е обобщено значение на наситено черно (Rich Black в типографията) и работи много изгодно. Не забравяйте да зададете ъгъл на 90 градуса.
4 стъпка
Сега нека приложим някои ефекти към фона. Създайте нов слой върху слоя с градиент, задайте цвета на предния план на C:80 M:70 Y:60 K:80 и задайте цвета на фона на бяло. След това отидете на Filter > Render > Clouds. Променете режима на смесване на този слой на Overlay. След това отидете на Filter > Blur > Motion Blur, задайте ъгъл на 90 градуса и разстояние на 999px. Накрая коригирайте нивата (Ctrl + L), както е показано на изображението по-долу, за да завършите ефекта.
5 стъпка
С помощта на Pen Tool (P) създайте форма, както е показано на изображението по-долу. Попълнете пътя с C:10, M:15, Y:0, K:0. Използвайте групи, за да поддържате слоевете в ред. Първото нещо, което направих, беше да създам група, наречена „Curves Right“ и да сложа всички криви за дясната страна на платното в нея. След това отидете на Layer > Layer Mask > Hide All и го запълнете с хоризонтален градиент от бяло към черно, като направите видима само лявата страна на формата. Накрая намалете Opacity на слоя до 25% и задайте Blend Mode на Color Dodge.
6 стъпка
Дублирайте формата си няколко пъти (задръжте Alt и плъзнете слоя) и използвайте Transform Tool, за да промените всеки от дубликатите, докато получите нещо подобно на съдържанието на илюстрацията по-долу. Можете да добавите толкова криви, колкото искате. Опитайте да играете със стойностите на Opacity на всяка от формите, за да получите възможно най-интересния ефект.
След това изберете групата "Curves Right" и я плъзнете в дясната страна на платното. След това го дублирайте (това може да се постигне и чрез задържане на Alt и плъзгане) и отидете на Edit > Transform > Flip Horizontal, за да покажете дубликата хоризонтално. След това преименувайте снимката на „Криви вляво“ и я плъзнете до лявата страна на платното.
7 стъпка
Създайте нов слой върху "Криви". С помощта на Ellipse Tool (U) нарисувайте розов кръг (C:5 M:55 Y:0 K:0). За да направите кръга с правилната форма, задръжте Shift, докато го разтягате. След това отидете на Filter > Blur > Gaussian Blur (ще бъдете помолени да растеризирате слоя - направете това), задайте радиуса на размазване на 50px и щракнете върху Ok. След това променете Blending Mode на слоя на Color Dodge, задайте Opacity на 50% и поставете това място някъде върху някоя от вашите криви.
Дублирайте този слой толкова пъти, колкото сметнете за добре, променете Opacity, играйте с размера на всеки дубликат и се опитайте да получите нещо подобно на илюстрацията по-долу. След като приключите с кръговете, преместете ги всички в отделна папка, наречена нещо като „Светлинни сфери“.
8 стъпка
В тази стъпка ще трябва да отворите Star Brush Set. Създайте нов слой и добавете няколко бели звезди върху него на различни места. След това добавете стил Outer Glow към слоя с режим на смесване Screen и размер 70px, цвят C:15, M:55, Y:0, K:0. Накрая задайте Opacity на слоя на около 70%.
Добавяне на заглавие
9 стъпка
Следващата стъпка е да добавите лого. Разбира се, не може да се нарече лого в истинския смисъл на думата, тъй като логото е по-сложен елемент от дизайна, така че нека просто го наречем „име на фирмата“. Сега разделете дясната половина на документа на две колони с помощта на вертикален водач и удължете още три хоризонтални, за да разделите страницата на четири еднакви по височина линии. След това, като използвате Type Tool (T), напишете думата „VIOLET“ с бели главни букви от дясната страна на документа на втория ред. Използвах търговски слушалки Avant Garde, но можете да използвате всеки от наличните аналози (Futura, Century Gothic и др.). Текстовите параметри са показани на илюстрацията по-долу. След това изберете една буква "O" и променете цвета й на C:10, M:85, Y:0 и K:0. Последният щрих е да приложите стил Gradient Overlay към текста с цветове от сиво до бяло с режим на смесване Linear Burn, Opacity 75% и ъгъл 90 градуса. Нека да разгледаме илюстрацията:
10 стъпка
Сега нека добавим слой с отражение към текстовия слой. За да направите това, дублирайте буквите си, растеризирайте ги (бърз начин да направите това: създайте празен слой под текстовия слой, изберете текстовия слой и новосъздадения празен слой и натиснете Ctrl + E, за да ги обедините в един) и направете Edit > Transform > Flip Vertical. Поставете копие непосредствено под надписа. За да завършим идеята, просто трябва да премахнем отражателния слой и това може да стане чрез добавяне на маска към слоя: Layer > Layer Mask > Hide All, която след това трябва да се запълни с градиент от черно към бяло с помощта на инструмента за градиент (G).
11 стъпка
Последният щрих ще бъде да приложите чифт ярки бели звезди от комплекта Stars Brush върху текста. Повторете чертежа по-долу, като не забравяте да намалите непрозрачността на слоя до 85%.
12 стъпка
Сега нека поставим думата "кафе" малко вдясно и под "Виолет". За да направите това, можете да използвате произволен шрифт Script (например взех Edwardian Script). След това добавете стил Gradient Overlay с цветове от C:10, M:85, Y:0, K:0 до C:15, M:55, Y:5, K:0. След това всички слоеве, свързани с така нареченото фирмено лого, трябва да бъдат поставени в отделна папка, наречена „Лого“.
Композитни слоеве
13 Стъпка
Нека настроим Layer Comps, за да можем да съхраняваме две различни версии на дизайн в два отделни файла с помощта на автоматизиран скрипт.
За да започнете, активирайте палитрата Layer Comps (Windows > Layer Comps). Уверете се, че сте включили видимостта на папката „Лого“ и в палитрата Layer Comps щракнете върху бутона New, за да създадете нов слой за композиция. Преименувайте го на „Корица“. След това скрийте папката „Лого“ (изключете видимостта) и създайте нов композиционен слой, наречен „Вътрешен“. Можете да превключите видимостта на получените слоеве, за да сте сигурни, че всичко е направено правилно.
14 Стъпка
Сега отворете File > Scripts > Layer Comps to Files. В диалоговия прозорец изберете типа PSD файл, отворете папката, в която искате да запазите вашите файлове, дайте на имената им отличителен префикс като „Violet“ и оставете останалите настройки по подразбиране. След като щракнете върху Изпълнение, Photoshop автоматично ще създаде файл за всеки слой на композицията и имената на файловете ще съдържат имената на тези слоеве.
Добавяне на графични елементи. Чаша кафе
15 стъпка
Отворете снимката с чаша кафе във Photoshop, щракнете двукратно върху слоя „Фон“ в палитрата със слоеве, за да я направите редактируема. След това използвайте Pen Tool (P) в режим Paths, за да очертаете очертанията на чашата. След това щракнете върху бутона Изключване на припокриващи се области на пътя в панела с опции на инструмента в горната част на екрана и проследете вътрешния кръг на манипулатора. След това, след като сте готови с пътеките, отидете на Layer > Vector Mask > Current Path, за да конвертирате пътя във векторна маска и да извлечете чашата от фона.
16 стъпка
Сега можете да прехвърлите чашата във вашия работен документ. Ако желаете, този слой може да бъде растеризиран (щракнете с десния бутон върху слоя в палитрата със слоеве и изберете Rasterize Layer). Наименувайте слоя чаша „чаша за кафе“.
След това, като използвате техниката, описана в стъпка 10, добавете отражение към чашата, но този път с помощта на голяма, мека черна четка (Brush Tool, B) в режим на маска, скрийте ъгловите ръбове на отражението, както е показано на изображението По-долу.
17 стъпка
Като малък детайл ще добавим сянка към чашата. С помощта на инструмента Ellipse Tool изтеглете наситена черна елипса между чашата и нейното отражение. След това отворете Filter > Blur > Gaussian Blur, в прозореца, който се появява, задайте радиуса на размазване на 35 px и щракнете върху Ok.
18 стъпка
За да поддържате лилавото настроение, използвайте коригиращ слой за фотофилтър в горната част на чашата (бутон за нов запълващ или коригиращ слой в долната част на палитрата със слоеве). Уверете се, че е добавен в режим Clipping Mask и променете неговия нюанс на C:40, M:80, Y:0, K:0, плътност, зададена на 25%. След това преместете всички слоеве с чашата в отделна група, наречена „Чаша за кафе“.
Стъпка 19
Сега нека визуализираме малък поток от аромат, идващ от нашата чаша кафе. Отворете димната снимка и щракнете двукратно върху слоя „Фон“, за да го поставите в режим на редактиране. След това натиснете Ctrl + I, за да обърнете цветовете на изображението. В прозореца с настройки Hue/Saturation (Ctrl + U), задайте стойността Hue на -92, за да придадете на мъглата лилав оттенък.
Сега нека извлечем дима от снимката. В палитрата с канали (Прозорец > Канали), дублирайте червения канал, натиснете Ctrl + A, Ctrl + C, за да запазите копието в клипборда, след това изтрийте дублирания слой, върнете се към RGB канала, за да върнете изображението към оригинала цвят.
В палитрата на слоевете изберете слоя с мъглявината и отидете на Layer > Layer Mask > Hide All, след което щракнете с Alt върху маската, за да я направите видима. След това поставете върху маската изображението, което сте копирали в клипборда преди. След като отидете на оригиналната си наслоена миниатюра, ще видите как работи тази техника.
20 стъпка
Плъзнете слоя дим върху нашия основен документ. След това го растеризирайте и го наречете „Дим“. Просто го поставете върху чаша кафе. Добавете маска към този слой и го запълнете с градиент от бяло към черно, за да скриете горната част на аромата на кафе.
Накрая дублирайте слоя „Smoke“, поставете копието върху оригиналния слой и отидете на Filter > Blur > Gaussian Blur с радиус на размазване от около 35%. Това ще създаде хубава светеща аура за слоя дим.
21 стъпка
Сега, за да направите чашата още по-хипнотизираща, добавете някои акценти и звезди, както направихме за фона в стъпки 7 и 8. След това поставете всички слоеве, свързани с чашата, включително дима, звездите и акцентите, в отделен папка, наречена „Кафе“.
Експортиране на графични елементи
22 стъпка
В момента имаме две важни групи със слоеве: „Кафе“ и „Лого“. И двете групи представляват допълнителни графични елементи, които по-късно ще трябва да импортираме в InDesign. Така че сега трябва да ги подготвим и експортираме в отделни файлове. Да започнем с групата “Лого”. Дублирайте го (плъзнете групата до бутона New на палитрата със слоеве), отидете до този дубликат и натиснете Ctrl + E, за да го растеризирате. Направете същото с групата „Кафе“.
23 стъпка
Изберете слоя „Копиране на лого“, след това щракнете с десния бутон върху него и изберете Дублиране на слоя. В диалоговия прозорец, който се отваря, дайте му ново име и изберете Нов в полето Целеви документ. Това ще създаде копие на слоя в нов документ със същите размери като оригинала. С помощта на инструмента за изрязване премахнете празните области на копието и запазете документа, като му дадете някакво информативно име като „Logo.psd“. Повторете същия процес със слоя "Coffee copy".
Изходни файлове
24 стъпка
Е, това е всичко за Photoshop за днес. На този етап трябва да имате следните ключови елементи, за да можете да ги използвате във втората част на урока: два PSD файла с фон (един за корицата, един за вътрешните страници), PSD файл с лого на прозрачен фон и PSD файл с чаша кафе също на прозрачен фон.
Вече имаме всичко необходимо, за да създадем готов за печат документ в InDesign, включително информация, предоставена от клиента.
В този урок ще създадем оригинален бутон за сайта.
Етап 1.
Създайте нов документ, задайте цвета на фона на: #f7f5f6. Активирайте инструмента Инструмент за заоблен правоъгълник (Правоъгълник със заоблени ъгли) с радиус на заобляне от 10 пиксела. Задайте цвета на предния план на #2f88bb. На нов слой създайте малък заоблен правоъгълник.
Стъпка 2.
Сега отидете на Стил на слояи приложете към начертания правоъгълник Външен блясъкИ Вътрешен блясъксъс следните настройки:
Стъпка 3.
Докато държите натиснат клавиша
Активирайте инструмента Елиптичен инструмент за маркиране(Овална зона за избор) и докато държите натиснат клавиша
Стъпка 4.
Създайте нов слой и използвайте инструмента Елиптичен инструмент за маркиране(Овална зона за избор), създайте елипса, както е показано на фигурата. Сега използвам инструмента Градиент(Градиент), стил - от основен до прозрачен и създайте градиентно запълване по овалната селекция. Този градиент ще действа като сянка.
Стъпка 5.
След това задръжте клавиша
Стъпка 6.
Задайте непрозрачността на слоя с бутона на 32%. Докато държите натиснат клавиша
Стъпка 7
Запълнете създадената селекция с бяло и променете непрозрачността на 11%.
Стъпка 8
Сега създайте нов слой и начертайте кръг, както е показано по-долу.
Стъпка 9
В този урок за Photoshop ще разгледаме как да направите стилно навигационно меню за уебсайт.
В този урок за Photoshop ще разгледаме как да направите стилно навигационно меню за уебсайт.
Краен резултат
Да започнем урока по Photoshop
Създайте документ с размери → 500 х 200 (Файл > Нов(Файл > Нов / Клавишна комбинация "Ctrl+N")) и го запълнете със сив цвят ( Инструмент за кофа за боядисване(Инструмент за запълване / клавиш "G")).
Следваща употреба Инструмент за правоъгълна маркировка(Правоъгълна маркировка / клавиш "M") и създайте селекция нещо подобно (съжалявам за различните цветове на фона в това и предишното изображение, просто го игнорирайте): ↓
Опции за градиент: ↓
Падаща сянка(Сянка). ↓
Удар(Удар). ↓
Вътрешна сянка(Вътрешна сянка). ↓
Маркирайте менюто си, като задържите Ctrl Изберете > Промяна > Договор(Избиране > Промяна > Свиване), 2 пиксел.
Създайте нов слой ( Нов слой(Нов слой / Клавишна комбинация "Ctrl+Shift+N")) и запълнете селекцията с бяло ( Инструмент за кофа за боядисване(Инструмент за запълване / клавиш "G")), сега използвайки трансформация ( Ctrl+T), направете този слой да покрива половината от нашето меню.
промяна непрозрачност(непрозрачност) включено 25% .
Нека поработим върху бутоните в менюто.
Създайте селекция, подобна на тази на изображението по-долу, запълнете я с произволен цвят. ↓
Падаща сянка(сянка), Градиентно наслагване(Градиентно наслагване).
Опции за градиент: ↓
Маркирайте вашия бутон, като задържите Ctrlкато щракнете с левия бутон върху изображенията в панела със слоеве. След това тръгваме Изберете > Промяна > Договор(Избиране > Промяна > Свиване), 2 пиксел.
Създайте нов слой и запълнете селекцията с бяло и използвайте Transform ( Ctrl+T), направете този слой да покрива половината от нашия бутон.
Сега смени непрозрачност(непрозрачност), така че едва да забележите белия слой. поставям 6% .
В този урок ще научите как да създадете просто, стилно падащо меню с помощта на Photoshop.
Етап 1
Отворете Photoshop и натиснете Ctrl+N, за да създадете нов документ с параметрите, показани на екранната снимка по-долу. Активиране на решетката Изглед - Покажи - Мрежа(Изглед - Показване - Мрежа) и прилепване към мрежата Изглед - Прилепване към - Мрежа(Изглед – Прикачване към – Решетка). Засега имаме нужда от мрежа с 5 px клетки.
Да продължим Редактиране - Предпочитания - Водачи, Решетка и Срезове(Редактиране - Настройки - Водачи, мрежа и фрагменти) и намерете параметрите на мрежата. За Решетка Всяка(Редове всеки друг) въведете 5 и за Подразделение(Вътрешно разделение по) - 1. Също така задайте цвета на мрежата на #a7a7a7. Когато приключите, щракнете върху OK.
Решетката помага много в работата ви, съветвам ви да не я пренебрегвате. Отваряме и информационния панел Прозорец - Информация(Прозорец - Информация).
Стъпка 2
Задайте цвета на предния план на #3f8ecf, вземете Инструмент за заоблен правоъгълник(Заоблен правоъгълник) (U) и задайте радиуса му на 20 px. Създайте правоъгълник с размери 160 x 40 px и го дублирайте (Ctrl+J). Изберете дубликата и променете цвета му на бял. Активирате Инструмент за правоъгълник(Правоъгълник) (U), натиснете бутона Области на пресичане на формата(Област на пресичане на формата) на горния панел и нарисувайте квадрат с размери 40 x 40 px, както е показано на третата екранна снимка. Преминете към панела със слоеве и щракнете двукратно върху слоя с белия правоъгълник, за да отворите прозореца Layer Style.
Ние кандидатстваме Вътрешен блясък (Вътрешен блясък) Градиентно наслагване(Gradient Overlay) и Удар(Stroke) с настройки като на екранната снимка по-долу.
Стъпка 3
Изберете синия правоъгълник и го дублирайте отново (Ctrl+J). Изберете дубликата, променете цвета му на бял и активирайте Инструмент за правоъгълник(Правоъгълник) (U). Натисни бутона Области на пресичане на формата(Shape Intersection Area) на горния панел и нарисувайте правоъгълник с размери 120 x 40 px, както е показано по-долу.
Отидете до панела със слоеве, щракнете с десния бутон върху слоя с белия правоъгълник, създаден в предишната стъпка, и изберете Копиране на стила на слоя(Копирайте стила на слоя). Отидете до белия правоъгълник, който създадохме в тази стъпка, щракнете с десния бутон върху него и изберете Поставете стила на слоя(Поставяне на стил на слой).
Стъпка 4
Да вземем Тип инструмент(Текст) (T) и напишете текста върху бутона (цвят #a1d8ff). След това отворете прозореца Стил на слоя(Layer Style) и приложете стилове на слоя към текста, както е показано по-долу.
Стъпка 5
Нека се върнем към синия правоъгълник, който създадохме във втората стъпка. Отваряне Прозорец за стил на слой Падаща сянка(Сянка). Дублирайте този правоъгълник (Ctrl+J), изберете копието, отворете прозореца Стил на слоя(Layer Style) и редактирайте стила на слоя, както е показано по-долу. След това изберете всички правоъгълници, създадени досега, и ги групирайте (Ctrl+G). Ето как ще изглежда бутонът, когато падащото меню е скрито. Ще добавим финалните щрихи в последната стъпка.
Стъпка 6
Преминете към панела със слоеве, щракнете с десния бутон върху създадената група и изберете Дублирана група(Дублирана група). Изберете копието на групата и го спуснете точно под оригинала, както е показано на екранната снимка.
Стъпка 7
Сега нека се съсредоточим върху дублиращата се група. Първо, нека коригираме текста. Променете цвета му на #b4b4b4, след това щракнете с десния бутон върху слоя и изберете Изчистване на стила на слоя(Clear Layer Style). Отваряне на прозореца Стил на слоя(Layer Style) и добавете стил на слоя към текста Падаща сянка(Сянка).
Стъпка 8
Задайте цвета на предния план на #f5f5f5, вземете Инструмент за заоблен правоъгълник(Заоблен правоъгълник) (U) и задайте радиуса му на 20 px. Създайте правоъгълник с размери 160 x 35 px и го поставете под бутона, както е показано на фигура 1. След това го дублирайте (Ctrl+J) и променете цвета на копието на бял. Активирате Инструмент за правоъгълник(Правоъгълник) (U), натиснете бутона Области на пресичане на формата(Област на пресичане на формата) на горния панел и нарисувайте правоъгълник с размери 40 x 35 px, както е показано на фигура 2.
Отидете до панела със слоеве и намалете Напълнете(Запълнете) този слой до 0%. След това отворете прозореца Стил на слоя(Layer Style) и приложете стила на слоя Вътрешна сянка(Вътрешна сянка).
Стъпка 9
Активирайте заобления правоъгълник, който създадохме в началото на предишната стъпка и го дублирайте (Ctrl+J). Активирайте копието и го преместете по-нагоре в панела със слоеве (Shift+Ctrl+]). Намалете Fill до 0%, отворете прозореца Layer Style и приложете стилове на слоя.
Стъпка 10
Активирайте втория правоъгълник, създаден в стъпка осма, и го дублирайте (Ctrl+J). Преместете копието по-горе (Shift+Ctrl+]), след това копирайте стиловете на слоя от предишната стъпка и ги поставете върху този правоъгълник.
Стъпка 11
Сега нека се фокусираме върху дясната страна на бутона, създаден в предишната стъпка. Задайте цвета на предния план на #ebebeb, вземете Инструмент за правоъгълник(Правоъгълник) (U) и създайте правоъгълник с размери 10 x 5 px, както е показано по-долу.
След това щракнете върху бутона Добавете към областта на формата(Add to Shape Area) и непосредствено над предишния начертайте нов правоъгълник с размери 5 x 10 px, както е показано на фигура 2. Уверете се, че създаденият слой е активен и натиснете Ctrl+T. Завъртете стрелката до -45 градуса и натиснете Enter.
Отидете до панела със слоеве, задръжте натиснат клавиша Ctrl и щракнете върху миниатюрата на слоя с правоъгълника, създаден в предишната стъпка. В резултат на това трябва да се появи селекция около формата. Без да премахваме селекцията, ние вземаме Инструмент за преместване(Преместете) (V) и проверете дали слоят със създадената стрелка все още е активен.
Преминете към горния панел и натиснете бутоните Подравнете вертикалните центрове(Подравнете центровете вертикално) и Подравнете хоризонталните центрове(Подравнете центровете вертикално), както е показано на петата снимка. Отваряне Стил на слоя(Layer Style) и приложете стилове на слоя за стрелката.
Стъпка 12
Да вземем Тип инструмент(Текст) (T) и напишете всяка дума върху бутона, както е показано по-долу (цвят #b4b4b4). След това приложете стил на слоя към текста Падаща сянка(Сянка). Изберете текстовия слой и всички слоеве, създадени в последните четири стъпки, и ги групирайте (Ctrl+G).
Стъпка 13
Дублираме групата, създадена в предишната стъпка четири пъти. Поставете копията, както е показано на фигурата по-долу, и променете текста на всеки бутон.
В този урок за Photoshop ще ви запознаем с процеса на създаване на просто падащо меню.
Визуализирайте готовото изображение
Етап 1
Отворете Photoshop и натиснете Ctrl+N, като по този начин създадете нов документ. Въведете настройките по-долу и щракнете върху OK. Разрешаване на показване на мрежа: Изглед > Покажи > Решетка (Изглед > Покажи > Решетка), а също така активирайте прихващане на мрежа: Изглед > Прилепване към...> Линии на мрежата (Изглед > Покажи > Решетка). Засега ще ни бъдат достатъчни линии на всеки 5 пиксела. Отидете в менюто Редактиране > Настройки > Ръководства, решетка и срезове (Редактиране > Предпочитания > Ръководства, решетка и срезове) и обърнете внимание на секцията Мрежа. Въведете стойност 5 в полето Gridline Every и стойност 1 в полето Subdivision. Накрая задайте цвета на мрежата на #a7a7a7 и щракнете върху OK.
Не се плашете от дебелата мрежа, която се появява върху платното. Той е необходим, за да улесни работата ви. Освен всичко друго, ще активираме и показването на информационния панел: Прозорец > Информация (Прозорец > Информация), за да проследявате позицията на вашите елементи и форми в реално време.
Стъпка 2
Задайте цвета на предния план на #3f8ecf, изберете Rounded Rectangle Tool и задайте радиуса на 20 px. Създайте векторна пътека 160x40 и я дублирайте: Control + J. Изберете копието и го направете бяло. Превключете към инструмента Rectangle Tool, щракнете върху бутона Intersect в горната лента с инструменти и начертайте векторна пътека 40x40 px, както е показано на третото изображение по-долу. Нека отидем в палитрата със слоеве и щракнете двукратно върху белия контур, за да отворите прозореца със стилове на слоя.
Приложете Inner Glow и Stroke, след което въведете параметрите, показани на следващите илюстрации.
Стъпка 3
Изберете отново синия заоблен правоъгълник, създаден в предишната стъпка, и го дублирайте: Control + J. Изберете копието, направете го бяло и превключете на инструмента Rectangle. Щракнете върху бутона Пресичане на горния панел и нарисувайте векторна пътека с размери 120x40 px, както е показано на второто изображение по-долу.
Да се върнем към палитрата със слоеве. Щракнете с десния бутон върху белия контур, създаден в предишната стъпка, и изберете „Копиране на стила на слоя“. След това щракнете с десния бутон върху белия контур, създаден в началото на тази стъпка, и изберете „Поставяне на стил на слой“.
Стъпка 4
Изберете инструмента Type Tool и въведете вашия текст, както е показано на следното изображение. Задайте цвета на текста на #a1d8ff, след това отворете прозореца Layer Style и въведете настройките, показани на изображенията по-долу:
Стъпка 5
Връщане към синия заоблен правоъгълник, създаден във втората стъпка, отваряне на прозореца Layer Styles и въвеждане на настройките по-долу. Дублирайте тази форма: Control + J, изберете копието, отворете отново прозореца Layer Style и приложете Drop Shadow с настройките по-долу. Изберете всички форми, създадени досега, и ги групирайте: Control + G. Това ще бъде вашето затварящо падащо меню. В последната стъпка ще го прецизираме още малко.
Стъпка 6
Да се върнем към палитрата със слоеве. Щракнете с десния бутон върху групата, създадена в предишната стъпка, и изберете „Дублиране на група“. Изберете новосъздадената група, плъзнете я отдолу и я позиционирайте, както е показано на изображението по-долу.
Стъпка 7
Нека продължим да работим с групата, създадена в предишната стъпка. Първо, трябва да редактирате текста тук. Променете цвета на #b4b4b4, след това щракнете с десния бутон върху него (в палитрата със слоеве) и изберете „Изчистване на стила на слоя“. Отворете прозореца Layer Style и приложете Drop Shadow към сивия текст с настройките по-долу.
Стъпка 8
Задайте цвета на предния план на #f5f5f5, изберете Rounded Rectangle Tool и задайте радиуса на 20 px. Създайте векторна пътека с размери 160x35 px, като я позиционирате, както е показано на първото изображение по-долу, след това създайте дубликат от нея: Control + J. Изберете дубликата и го направете бял. Превключете към инструмента Rectangle Tool, щракнете върху бутона Intersect в горната лента с инструменти и нарисувайте векторна пътека с размери 40x35 px, както е показано на второто изображение по-долу.
Нека се обърнем към палитрата със слоеве. Намалете непрозрачността на запълването на този контур до 0%, след това отворете прозореца Layer Styles и приложете настройките, показани на изображенията по-долу:
Стъпка 9
Изберете отново заобления правоъгълник, създаден в началото на предишната стъпка, и го дублирайте (Control + J). Изберете копието, преместете го напред: Shift + Control + ], намалете непрозрачността на запълване (Fill) до 0%, отворете прозореца Layer Style и въведете следните настройки:
Стъпка 10
Изберете отново втората пътека, създадена в стъпка 8, и я дублирайте: Control + J. Изберете копието, преместете го отпред: Shift + Control + ]. След това отворете прозореца Layer Styles и коригирайте настройките на стила на слоя Shadow, както е показано по-долу.
Стъпка 11
Нека работим върху дясната страна на формите, създадени в последните стъпки. Задайте цвета на предния план на #ebebeb, изберете инструмента Rectangle Tool, създайте векторна пътека 10x15 px и я позиционирайте, както е показано на първото изображение по-долу. Изберете този малък правоъгълник. Щракнете върху бутона Добавяне към селекцията в горната лента с опции и начертайте друга векторна пътека 10x15, както е показано на второто изображение по-долу. Уверете се, че последният път, който сте създали, все още е активен, натиснете Control + T, завъртете го на 45 градуса и натиснете Enter.
Да преминем към палитрата със слоеве. Докато държите Ctrl, щракнете върху иконата на слоя с векторната пътека, създаден в предишната стъпка. В резултат на това неговата неактивна разпределена област ще бъде заредена. Сега изберете инструмента за избор и се уверете, че слоят с векторната пътека - стрелката - е активен.
Кликнете върху бутоните „Подравняване на вертикални центрове“ и „Подравняване на хоризонтални центрове“ в горната лента с опции, за да подравните стрелката си, както е показано на петото изображение по-долу. След това отворете прозореца Layer Styles и приложете следните стилове с настройките по-долу.
Стъпка 12
Изберете инструмента за писане и въведете прост текст, както е показано на изображението по-долу. Задайте цвета на #b4b4b4, след това отворете прозореца Layer Style и приложете Shadow с настройките, показани на изображението. Изберете този нов текст с елементите, създадени в последните четири стъпки, и го групирайте всички: Control + G.
Стъпка 13
Създайте още четири копия на последната група, която сте създали. Подредете новите групи, както е показано по-долу, и променете етикетите.
Стъпка 14
Обърнете внимание на подточката от менюто с надпис „Уроци“, отворете прозореца „Стилове на слоя“ за формата на стрелката и въведете следните параметри:
Стъпка 15
Изберете текста „Уроци“ и променете цвета му на #2c95dd. Също така изберете сивия заоблен правоъгълник под текста, отворете прозореца Layer Style, приложете Gradient Overlay с настройките, показани по-долу.
Стъпка 16
За да завършим последните стъпки, ще ни трябва решетка с размер на клетката 1 пиксел. Затова отидете на Редактиране > Предпочитания > Ръководства, решетка и резени и въведете стойност 1 в полето „Решетка на всяка”. Задайте цвета на предния план на #a1d8ff, изберете инструмента Rectangle Tool, създайте квадрат с размер 6px и го позиционирайте, както е показано на първото изображение по-долу. След това изберете инструмента Direct Selection Tool и обърнете внимание на долната част на създадения векторен път. Изберете дясната опорна точка и я преместете 3 px наляво. Превключете към инструмента за изтриване на опорна точка и щракнете върху оставащата долна опорна точка, за да я изтриете. В резултат на това вашият квадрат трябва да се превърне в триъгълник!
Завършено изображение
