Kako napraviti prekrasan meni za VKontakte grupu. Kako napraviti prekrasan meni u grupi VKontakte Kreiranje menija u Photoshopu
Hajde da shvatimo kako napraviti trodimenzionalni horizontalni meni za web lokaciju. Prvo kreirajte dokument koji je širok 1600 piksela i dugačak 2000 piksela.
Kreirajmo novi sloj.
Na bočnoj alatnoj traci odaberite Pravokutni okvir.
Sada formiramo radni prostor za budući meni.
Koristite alat Fill da popunite odabrano područje bojom. Da pojednostavim svoj rad - #0391ff, ovo je boja koju sam koristio. Kako promijeniti boju, pronaći ćete ovdje.
Pokušajmo sada pronaći praznu sredinu menija. Da biste to učinili, odaberite alat "premjesti" i kliknite na sloj s radnim komadom.
Sada vidimo sredinu i možemo je sami označiti. Znati gdje se nalazi i dalje će nam biti od koristi.
Postavite pomoćnu liniju u sredinu dokumenta. Da bismo to učinili, morat ćemo pomaknuti kursor na ravnalo koje se nalazi na alatnoj traci spremnika i izvući ga.
Na bočnoj alatnoj traci odaberite "Tekst" i napišite naziv budućih odjeljaka.
Na primjer, odabrao sam temu namještaja i odlučio da razvijem meni za web stranicu za sljedeće odjeljke:
- Dom
- kuhinje
- Spavaće sobe
- Namještaj s jastucima
- hodnicima
- Zidovi
- O kompaniji
- Kontakti
Pišemo u redu. Ostavite razmake između svake sekcije.
Veličina fonta ariala 18 piksela. Ove parametre ćemo pronaći u panelu "Tekst".
Sada, koristeći gore spomenuti alat "Move", postavljamo tekst u sredinu radnog dokumenta, fokusirajući se na pomoćnu liniju.
Sada dodajmo malo volumena našem meniju.
Odvojimo dugmad. Da bismo to uradili, potrebno je da sa trake sa alatkama odaberemo alat "linija". Uzimamo boju malo tamniju od polja našeg menija. Recimo #0179d6. Nacrtajte horizontalnu liniju držeći pritisnutu tipku shift debljine 1 piksel. Trudimo se da to bude jasno. Od granice do granice plave oblasti. Ako imate problema s ovim, možete mu promijeniti veličinu pomoću alata za premještanje.
Zatim rasterizirajte rezultirajuću liniju.
Sada bismo trebali duplicirati primljeni element. Da biste to učinili, u prozoru slojeva kliknite na sloj s oblikom lijevom tipkom miša i odaberite "Kreiraj duplikat sloja".
Kliknite na rezultirajući sloj i odaberite Blending Options. Treba nam kartica Preklapanje boja. Uzimamo boju nešto svjetliju od polja menija. Na primjer, #6bbeff.
Sada, koristeći alat Move, povucite sloj dalje od snimanja. Stavili smo ih jedan pored drugog. Da biste to učinili, morat ćete povećati sliku. Figure treba postaviti jednu pored druge, tako da između njih nema razmaka.
Evo šta smo dobili. Dugme je postalo obimno. Napravili smo imitaciju svjetla i sjene. Sada uradimo isto sa ostalim dugmadima.
Duplicirajte slojeve za smanjenje radnog vremena.
Volumen se pojavio, ali nešto nedostaje. Pokušajmo dodati jačinu zvuka na traku menija.
Kreirajmo horizontalne linije koristeći istu metodu koristeći boje #0063af i #78c2fb.
Stavimo ih na vrh. Evo šta smo dobili.
Jednostavan volumetrijski meni za web lokaciju je spreman!
Dobar dan dragi posjetioci. Želite naučiti kako napraviti prekrasan meni za svoju VKontakte grupu, ali ne znate kako to učiniti. Tada će vam trening video lekcija "Kako kreirati meni u VKontakteu" pomoći da kreirate ovaj meni korak po korak.
Ova lekcija je nastavak prethodne video lekcije "Dizajniranje VKontakte grupe" koju možete pogledati. Takođe nam je potreban Adobe Photoshop za kreiranje menija. Možete naučiti kako instalirati i raditi s ovim programom iz odjeljka.
Također možete preuzeti šablone koji se koriste u ovom video vodiču https://yadi.sk/d/EFuM8IjjO3zVUA.
1. Kreiranje menija u Photoshopu
U programu Photoshop idite na karticu datoteke, kliknite na kreiranje ili pritisnite Ctrl + N. Kreirajmo novi dokument širine 600 piksela, visine 420 piksela i rezolucije 100 piksela po inču. Zatim kliknite na datoteku da biste je otvorili i na računaru odaberite bilo koju sliku koju želite.
Odaberite alat Rectangular Marquee Tool ili M tipku na vašoj tipkovnici da odaberete sliku. Zatim kliknite na karticu za uređivanje u izborniku i odaberite kopiranje ili tipkovnu prečicu Ctrl + C. Prolazimo u kreirani dokument i odabiremo uređivanje u izborniku za lijepljenje ili kombinaciju dugmadi Ctrl + V.
Odaberite alat za pomicanje ili tipku V. U izborniku za uređivanje odaberite slobodnu transformaciju ili tipke Ctrl + T. Povlačenjem jednog od uglova dok držite pritisnutu tipku Shift za ravnomjernu promjenu veličine, držimo našu sliku.
1.1. Kreiranje dugmadi
Odaberite alat za pravougaonik ili tipku U. Odaberite boju, a zatim kreirajte dugme. U bočnoj traci sa desne strane možete postaviti parametre za radijus zaokruživanja. Napravimo 5 piksela. Na kartici Pregled provjerite jesu li pomoćni elementi omogućeni. Pomaknimo naše dugme na sredinu slike.
Kliknite na sloj dugmeta, kliknite desnim tasterom miša na opcije. Primijenite efekat senke da biste bolje istakli dugme na svetloj pozadini. Koristeći alat za premještanje, držeći tipku Alt na tastaturi, povucite dugme malo niže i tako ga kopirajte. Tako kreiramo treće dugme, pomerajući ga na takvu udaljenost, o kojoj će nam pomoćni elementi reći. Držeći tipku Ctrl, odabiremo slojeve, odabiremo alat za pomicanje i postavljamo ih u centar dokumenta.
Odaberite alatku za horizontalni tekst ili tipku T. Zatim pritisnite lijevu tipku miša, pazite da bude izvan budućih dugmadi. Napišite tekst koji nam je potreban, pomaknite tekst približno u sredinu gumba ili Ctrl + V. Zatim dajemo naziv drugim dugmadima.
Odabiremo alat za rezanje ili tipku C. Odaberimo jedno po jedno naše kreirane dugmad. Odaberite naše prvo dugme i pokažite na jedan od uglova. U tom slučaju, ikona rezanja treba ostati nepromijenjena. Zatim odaberite drugo i treće dugme. Kliknite na meni datoteka i sačuvajte dokument na svom računaru. Nakon toga kliknite na Spremi za web. Dugmad spremamo na računar.
2. Uređivanje menija u VKontakteu
Idemo u našu grupu VKontakte. Nakon avatara zajednice, idemo u grupu statistike. U adresnoj traci pretraživača nalaze se brojevi zajednica, oni su upravo ono što je potrebno za dalje uređivanje grupe. Za uređivanje grupe potrebna nam je sljedeća veza koju ćete morati kopirati https://vk.com/pages?oid=-XXX&p=Page_name
Umjesto natpisa na stranici, može kreirati proizvoljno ime za našu buduću stranicu. Nazovimo ga, na primjer, grupni meni. Pritisnite olovku i idite na wiki način označavanja. Sada možete dodati fotografije koje ste upravo kreirali u Adobe Photoshopu. Spremimo stranicu i pritisnemo dugme za pregled i vidimo kako izgleda naš meni. Ako primijetite da je dugme vrlo malo i da ima razmaka između dugmadi.
Prebacite se na način vizualnog uređivanja. Kliknemo na svako dugme redom i biramo veličinu dugmadi, širina je 610 piksela, a visina se automatski poravnava. Ovo je najveća vrijednost u kontaktu.
Otklanjamo probleme između dugmadi. Da biste to uradili, idite na meni za uređivanje i u vizuelnom uređivaču napišite na kraju svakog unosa; bez dodavanja. Kopirajte ovaj tekst i zalijepite ga na ostale slike. Kliknite da sačuvate stranicu i vidite šta smo dobili klikom na dugme za pregled. Sada su naša dugmad postala jedno.
U ovoj lekciji ćemo kreirati originalno dugme za sajt.
Korak 1.
Kreirajte novi dokument, postavite boju pozadine na #f7f5f6. Aktivirajte alat Alat za zaobljeni pravougaonik (Pravougaonik sa zaobljenim uglovima) sa radijusom zaokruživanja od 10 piksela. Postavite boju prednjeg plana na #2f88bb. Na novom sloju kreirajte mali zaobljeni pravougaonik.
Korak 2
Sada idite na Stil sloja (stilovi slojeva) i prijavi se za nacrtani pravougaonik Vanjski sjaj (vanjski sjaj) i unutrašnji sjaj (unutarnji sjaj) sa sljedećim postavkama:
Korak 3
Držeći ključ
Aktivirajte alat Elliptical Marquee Tool(Ovalno područje odabira) i držeći tipku pritisnutu
Korak 4
Kreirajte novi sloj i koristite alat Elliptical Marquee Tool(Ovalno područje odabira), kreirajte elipsu kao što je prikazano. Sada koristite alat Gradijent(Gradijent), stilizujte od prednjeg plana do prozirnog i kreirajte gradijentnu ispunu preko ovalnog odabira. Ovaj gradijent će djelovati kao sjena.
Korak 5
Zatim, držite tipku pritisnutu
Korak 6
Postavite neprozirnost sloja dugmeta na 32%. Držeći ključ
Korak 7
Popunite kreirani odabir bijelom bojom i promijenite neprozirnost na 11%.
Korak 8
Sada kreirajte novi sloj i nacrtajte krug kao što je prikazano ispod.
Korak 9
Ovaj članak će biti detaljan priručnik i reći ću vam kako napraviti meni za VKontakte grupu. Lijepo dizajniran meni VK grupe doprinosi stvarnom povećanju posjetitelja i rastu prodaje na stranici.
Pozdrav dragi moji čitaoci. Da ti kažem danas kako napraviti prekrasan meni za VKontakte grupu i potpuno besplatno. Usput, nakon što ste naučili kako kreirati takve teme, možete malo zaraditi na ovome -))). Već ni jedna komercijalna stranica ne funkcionira bez stvaranja vlastite zajednice na društvenim mrežama, posebno VK, koja će garantirano pomoći u dovođenju novih kupaca, kao i promociji vašeg poslovanja.
Ali ako vaša zajednica nije privlačna i kako su svi koji žele tu ostati? Mislim da niko!!! Zato ukrasimo naše grupe kvalitetnim dizajnom i naučimo kako to učiniti vrlo brzo. Pre nego što počnete da kreirate grafiku i naš budući meni, potrebno je da instalirate Photoshop na računar za dalje rezanje slika. Mnogi će se pitati zašto uopće trebate rezati slike. Poenta je da ćemo za svaki link menija morati da kreiramo zasebnu traku od opšteg banera.
Danas postoji nekoliko tipova kreiranog menija:
- Otvoreno sa aktivnim tačkama;
- Zatvoreno kao zakačena objava;
- Sa zasebnim slikama ili zajedničkom susjednom slikom banera i menija.
Suština kreiranja obje opcije je ista. Samo je glavna razlika u dodatnim elementima i vrstama zapisa, a ovaj članak će biti detaljnije razmotren u ovom članku.
Za rad sa menijem će nam pomoći wiki markup, koji je danas ugrađen u uređivač teksta VKontakte. Razlikuje se od uobičajenog po tome što će koristiti standardne komande za prikaz određene slike i umetanje linkova do potrebnih elemenata. Sama wiki oznaka vam omogućava da ubacite kod za prikaz slika, video zapisa i drugih elemenata.
VK grupa zatvoren meni
U ovom slučaju, lijevo od avatara glavne grupe ćemo vidjeti hipervezu u obliku natpisa „meni grupe“, kada kliknemo, otvara se naš meni sa aktivnim stavkama i slikama.
Meni će izgledati ovako:
Otvori grupni meni (zakačeni snimak)
Suština je kreiranje već otvorenih stavki menija koje će biti prikazane u opisu same grupe, gdje se obično prikazuje prema svim uvjetima. Naša slika će biti priložena opisu, koji ćemo unaprijed pripremiti i povezati je sa stranicom na kojoj ćemo imati aktivne artikle. Ovaj jelovnik je nedavno postao veoma popularan i tražen je među kupcima. izgledaju ovako:
Kako napraviti prekrasan meni za VKontakte grupu: upute korak po korak
Dakle, prije svega, trebat ćemo kreirati glavni avatar grupe koji ćemo postaviti s desne strane i stub našeg menija u obliku banera.
- Za avatar 200x332 piksela;
- Za baner glavnog menija 395x282 piksela.
Kao što vidite, visina slika je drugačija i to je urađeno tako da se slike ne pomeraju u visinu i da su u istom nivou, pošto visina naziva zajednice i statusa zauzimaju oko 50 px, a biće nam potrebno da uklonite ovu vrijednost sa visine menija.
Da bi bilo jasno, ako je visina avatara glavne grupe 332, onda od njega oduzimamo 50 i dobijemo visinu glavnog menija jednaku 282. Ako dimenzije nisu bitne, onda se visina može postaviti na proizvoljnu.
Sljedeći korak nakon kreiranja zajednice bit će postavljanje materijala i ovdje trebamo zabraniti učesnicima da kreiraju dodatne stranice i blokove, već samo da pišu po zidu. Da biste to učinili, bit će potrebno otići u odjeljak ispod avatara grupe pod nazivom "upravljanje zajednicom" gdje moramo učiniti naše materijale "ograničenim" kao što je prikazano ispod.
Idemo sada na kreiranje cjelokupne kompozicije. Naravno, možete samo umetnuti sliku umjesto avatara i u opis, ali nemojmo biti amateri i pokažimo kako to učiniti profesionalno, tako da to bude jedna punopravna slika koja se pretvara jedna u drugu.
Kreirajmo novo platno u Photoshopu dimenzija 600x350 piksela koje ćemo koristiti kao šablonu tako što ćemo u njemu izrezati otvore za naše slike. Da bismo radili, potrebno je da prevedemo veličine svih elemenata i lenjira u pikselima, a to se radi na sledećoj putanji: “Edit-Setting-Basic” i ovde smo već postavili piksele.
Sljedeći korak u kreiranju otvorenog menija je izrada isječaka za baner i avatar, koje ćemo zatim dobiti za preuzimanje. Da biste to učinili, idite na odjeljak lijevog vertikalnog izbornika i odaberite rezanje.
Koristeći lijevu tipku miša, kao da birate područje, potrebno je odabrati blokove potrebnih veličina i nakon svakog odabira pritisnuti dugme za brisanje “Delete” i odabrati 50% siva. Takve radnje će dovesti do činjenice da će blokovi biti željene veličine i istaknuti u drugoj boji od glavne pozadine.
Trebali biste dobiti sljedeće:
A sada samo odaberite gumicu i upotrijebite funkciju "magic eraser" da kliknete na svaki sivi blok i dobijete šablonu s izrezima. U sljedećem koraku odabiremo našu glavnu sliku i stavljamo je ispod pozadine i dobijamo gotove slike na kojima možemo napisati tekst sa nazivom menija ili drugim reklamnim elementima.
Odlično. Nakon što ste postavili sliku našeg dizajna, samo moramo odabrati "sačuvaj za Web" i dobićemo 2 naše slike kao izlaz. Sada se vraćamo u našu grupu i možemo popuniti glavni avatar (vertikalni). Baner ćemo koristiti za meni nešto kasnije kada radimo sa kodom za wiki označavanje.
Kreirajmo sam meni, sa aktivnim stavkama koje će preusmjeriti korisnika na potrebne dijelove stranice treće strane ili na albume i direktorije u samoj grupi. Za promjenu ćemo koristiti novu sliku -))).
Dakle, vratite se u Photoshop i kreirajte novo platno dimenzija 400x300 piksela. Zatim biramo u odjeljku: file-place i odabiremo sliku za pozadinu menija.
Postavljamo dugmad našeg budućeg menija na sliku i izrezujemo sliku kao što smo to uradili iznad odabirom potrebnih blokova. Nakon toga također biramo “spremi za web” i dobivamo mapu s našim rezovima. U mom slučaju imam 4 slike u posebnom folderu.
Sada moramo popuniti slike istovarene iz Photoshopa u poseban album i sakriti se od znatiželjnih očiju. Nakon učitavanja, svaka slika će dobiti svoj novi naziv i jedinstveni ID.
Imajte na umu da morate imati:
- Otvoreni materijali u "ograničenom" načinu rada;
- Uključene diskusije;
- Fascikla fotografija je otvorena za sve.
Sada ostaje da podesimo našu stranicu na kojoj će biti prikazana u meniju. Da biste to učinili, idite na glavnu stranicu zajednice i odaberite svježe materijale i uredite i pozovite "NAŠ MENI".
Zatim moramo umetnuti slike koje smo dobili prilikom rezanja u Photoshopu. Neko koristi oznake za označavanje, ali da ne bi bio pametniji, predlažem da jednostavno odaberete da ubacite sliku klikom na ikonu kamere i otpremite jednu za drugom jednu po jednu.
Radeći u uređivaču teksta, ako nakon učitavanja slika kliknemo na ikonu zagrade u gornjem desnom uglu, trebali bismo vidjeti sljedeći kod:
savjet: Važna stvar nakon učitavanja slika je uklanjanje uvlaka. Ovo se rješava umetanjem "nopaddinga" ispred veličina slike.
Za pojašnjenje, šta je uzeto odakle je opisano u nastavku, ali s obzirom da će se sve automatski ubaciti i ne treba biti pametan, i otvorite kako neki ljudi napišu svaku sliku i uzmu id pa samo učitajte i sačuvajte.
[]
gdje je xxxxx id vaše slike
yyyyy - širina u pikselima (ne više od 388)
Trebalo bi završiti ovako:
Sada su naše slike sakupljene u zasebnom baneru. A da biste dodali vezu na svaku stavku, jednostavno kliknite na sliku sa onemogućenim oznakama i zalijepite kopirani URL u odjeljak veza.
I tako dolazimo do najvažnije i posljednje točke u kreiranju našeg VKontakte menija. Sada moramo sačuvati našu stranicu sa slikom i kopirati njenu adresu. U mom slučaju to izgleda ovako:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Upamtite, na početku članka smo napravili menu stub, koji će biti nastavak našeg glavnog avatara, a upravo smo napravili šablon za njega. To je upravo ono što nam je trenutno potrebno.
Idite na glavnu stranicu i uradite sljedeće:
Korak 1.
Adresu stranice ubacujemo u tekstualno polje za novi unos na zidu, nakon čega će biti konvertovana u link.
Korak #2.
Sliku našeg stubića za meni prilažemo zapisu i kliknemo pošalji.
Korak #3.
Sada, nakon objavljivanja objave, kliknite na vrijeme kreiranja u donjem lijevom dijelu objave i odaberite "PIN".
Odlično!!! Ovdje završavamo. Sada znate kako da kreirate cool menije i na tome možete dobro zaraditi. Savjetujem vam da sve radite sljedećim redoslijedom:
- Osmišljavamo strukturu i naručimo dizajn slika menija;
- Vršimo promjenu veličine i rezanje svih slika;
- Umetnite slike u albume;
- Sve rezove uređujemo u editoru i objavljujemo na glavnim stranicama grupe.
Kao rezultat rada dobićemo sledeći meni.
Ali sam meni, kada se pritisne, pojaviće se sa aktivnim linkovima. Vrijedi se poigrati se s veličinama i prilagoditi svom ekranu, ali ne zaboravite na prikaz na mobilnim uređajima.
BITAN: Nakon promjene dizajna VK-a 2016. godine, napravljene su nove promjene prilikom kreiranja slika i zahtjeva za slike o kojima.
Preuzmite predložak menija VK grupe + sve izvore lekcija
Nadam se da je materijal bio koristan, a sada možete lako razumjeti kako napraviti prekrasan meni za grupu VKontakte. Pretplatite se na ažuriranja bloga i vidimo se uskoro u novim objavama. Ako imate bilo kakvih pitanja, napišite ih u komentarima i sigurno ću vam pomoći.
Prilažem video da potvrdim ono što sam pročitao.
U ovom Photoshop tutorijalu, provest ćemo vas kroz proces kreiranja jednostavnog padajućeg menija.
Završen pregled slike
Korak 1
Otvorite Photoshop, pritisnite Ctrl+N i tako kreirate novi dokument. Unesite postavke ispod i kliknite na OK. Uključite prikaz mreže: Pogled > Prikaži > Mreža (Prikaz > Prikaži > Mreža), a također uključite spajanje na mrežu: Pogled > Prikači za ... > Linije mreže (Prikaz > Prikaži > Mreža). Za sada ćemo imati dovoljno linija svakih 5 piksela. Idite na meni Editing> Settings> Guides, Grid and Fragments (Edit> Preferences> Guides, Grid & Slices) i obratite pažnju na odjeljak Grid (Grid). Unesite vrijednost 5 u polje “Line every…” (Gridline Every) i vrijednost 1 u polje “Internal Division by…” (Subdivision). Na kraju, postavite boju mreže na #a7a7a7 i kliknite OK.
Ne dozvolite da vas uplaši debela mreža koja se pojavljuje na platnu. Tu je da vam olakša posao. Između ostalog, omogućit ćemo i prikaz info panela: Window> Info (Window> Info) kako biste pratili položaj vaših elemenata i oblika u realnom vremenu.
Korak 2
Postavite boju prednjeg plana na #3f8ecf, odaberite alat za zaobljeni pravougaonik i postavite radijus na 20 piksela. Kreirajte vektorsku putanju 160x40 i duplicirajte je: Control + J. Odaberite kopiju i učinite je bijelom. Prebacite se na Rectangle Tool, kliknite na dugme Intersect na gornjoj traci sa alatkama i nacrtajte vektorsku putanju veličine 40x40 px kao što je prikazano na trećoj slici ispod. Idite na paletu slojeva i dvaput kliknite na bijeli obris da biste otvorili prozor stila sloja.
Primijenite Unutarnji sjaj (Inner Glow) i Stroke (Stroke), a zatim unesite parametre prikazane na sljedećim ilustracijama.
Korak 3
Ponovo odaberite plavi zaobljeni pravougaonik kreiran u prethodnom koraku i duplirajte ga: Control + J. Odaberite kopiju, učinite je bijelom i prebacite se na Rectangle Tool. Kliknite na dugme Intersect na gornjoj traci sa alatkama i nacrtajte vektorski obris veličine 120x40 px kao što je prikazano na drugoj slici ispod.
Vratimo se na paletu slojeva. Kliknite desnim tasterom miša na bijeli obris kreiran u prethodnom koraku i odaberite “Kopiraj stil sloja”. Zatim kliknite desnim tasterom miša na bijeli obris kreiran na početku ovog koraka i odaberite “Zalijepi stil sloja” (Zalijepi stil sloja).
Korak 4
Odaberite Alat za unos teksta i unesite svoj tekst kao što je prikazano na sljedećoj slici. Postavite boju teksta na #a1d8ff , zatim otvorite prozor stila sloja i unesite postavke prikazane na slikama ispod:
Korak 5
Vraćajući se na plavi zaobljeni pravougaonik kreiran u drugom koraku, otvorite prozor Layer Style i unesite postavke ispod. Duplirajte ovaj oblik: Control + J, odaberite kopiju, ponovo otvorite prozor stila sloja i primijenite Shadow (Drop Shadow) sa postavkama ispod. Odaberite sve do sada kreirane oblike i grupirajte ih: Control + G. Ovo će biti vaš zatvoreni padajući meni. U zadnjem koraku ćemo ga još malo usavršiti.
Korak 6
Vratimo se na paletu slojeva. Kliknite desnim tasterom miša na grupu kreiranu u prethodnom koraku i izaberite Duplicate Group. Odaberite novostvorenu grupu, prevucite je ispod i postavite je kao što je prikazano na slici ispod.
Korak 7
Nastavimo raditi sa grupom kreiranom u prethodnom koraku. Prije svega, ovdje trebate urediti tekst. Promijenite boju u #b4b4b4, zatim kliknite desnim tasterom miša na nju (na paleti slojeva) i odaberite "Clear Layer Style". Otvorite prozor stila sloja i primijenite na sivi tekst Shadow (Drop Shadow) sa postavkama ispod.
Korak 8
Postavite boju prednjeg plana na #f5f5f5, odaberite alat za zaobljeni pravougaonik i postavite radijus na 20 px. Napravite vektorsku putanju veličine 160x35 px, pozicionirajte je kao što je prikazano na prvoj slici ispod, a zatim je duplirajte: Control + J. Odaberite duplikat i učinite ga bijelim. Prebacite se na Rectangle Tool, kliknite na dugme Intersect na gornjoj alatnoj traci i nacrtajte vektorsku putanju veličine 40x35 px kao što je prikazano na drugoj slici ispod.
Idemo na paletu slojeva. Smanjite neprozirnost ispune (Fill) ove konture na 0%, a zatim, otvaranjem prozora za stil sloja, primijenite postavke prikazane na slikama ispod:
Korak 9
Ponovno odaberite zaobljeni pravougaonik kreiran na početku prethodnog koraka i duplirajte ga (Control + J). Odaberite kopiju, pomaknite je naprijed: Shift + Control + ], smanjite neprozirnost ispune (Fill) na 0%, otvorite prozor stila sloja i unesite sljedeće postavke:
Korak 10
Ponovo izaberite drugu putanju kreiranu u koraku 8 i duplirajte je: Control + J. Odaberite kopiju, dovedite je naprijed: Shift + Control + ]. Zatim otvorite prozor stila sloja i prilagodite postavke stila sloja sjene kao što je prikazano ispod.
Korak 11
Pozabavimo se desnom stranom oblika stvorenih u procesu dovršavanja posljednjih koraka. Postavite boju prednjeg plana na #ebebeb, odaberite Rectangle Tool, kreirajte vektorsku putanju veličine 10x15 px i postavite je kao što je prikazano na prvoj slici ispod. Odaberite ovaj mali pravougaonik. Kliknite na dugme Dodaj u selekciju na gornjoj traci sa opcijama i nacrtajte drugu vektorsku putanju 10x15 kao što je prikazano na drugoj slici ispod. Uvjerite se da je zadnja kreirana putanja još uvijek aktivna, pritisnite Control + T, zarotirajte je za 45 stupnjeva i pritisnite Enter.
Idemo na paletu slojeva. Držite pritisnut Ctrl i kliknite na sličicu sloja vektorske putanje kreirane u prethodnom koraku. Kao rezultat, učitat će se njegov odabir u stanju mirovanja. Sada odaberite Alat za odabir (Alat za odabir) i uvjerite se da je sloj s vektorskim obrisom - strelicom - aktivan.
Kliknite na gumbe “Poravnaj vertikalne centre” i “Poravnaj horizontalne centre” na gornjoj traci opcija da poravnate svoju strelicu kao što je prikazano na petoj slici ispod. Zatim otvorite prozor stila sloja i primijenite sljedeće stilove s donjim postavkama.
Korak 12
Odaberite alat Text (Type Tool) i otkucajte jednostavan tekst kao što je prikazano na slici ispod. Postavite boju na #b4b4b4, zatim otvorite prozor stila sloja i primijenite Shadow sa postavkama prikazanim na slici. Odaberite ovaj novi tekst s elementima kreiranim u posljednja četiri koraka i grupišite sve: Control + G.
Korak 13
Kreirajte još četiri kopije posljednje kreirane grupe. Rasporedite nove grupe kao što je prikazano ispod i promijenite oznake.
Korak 14
Obratite pažnju na podstavku menija, koju sam označio kao „Tutoriali“, otvorite prozor stilova slojeva u odnosu na oblik strelice i unesite sljedeće parametre:
Korak 15
Odaberite tekst "Tutoriali" i promijenite njegovu boju u #2c95dd. Također odaberite sivi zaobljeni pravougaonik ispod teksta, otvorite prozor stila sloja, primijenite Gradient Overlay (Gradient Overlay) sa postavkama ispod.
Korak 16
Da bismo dovršili posljednje korake, potrebna nam je mreža s veličinom ćelije od 1 piksel. Stoga idite na meni Uređivanje> Postavke> Vodiči, mreža i fragmenti (Uredi> Postavke> Vodiči, mreža i kriške) i unesite vrijednost 1 u polje “Line every…” (Gridline Every). Postavite Fore Color na #a1d8ff, odaberite Rectangle Tool, kreirajte kvadrat od 6px i postavite ga kao što je prikazano na prvoj slici ispod. Zatim odaberite Direct Selection Tool i obratite pažnju na dno kreirane vektorske putanje. Odaberite desnu sidrišnu tačku i pomaknite je 3px ulijevo. Prebacite se na Delete Anchor Point Tool i kliknite na preostalu donju sidrišnu tačku da je izbrišete. Kao rezultat, vaš kvadrat bi se trebao pretvoriti u trokut!
Završena slika
