Как да направите красиво меню за група VKontakte. Как да направите красиво меню в група VKontakte Създаване на меню във Photoshop
Нека да разберем как да направим триизмерно хоризонтално меню за сайта. Първо създайте документ с ширина 1600 пиксела и дължина 2000 пиксела.
Нека създадем нов слой.
В страничната лента с инструменти изберете Rectangular Marquee.
Сега оформяме работното пространство за бъдещото меню.
Използвайте инструмента за запълване, за да запълните избраната област с цвят. За да опростя работата ви - #0391ff, това е цветът, който използвах. Как да промените цвета, ще намерите тук.
Сега нека се опитаме да намерим средата на празното меню. За да направите това, изберете инструмента "преместване" и щракнете върху слоя с детайла.
Сега виждаме средата и можем сами да я маркираме. Да знаем местонахождението й все пак ще ни бъде полезно.
Задайте спомагателна линия в средата на документа. За да направим това, ще трябва да преместим курсора до линийката, разположена в лентата с инструменти на резервоара, и да я издърпаме.
В страничната лента с инструменти изберете „Текст“ и напишете името на бъдещите секции.
Например, избрах темата за мебели и реших да разработя меню за сайта за следните раздели:
- У дома
- Кухни
- спални
- Тапицирани мебели
- коридори
- Стени
- Относно компанията
- Контакти
Пишем на ред. Оставете интервали между всяка секция.
Размер на шрифта arial 18 пиксела. Ще намерим тези параметри в панела "Текст".
Сега, използвайки гореспоменатия инструмент "Преместване", задаваме текста в средата на работния документ, като се фокусираме върху спомагателната линия.
Сега нека добавим малко обем към нашето меню.
Нека разделим бутоните. За целта трябва да изберем инструмента "линия" от лентата с инструменти. Взимаме цвят малко по-тъмен от полето на нашето меню. Да кажем #0179d6. Начертайте хоризонтална линия с дебелина 1 пиксел, като задържите клавиша Shift. Опитваме се да го поддържаме прави. От границата до границата на синята зона. Ако имате проблеми с това, можете да го преоразмерите с помощта на инструмента за преместване.
След това растеризирайте получената линия.
Сега трябва да дублираме получения елемент. За да направите това, в прозореца на слоевете щракнете върху слоя с формата с левия бутон на мишката и изберете „Създаване на дублиран слой“.
Кликнете върху получения слой и изберете Опции за смесване. Имаме нужда от раздела Color Overlay. Взимаме цвят малко по-светъл от полето на менюто. Например #6bbeff.
Сега, като използвате инструмента за преместване, плъзнете слоя далеч от снимката. Слагаме ги една до друга. За да направите това, ще трябва да увеличите изображението. Фигурите трябва да бъдат поставени една до друга, така че да няма празнина между тях.
Ето какво имаме. Копчето е станало обемно. Създадохме имитация на светлина и сянка. Сега нека направим същото с останалите бутони.
Дублирайте слоевете, за да намалите времето за работа.
Томът се появи, но нещо липсва. Нека се опитаме да добавим обем към лентата с менюта.
Нека създадем хоризонтални линии, използвайки същия метод, използвайки цветовете #0063af и #78c2fb.
Да ги сложим отгоре. Ето какво имаме.
Просто обемно меню за сайта е готово!
Добър ден скъпи посетители. Искате да научите как да направите красиво меню за вашата група VKontakte, но не знаете как да го направите. Тогава обучителният видео урок „Как да създадете меню във VKontakte“ ще ви помогне да създадете това меню стъпка по стъпка.
Този урок е продължение на предишния видео урок „Създаване на група VKontakte“, който можете да гледате. Нуждаем се също от Adobe Photoshop, за да създадем менюто. Можете да научите как да инсталирате и работите с тази програма от раздела.
Можете също да изтеглите шаблоните, които се използват в този видео урок https://yadi.sk/d/EFuM8IjjO3zVUA.
1. Създаване на меню във Photoshop
В програмата Photoshop отидете в раздела файл, щракнете върху създаване или натиснете Ctrl + N. Нека създадем нов документ с ширина 600 пиксела, височина 420 пиксела и разделителна способност 100 пиксела на инч. След това щракнете върху файла, за да го отворите, и изберете произволно изображение от компютъра.
Изберете инструмента Rectangular Marquee Tool или клавиша M на клавиатурата, за да изберете изображението. След това щракнете върху раздела за редактиране в менюто и изберете копиране или клавишната комбинация Ctrl + C. Преминаваме в нашия създаден документ и избираме редактиране в менюто за поставяне или комбинация от бутони Ctrl + V.
Изберете инструмента за преместване или клавиша V. В менюто за редактиране изберете свободната трансформация или клавишите Ctrl + T. Чрез плъзгане на един от ъглите, докато държите натиснат клавиша Shift, за да промените размера равномерно, ние задържаме нашата снимка.
1.1. Създаване на бутони
Изберете инструмента за правоъгълник или клавиша U. Изберете цвят и след това създайте бутон. В страничната лента вдясно можете да зададете параметрите за радиуса на заобляне. Нека направим 5 пиксела. В раздела Preview се уверете, че помощните елементи са активирани. Нека преместим нашия бутон в средата на картината.
Кликнете върху слоя с бутони, щракнете с десния бутон върху опциите. Приложете ефект на сянка, за да подчертаете по-добре бутона на светъл фон. С помощта на инструмента за преместване, като държите натиснат клавиша Alt на клавиатурата, плъзнете бутона малко по-надолу, като по този начин го копирате. По този начин създаваме трети бутон, премествайки го на такова разстояние, за което ще ни разкажат помощните елементи. Чрез задържане на клавиша Ctrl селектираме слоевете, избираме инструмента за преместване и ги поставяме в центъра на документа.
Изберете инструмента за хоризонтален текст или клавиша T. След това натиснете левия бутон на мишката, не забравяйте да бъдете извън бъдещите бутони. Напишете текста, от който се нуждаем, преместете текста приблизително в центъра на бутона или Ctrl + V. След това даваме имена на други бутони.
Избираме режещия инструмент или клавиша C. Нека изберем създадените от нас бутони един по един. Изберете нашия първи бутон и посочете един от ъглите. В този случай иконата за рязане трябва да остане непроменена. След това изберете втория и третия бутон. Кликнете върху менюто с файлове и запазете документа на вашия компютър. След това щракнете върху запазване за уеб. Запазваме бутоните на компютъра.
2. Редактиране на менюто във VKontakte
Да отидем в нашата група VKontakte. След аватара на общността отиваме в групата за статистика. В адресната лента на браузъра има номера на общността, те са точно това, което е необходимо за по-нататъшно редактиране на групата. За да редактираме групата ни е необходима следната връзка, която трябва да копирате https://vk.com/pages?oid=-XXX&p=Име_на_страница
Вместо надпис на страница, той може да създаде произволно име за бъдещата ни страница. Да го наречем например групово меню. Натиснете молива и отидете в режим на уики маркиране. Сега можете да добавяте снимки, които току-що сте създали в Adobe Photoshop. Запазваме страницата и натискаме бутона за преглед и вижте как изглежда менюто ни. Ако забележите, че бутонът е много малък и също така има интервали между бутоните.
Превключете към режим на визуално редактиране. Щракваме последователно върху всеки бутон и избираме размера на бутоните, ширината е 610 пиксела, а височината се подравнява автоматично. Това е най-високата стойност в контакт.
Отстраняваме проблеми между бутоните. За да направите това, отидете в менюто за редактиране и във визуалния редактор напишете в края на всеки запис; nopadding. Копирайте този текст и го поставете в останалите снимки. Кликнете, за да запазите страницата и вижте какво имаме, като щракнете върху бутона за визуализация. Сега бутоните ни станаха едно.
В този урок ще създадем оригинален бутон за сайта.
Етап 1.
Създайте нов документ, задайте цвета на фона на #f7f5f6. Активирайте инструмента Инструмент за заоблен правоъгълник (Правоъгълник със заоблени ъгли) с радиус на заобляне от 10 пиксела. Задайте цвета на предния план на #2f88bb. На нов слой създайте малък заоблен правоъгълник.
Стъпка 2
Сега отидете на Стил на слоя (Стилове на слоя)и кандидатствайте за начертан правоъгълник Външен блясък (Външен блясък)и Вътрешен блясък (Вътрешен блясък)със следните настройки:
Стъпка 3
Задържане на клавиш
Активирайте инструмента Инструмент за елиптична маркировка(Овална зона за избор) и задръжте натиснат клавиша
Стъпка 4
Създайте нов слой и използвайте инструмента Инструмент за елиптична маркировка(Овална зона за избор), създайте елипса, както е показано. Сега използвам инструмента Градиент(Градиент), стилизирайте от преден план към прозрачен и създайте градиентно запълване върху овалната селекция. Този градиент ще действа като сянка.
Стъпка 5
След това задръжте клавиша
Стъпка 6
Задайте непрозрачността на слоя с бутона на 32%. Задържане на клавиш
Стъпка 7
Запълнете създадената селекция с бяло и променете непрозрачността на 11%.
Стъпка 8
Сега създайте нов слой и начертайте кръг, както е показано по-долу.
Стъпка 9
Тази статия ще бъде подробно ръководство и ще ви кажа как да направите меню за група VKontakte. Красиво проектираното групово меню на VK допринася за реално увеличаване на посетителите и ръст на продажбите на сайта.
Здравейте скъпи читатели. Нека ви кажа днес как да направите красиво меню за група VKontakteи напълно безплатно. Между другото, след като сте се научили как да създавате такива теми, можете да спечелите малко от това -))). Вече нито един търговски сайт не работи без създаване на собствена общност в социалните мрежи, особено VK, което гарантирано ще ви помогне да привлечете нови клиенти, както и да популяризирате вашия бизнес.
Но ако вашата общност не е привлекателна и как е всеки, който иска да остане там? Мисля че никой!!! Така че нека украсим нашите групи с качествен дизайн и да се научим как да го правим много бързо. Преди да започнете да създавате графики и нашето бъдещо меню, трябва да инсталирате Photoshop на вашия компютър за по-нататъшно изрязване на снимки. Мнозина ще попитат защо изобщо трябва да изрязвате снимки. Въпросът тук е, че за всяка връзка към менюто ще трябва да създадем отделна лента от общия банер.
Днес има няколко вида създадено меню:
- Отворен с активни точки;
- Затворено като фиксирана публикация;
- С отделни картинки или обща съседна снимка на банера и менюто.
Същността на създаването на двете опции е една и съща. Само основната разлика е в допълнителни елементи и типове записи и тази статия ще бъде разгледана по-подробно в тази статия.
Работата с менюто ще ни помогне уики маркиране, който днес е вграден в текстовия редактор на VKontakte. Той се различава от обичайния по това, че ще използва стандартни команди за показване на определена картина и вмъкване на връзки към необходимите елементи. Самото уики маркиране ви позволява да вмъкнете код за показване на изображения, видеоклипове и други елементи.
VK група затворено меню
В този случай ще наблюдаваме вляво от аватара на основната група хипервръзка под формата на надпис „меню на групата“, при щракване ще се отвори нашето меню с активни елементи и изображения.
Менюто ще изглежда така:
Отваряне на менюто на групата (закачени кадри)
Долната линия е да създадете вече отворени елементи от менюто, които ще се показват в описанието на самата група, където обикновено се показва според всички условия. Нашата снимка ще бъде приложена към описанието, което ще подготвим предварително и ще го свържем към страницата, на която ще имаме активни артикули. Това меню стана много популярно напоследък и е търсено сред клиентите. Те изглеждат така:
Как да направите красиво меню за група VKontakte: инструкции стъпка по стъпка
Така че, на първо място, ще трябва да създадем основния аватар на групата, който ще поставим вдясно и крайния край на нашето меню под формата на банер.
- За аватар 200х332 пиксела;
- За банер на главното меню 395x282 пиксела.
Както можете да видите, височината на изображенията е различна и това е направено така, че изображенията да не се движат по височина и да са на едно ниво, тъй като височината на името и статуса на общността отнема около 50 px и ще ни трябва за да премахнете тази стойност от височината на менюто.
За да стане ясно, ако височината на аватара на основната група е 332, тогава изваждаме 50 от него и получаваме височината на главното меню, равна на 282. Ако размерите нямат значение, тогава височината може да бъде зададена произволно.
Следващата стъпка след създаването на общността ще бъде настройка на материали и тук трябва да забраним на участниците да създават допълнителни страници и блокове, а само да пишат на стената. За да направите това, ще трябва да отидете в секцията под аватара на групата, наречена „управление на общността“, където трябва да направим нашите материали „ограничени“, както е показано по-долу.
Сега нека се заемем със създаването на цялостната композиция. Разбира се, можете просто да вмъкнете снимка вместо аватар и в описанието, но нека не бъдем аматьори и да покажем как да го направите професионално, така че да е една пълноценна снимка, превръщайки се една в друга.
Нека създадем ново платно във Photoshop с размери 600x350 пиксела, което ще използваме като шаблон, като изрежем отвори в него за нашите снимки. За да работим, трябва да преведем размерите на всички елементи и линийки в пиксели и това става по следния път: „Edit-Setting-Basic“ и тук вече задаваме пикселите.
Следващата стъпка в създаването на отворено меню е да направим изрезки за банера и аватара, които след това ще получим за изтегляне. За да направите това, отидете в раздела на лявото вертикално меню и изберете рязане.
С левия бутон на мишката, както ако избирате област, трябва да изберете блоковете с необходимите ни размери и след всяка селекция натиснете бутона за изтриване „Изтриване“ и изберете 50% сиво. Такива действия ще доведат до факта, че блоковете ще бъдат с желания размер и ще бъдат подчертани в цвят, различен от основния фон.
Трябва да получите следното:
А сега просто изберете гумичката и използвайте функцията „магическа гумичка“, за да щракнете върху всеки сив блок и да получите шаблон с изрезки. В следващата стъпка избираме нашето основно изображение и го поставяме под фона и получаваме готови картинки, върху които можем да напишем текст с името на менюто или други рекламни елементи.
Отлично. След като поставите снимка на нашия дизайн, ние просто трябва да изберем „запазване за уеб“ и ще получим 2 от нашите снимки като изход. Сега се връщаме към нашата група и можем да попълним основния аватар (вертикален). Ще използваме банера за менюто малко по-късно, когато работим с кода за маркиране на wiki.
Нека създадем самото меню с активни елементи, които ще пренасочат потребителя към необходимите секции на сайт на трета страна или към албуми и директории в самата група. Ще използваме ново изображение за промяна -))).
И така, върнете се към Photoshop и създайте ново платно с размери 400x300 пиксела. След това избираме в секцията: file-place и избираме картинка за фон на менюто.
Поставяме бутоните на нашето бъдещо меню върху снимката и изрязваме картината, както направихме по-горе, като избираме необходимите блокове. След това също избираме „запазване за уеб“ и получаваме папка с нашите разфасовки. В моя случай имам 4 снимки в отделна папка.
Сега трябва да попълним снимките, разтоварени от Photoshop, в отделен албум и да се скрием от любопитни очи. След качването всяка снимка ще получи ново име и уникален идентификатор.
Моля, обърнете внимание, че трябва да имате:
- Отворени материали в "ограничен" режим;
- Включени дискусии;
- Папката със снимки е отворена за всички.
Сега остава да настроим нашата страница къде ще се показва в менюто. За да направите това, отидете на главната страница на общността и изберете свежи материали и редактирайте и извикайте „НАШЕТО МЕНЮ“.
След това трябва да вмъкнем снимките, които получихме при изрязване във Photoshop. Някой използва кодове за маркиране, но за да не поумнявам, предлагам просто да изберете да вмъкнете снимка, като щракнете върху иконата на камерата и качите една след друга една по една.
Работейки в текстов редактор, ако след зареждането на снимките щракнем върху иконата със скоби в горния десен ъгъл, трябва да видим следния код:
съвет:Важен момент след качването на изображения е да премахнете отстъпите. Това се решава чрез вмъкване на "nopadding" пред размерите на изображението.
За пояснение, какво се взема от къде е описано по-долу, но като се има предвид, че всичко ще бъде вмъкнато автоматично и не е нужно да сте умни и да отворите как някои хора пишат всяка снимка и да вземат идентификатора, тогава просто заредете и запазете.
[]
където xxxxx е идентификаторът на вашето изображение
yyyyy - ширина в пиксели (не повече от 388)
Трябва да завърши така:
Сега нашите снимки са събрани в отделен банер. И за да добавите връзка към всеки елемент, просто щракнете върху изображението с деактивирано маркиране и поставете копирания URL адрес в секцията за връзка.
И така стигаме до най-важната и последна точка в създаването на нашето меню VKontakte. Сега трябва да запазим нашата страница с изображение и да копираме адреса й. В моя случай изглежда така:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Спомнете си, че в началото на статията направихме меню за меню, което ще бъде продължение на основния ни аватар, и току-що направихме шаблон за него. Точно от това се нуждаем в момента.
Отидете на главната страница и направете следното:
Етап 1.
Вмъкваме адреса на страницата в текстовото поле за нов запис на стената, след което тя ще бъде преобразувана в линк.
Стъпка 2.
Прикрепяме изображението на нашия мъниче за менюто към записа и щракнете върху изпращане.
Стъпка #3.
Сега, след като публикувате публикацията, щракнете върху часа на създаване в долната лява част на публикацията и изберете „PIN“.
Отлично!!! Тук свършваме. Сега знаете как да създавате страхотни менюта и можете да спечелите добри пари от това. Съветвам ви да направите всичко в следния ред:
- Измисляме структура и поръчваме дизайн на изображения на менюто;
- Извършваме преоразмеряване и изрязване на всички изображения;
- Вмъкване на снимки в албуми;
- Ние редактираме всички съкращения в редактора и ги публикуваме на главните страници на групата.
В резултат на работата ще получим следното меню.
Но самото меню, когато се натисне, ще изскочи с активни връзки. Струва си да си поиграете с размерите и да се приспособите към вашия екран, но не забравяйте за дисплея на мобилни устройства.
ВАЖНО: След промяна на дизайна на VK през 2016 г. бяха направени нови промени при създаването на изображения и изисквания за изображения, за които.
Изтеглете шаблон за меню на VK група + всички източници на уроци
Надявам се, че материалът е бил полезен и сега можете лесно да разберете как да направите красиво меню за групата VKontakte. Абонирайте се за актуализации на блога и ще се видим скоро в нови публикации. Ако имате въпроси, напишете ги в коментарите и аз определено ще ви помогна.
Прилагам видео, за да затвърдя прочетеното.
В този урок за Photoshop ще ви преведем през процеса на създаване на просто падащо меню.
Завършен преглед на изображението
Етап 1
Отворете Photoshop, натиснете Ctrl+N, като по този начин създадете нов документ. Въведете настройките по-долу и щракнете върху OK. Включете дисплея на мрежата: Изглед > Покажи > Решетка (Изглед > Покажи > Решетка), а също така включете прилепването към мрежата: Изглед > Прилепване към ... > Линии на мрежата (Изглед > Покажи > Решетка). Засега ще имаме достатъчно линии на всеки 5 пиксела. Отидете в менюто Editing> Settings> Guides, Grid and Fragments (Edit> Preferences> Guides, Grid & Slices) и обърнете внимание на раздела Grid (Мрежа). Въведете стойност 5 в полето „Линия на всеки…“ (Решетка на всеки) и стойност 1 в полето „Вътрешно деление по…“ (Подразделение). Накрая задайте цвета на мрежата на #a7a7a7 и щракнете върху OK.
Не позволявайте на дебелата мрежа, която се появява върху платното, да ви плаши. Той е там, за да улесни работата ви. Освен всичко друго, ще активираме и показването на информационния панел: Прозорец> Информация (Прозорец> Информация), за да проследявате позицията на вашите елементи и форми в реално време.
Стъпка 2
Задайте цвета на предния план на #3f8ecf, изберете Rounded Rectangle Tool и задайте радиуса на 20 пиксела. Създайте векторна пътека 160x40 и я дублирайте: Control + J. Изберете копието и го направете бяло. Превключете към инструмента Rectangle Tool, щракнете върху бутона Intersect в горната лента с инструменти и начертайте векторна пътека 40x40 px, както е показано на третото изображение по-долу. Отидете до палитрата със слоеве и щракнете двукратно върху белия контур, за да отворите прозореца за стил на слоя.
Приложете Inner glow (Inner Glow) и Stroke (Stroke), след което въведете параметрите, показани на следващите илюстрации.
Стъпка 3
Изберете отново синия заоблен правоъгълник, създаден в предишната стъпка, и го дублирайте: Control + J. Изберете копието, направете го бяло и превключете на инструмента Rectangle. Щракнете върху бутона Пресичане в горната лента с инструменти и нарисувайте векторен контур с размери 120x40 px, както е показано на второто изображение по-долу.
Да се върнем към палитрата със слоеве. Щракнете с десния бутон върху белия контур, създаден в предишната стъпка, и изберете „Копиране на стила на слоя“. След това щракнете с десния бутон върху белия контур, създаден в началото на тази стъпка, и изберете „Поставяне на стил на слой“ (Поставяне на стил на слой).
Стъпка 4
Изберете инструмента Type Tool и въведете вашия текст, както е показано на следното изображение. Задайте цвета на текста на #a1d8ff, след това отворете прозореца за стил на слоя и въведете настройките, показани на изображенията по-долу:
Стъпка 5
Връщайки се към синия заоблен правоъгълник, създаден във втората стъпка, отворете прозореца Layer Style и въведете настройките по-долу. Дублирайте тази форма: Control + J, изберете копието, отворете отново прозореца за стил на слоя и приложете Shadow (Drop Shadow) с настройките по-долу. Изберете всички форми, създадени досега, и ги групирайте: Control + G. Това ще бъде вашето затворено падащо меню. В последната стъпка ще го усъвършенстваме още малко.
Стъпка 6
Да се върнем към палитрата със слоеве. Щракнете с десния бутон върху групата, създадена в предишната стъпка, и изберете Дублирана група. Изберете новосъздадената група, плъзнете я отдолу и я позиционирайте, както е показано на изображението по-долу.
Стъпка 7
Нека продължим да работим с групата, създадена в предишната стъпка. Първо, трябва да редактирате текста тук. Променете цвета на #b4b4b4, след това щракнете с десния бутон върху него (в палитрата със слоеве) и изберете „Изчистване на стила на слоя“. Отворете прозореца на стила на слоя и приложете към сивия текст Shadow (Drop Shadow) с настройките по-долу.
Стъпка 8
Задайте цвета на предния план на #f5f5f5, изберете Rounded Rectangle Tool и задайте радиуса на 20 px. Създайте векторна пътека с размери 160x35 px, позиционирайте я, както е показано на първото изображение по-долу, след това я дублирайте: Control + J. Изберете дубликата и го направете бял. Превключете към инструмента Rectangle Tool, щракнете върху бутона Intersect в горната лента с инструменти и нарисувайте векторна пътека с размери 40x35 px, както е показано на второто изображение по-долу.
Да преминем към палитрата със слоеве. Намалете непрозрачността на запълване (Fill) на този контур до 0%, след което, като отворите прозореца за стил на слоя, приложете настройките, показани на изображенията по-долу:
Стъпка 9
Изберете отново заобления правоъгълник, създаден в началото на предишната стъпка, и го дублирайте (Control + J). Изберете копието, преместете го отпред: Shift + Control + ], намалете непрозрачността на запълването (Fill) до 0%, отворете прозореца за стил на слоя и въведете следните настройки:
Стъпка 10
Изберете повторно втората пътека, създадена в стъпка 8, и я дублирайте: Control + J. Изберете копието, преместете го отпред: Shift + Control + ]. След това отворете прозореца на стила на слоя и коригирайте настройките на стила на слоя Shadow, както е показано по-долу.
Стъпка 11
Нека се заемем с дясната страна на формите, създадени в процеса на завършване на последните стъпки. Задайте цвета на предния план на #ebebeb, изберете инструмента Rectangle Tool, създайте векторна пътека 10x15 px и я поставете, както е показано на първото изображение по-долу. Изберете този малък правоъгълник. Щракнете върху бутона Добавяне към селекцията в горната лента с опции и начертайте друга векторна пътека 10x15, както е показано на второто изображение по-долу. Уверете се, че последният създаден път все още е активен, натиснете Control + T, завъртете го на 45 градуса и натиснете Enter.
Да преминем към палитрата със слоеве. Задръжте Ctrl и щракнете върху миниатюрата на слоя с векторната пътека, създаден в предишната стъпка. В резултат на това неговият неактивен избор ще бъде зареден. Сега изберете инструмента за избор (инструмент за избор) и се уверете, че слоят с векторния контур - стрелката - е активен.
Кликнете върху бутоните „Подравняване на вертикални центрове“ и „Подравняване на хоризонтални центрове“ в горната лента с опции, за да подравните стрелката си, както е показано на петото изображение по-долу. След това отворете прозореца на стила на слоя и приложете следните стилове с настройките по-долу.
Стъпка 12
Изберете инструмент Text (Type Tool) и въведете прост текст, както е показано на изображението по-долу. Задайте цвета на #b4b4b4, след това отворете прозореца на стила на слоя и приложете сянката с настройките, показани на изображението. Изберете този нов текст с елементите, създадени в последните четири стъпки, и го групирайте всички: Control + G.
Стъпка 13
Създайте още четири копия на последната създадена група. Подредете новите групи, както е показано по-долу, и променете етикетите.
Стъпка 14
Обърнете внимание на подточката от менюто, обозначена от мен като „Уроци“, отворете прозореца за стилове на слоя по отношение на формата на стрелката и въведете следните параметри:
Стъпка 15
Изберете текста "Уроци" и променете цвета му на #2c95dd. Също така изберете сивия заоблен правоъгълник под текста, отворете прозореца на стила на слоя, приложете Gradient Overlay (Gradient Overlay) с настройките по-долу.
Стъпка 16
За да завършим последните стъпки, имаме нужда от мрежа с размер на клетката 1 пиксел. Затова отидете в менюто Editing> Settings> Guides, Grid and Fragments (Edit> Preferences> Guides, Grid & Slices) и въведете стойност 1 в полето „Линия на всеки...“ (Gridline Every). Задайте предния цвят на #a1d8ff, изберете инструмента Rectangle Tool, създайте квадрат с размер 6px и го поставете, както е показано на първото изображение по-долу. След това изберете инструмента Direct Selection Tool и обърнете внимание на долната част на създадения векторен път. Изберете дясната опорна точка и я преместете 3px наляво. Превключете към инструмента за изтриване на опорна точка и щракнете върху оставащата долна опорна точка, за да я изтриете. В резултат на това вашият квадрат трябва да се превърне в триъгълник!
Завършено изображение
