Ustvarite letak z restavracijskim menijem v Photoshopu. Kako ustvariti meni v stiku Kako narediti drsne menije v Photoshopu

V tem članku si bomo ogledali strukturo ukazov v zgornji vrstici programskega menija. Photoshop CS5. Menijska vrstica (1) ki se nahaja na vrhu programa in vsebuje meni (2) in ugnezdeni podmeniji (3) .

Nekateri podmeniji so neaktivni. Zakaj so neaktivni? Ker morate za to ustvariti določene pogoje ali izvesti določena dejanja - to je dober namig. Če želite razširiti meni (2) , morate klikniti na ustrezno ime in že lahko greste brez klika. Če nimate miške, lahko uporabite naslednjo metodo: pritisnite tipko Alt in dobili boste podčrtaje (4) poleg imen elementov menija.

Če želite odpreti katero koli ime, morate samo pritisniti ustrezno črko na tipkovnici. Na primer, za meni Datoteka je to črka f. Pritisnem črko f, odpre se meni Datoteka. Po njem se lahko premikate s puščicami na tipkovnici. Če se želite pomikati po meniju ali drugem elementu menija, pritisnite puščico v ustrezni smeri. Tipka Esc prekliče meni. Ponovni pritisk tipke Alt nas popelje iz načina tipkovnice. Ko ga pritisnete, podčrtaj v ukazih izgine. To je v primeru, da nimate miške.

V meniju (2) in podmeni (3) obstajajo ukazi, ki omogočajo dostop do skoraj vseh prilagoditev in ukazov v Photoshopu. Številni pogosto uporabljeni in težko dostopni ukazi imajo ustrezne bližnjične tipke na desni strani ukazov. To so tako imenovane bližnjice.

Njihova uporaba močno olajša in pospeši delo. Zato si je že od samega začetka bolje zapomniti in uporabljati bližnjične tipke. Če želite uporabiti kombinacijo tipk, morate pritisniti prvo tipko in, ne da bi jo spuščali, nato pritisnite naslednje tipke. To pomeni, da je treba na koncu hkrati pritisniti več tipk. Potem bo ukaz deloval.

Nekateri elementi menija niso videti kot ukazi, ampak so podobni potrditvenim poljem (5) nameščen s klikom miške. Pokažite na primer "Pomožni elementi" ali "Ravnila". Takšni ukazi so praviloma zasnovani tako, da prikažejo ali skrijejo katere koli elemente vmesnika ali da program nastavi v posebnem načinu. Na sliki lahko vidite, da imam vklopljene pomožne elemente, ravnila in sidra.

Osnovni ukazi Photoshop

Vsi ukazi Photoshop so razvrščeni glede na podobne značilnosti in med seboj ločeni z vodoravno črto. Zdaj pa si oglejmo osnovne in najpogostejše ukaze.

1) Meni Datoteka - to so ukazi za ustvarjanje in odpiranje novega dokumenta ter ukazi za zapiranje in shranjevanje dokumenta v različnih različicah ( enostavno shranjevanje, shranjevanje kot pri izbiri oblike in shranjevanje za splet in naprave, ki optimizirajo datoteko za pravilen prikaz v internetu ali kateri koli napravi). To so glavni ukazi, ki jih potrebujemo. Nadaljnji ukazi se ne uporabljajo tako pogosto in si jih bomo ogledali nekoliko kasneje.

2) Meni Uredi - potrebno, če izvedemo kakršno koli dejanje. Na primer, uporabljam svinčnik. V meniju Uredi lahko ta korak razveljavite, naredite korak nazaj ali če se moram vrniti na to dejanje, lahko naredite korak naprej. Lahko tudi prekličete stanje in se vrnete nazaj. Tudi v meniju "Urejanje" so običajne operacije za večino programov - rezanje v odložišče, kopiranje, kopiranje združenih podatkov in različno lepljenje.

Tu se zelo pogosto uporabljajo tudi ukazi za izvajanje polnjenja in črte. Spodaj so ukazi za povečavo in preoblikovanje ter delo s sloji. Ta meni določa tudi čopič, vzorec, ki ga ustvarimo sami. Spodaj so nastavitve programa, nastavitve barv in osnovne nastavitve menija ( jih bomo upoštevali tudi malo kasneje.).

3) Slikovni ukaz Je najbolj razvita ekipa. Tu imamo vse ukaze in orodja za prilagajanje slike, kot so ravni, krivulje in druga orodja za obdelavo slik. Z njim lahko tudi spremenite velikost slike, delate z velikostjo platna, vrtete sliko pod različnimi koti in delate tudi s slikovnimi kanali.

4) Meni Sloji govori zase. Namenjen je različnim operacijam s sloji. Prva stvar, ki jo bomo morda potrebovali, je ustvariti novo plast, podvojiti plast, ustvariti nove prilagoditvene plasti in pametne predmete. Vse to lahko ustvarimo na drug način prek palete "Sloji" ( bomo razmislili malo kasneje).

5) Izbirni ukaz zasnovan za delo z izbranimi področji. Uporablja se lahko tudi za ustvarjanje izbir glede na paleto barv ali v načinu hitre maske.

6) V meniju "Filter" vsebuje vse filtre v Photoshopu. Kot vstavljeni filtri (6) in zunanji filtri (7) neodvisni prodajalci, imenovani vtičniki. Vtičniki so nameščeni v določenih mapah ( bomo razmislili malo kasneje) in z njimi lahko delate tako kot s filtri. Uporaba filtrov (6) sliko lahko spremenite na različne načine. Na primer, zameglite sliko, ji dodajte šum, jo \u200b\u200bizostrite itd.

7) Meni Analiza namenjen za posebna dela - tega menija praktično ne potrebujemo. Tu lahko preštejete določeno število predmetov, izmerite poljubno dolžino, nastavite merilno lestvico.

8) 3D meni zasnovan za delo s 3D datotekami in 3D predmeti.

9) V meniju Pogled lahko prilagodite načine zaslona, \u200b\u200bsi ogledate sliko v različnih velikostih ( skaliranje slike), vklopite in izklopite ravnila, prikažite vodila na določenih mestih na sliki in izvedite različne posebne operacije.

10) Meni okna zasnovan za nadzor delovnega okolja in priklic različnih palet.

Poglejmo, kako narediti obsežen vodoravni meni za spletno mesto. Najprej ustvarite dokument, širok 1600 slikovnih pik in širok 2000 slikovnih pik.

Ustvari novo plast.

V stranski orodni vrstici izberite "Pravokotna regija".

Zdaj pa ustvarimo delovno področje za prihodnji meni.

Z orodjem Fill zapolnite izbor z barvo. Za poenostavitev dela - # 0391ff, to je barva, ki sem jo uporabil. Tukaj preberite, kako spremenite barvo.

Zdaj poskusimo najti sredino predloge menija. Če želite to narediti, izberite orodje za premikanje in kliknite prazno plast.

Zdaj vidimo sredino in si jo lahko sami označimo. Vedeti, kje se nahaja, bo še vedno prišlo prav.

Postavite gradbeno črto na sredino dokumenta. Če želite to narediti, bomo morali kurzor premakniti na ravnilo v orodni vrstici rezervoarja in ga izvleči.

V stranski orodni vrstici izberite "Besedilo" in napišite ime prihodnjih odsekov.

Na primer, izbral sem temo pohištva in se odločil, da za spletno mesto pripravim meni za naslednje razdelke:

domov
Kuhinje
Spalnice
Oblazinjeno pohištvo
Hodniki
Stene
O podjetju
Stiki

Pišemo v vrstico. Med presledki pustimo razdaljo med presledki.

Velikost pisave Arial 18 slikovnih pik. Te parametre bomo našli na plošči "Besedilo".

Zdaj z uporabo zgoraj omenjenega orodja Move nastavite besedilo na sredino delovnega dokumenta s poudarkom na pomožni vrstici.

Zdaj pa dodajte nekaj glasnosti v naš meni.

Razdelimo gumbe. Za to moramo v orodni vrstici izbrati orodje za vrstice. Vzamemo barvo nekoliko temnejšo od polja našega jedilnika. Recimo # 0179d6. Narišite vodoravno črto s tipko Shift debelo 1 slikovno piko. Trudimo se, da ostane naravnost. Od meje do meje modrega območja. Če imate težave s tem, ga lahko spremenite z orodjem Premikanje.

Nato bomo rasterizirali nastalo črto.

Zdaj moramo podvojiti nastali element. Če želite to narediti, v oknu slojev z levim gumbom miške kliknite sloj oblike in izberite "Podvoji sloj".

Kliknite nastali sloj in izberite Blending Options. Potrebujemo zavihek Barvno prekrivanje. Barvo vzamemo nekoliko svetlejšo od polja menija. Na primer, # 6bbeff.

Zdaj z orodjem Premakni povlecite plast stran od posnetka. Postavili smo jih drug ob drugega. Če želite to narediti, boste morali sliko povečati. Številke naj bodo postavljene ena ob drugo, tako da med njimi ne bo vrzeli.

Tukaj imamo. Gumb je postal obsežen. Ustvarili smo imitacijo svetlobe in sence. Zdaj pa naredimo enako z ostalimi gumbi.

Podvojene plasti, da skrajšate delovni čas.

Obseg se je pojavil, vendar nekaj manjka. Poskusimo dodati nekaj glasnosti v menijsko vrstico.

Ustvarite vodoravne črte na enak način z uporabo barv # 0063af in # 78c2fb.

Postavite jih na vrh. Tukaj imamo.

Preprost volumetrični meni za spletno mesto je pripravljen!

V tej vadnici v Photoshopu vam bomo predstavili postopek ustvarjanja preprostega spustnega menija.

Predogled končane slike

Korak 1
Odprite Photoshop, pritisnite Ctrl + N in tako ustvarite nov dokument. Vnesite spodnje nastavitve in kliknite V redu. Vklopite prikaz mreže: Pogled\u003e Prikaži\u003e Mreža (Pogled\u003e Pokaži\u003e Mreža) in vklopite tudi pripenjanje na mrežo: Pogled\u003e Pripni na ...\u003e Črte mreže (Pogled\u003e Prikaži\u003e Mreža). Zaenkrat bomo imeli na vsakih 5 pik dovolj vrstic. Pojdite na Uredi\u003e Nastavitve\u003e Vodniki, mreža in rezine in opazite razdelek Mreža. V polje Gridline Every vnesite 5, v polje Subdivision pa 1. Na koncu nastavite barvo mreže: # a7a7a7 in kliknite V redu.

Naj vas ne ustraši gosta mrežica, ki se pojavi na platnu. Potrebno je, da vam olajša delo. Med drugim bomo omogočili tudi prikaz podokna z informacijami: Window\u003e Info (Window\u003e Info) za sledenje položaja vaših elementov in oblik v realnem času.

2. korak
Barvo ospredja nastavite na # 3f8ecf, izberite orodje Rounded Rectangle Tool in nastavite Radius na 20 px. Ustvarite vektorsko pot 160 x 40 in jo podvojite: Control + J. Izberite kopijo in jo naredite belo. Preklopite na orodje Rectangle Tool, kliknite gumb Intersect na zgornji plošči in narišite vektorsko pot 40 x 40 px, kot je prikazano na tretji spodnji sliki. Pojdite na paleto slojev in dvokliknite bel obris, da odprete okno sloga sloja.

Uporabite Inner Glow and Stroke, nato vnesite parametre, prikazane na naslednjih slikah.

3. korak
Ponovno izberite modri zaobljeni pravokotnik, ustvarjen v prejšnjem koraku, in ga podvojite: Control + J. Izberite kopijo, jo naredite belo in preklopite na orodje Rectangle Tool. Kliknite gumb Preseči na zgornji plošči in narišite vektorsko pot 120 x 40 px, kot je prikazano na drugi sliki spodaj.

Vrnite se na paleto slojev. Z desno miškino tipko kliknite bel obris, ustvarjen v prejšnjem koraku, in izberite »Kopiraj slog sloja«. Nato z desno miškino tipko kliknite bel obris, ustvarjen na začetku tega koraka, in postavite »Prilepi slog sloja« (Paste Layer Style).

4. korak
Izberite Orodje za vnos in vnesite besedilo, kot je prikazano na naslednji sliki. Nastavite barvo besedila: # a1d8ff, nato pa z odprtim oknom Sloji slojev vnesite nastavitve, prikazane na spodnjih slikah:

5. korak
Vrnite se na modri zaobljeni pravokotnik, ustvarjen v drugem koraku, odprite okno Sloji slojev in vnesite spodnje nastavitve. Podvojite to obliko: Control + J, izberite kopijo, znova odprite okno Layer Styles in uporabite spustno senco s spodnjimi nastavitvami. Izberite vse oblike do zdaj in jih združite v skupine: Control + G. To bo vaš zaprti spustni meni. V zadnjem koraku ga bomo še malo dodelali.

6. korak
Vrnimo se na paleto slojev. Kliknite skupino, ustvarjeno v prejšnjem koraku, RMB in izberite "Podvoji skupino". Izberite novo ustvarjeno skupino, jo povlecite spodaj in postavite, kot je prikazano na spodnji sliki.

7. korak
Nadaljujmo s skupino, ustvarjeno v prejšnjem koraku. Najprej morate urediti besedilo, ki je na voljo tukaj. Spremenite barvo v # b4b4b4, nato z desno miškino tipko kliknite na njej (na paleti slojev) in izberite "Clear Layer Style" (Clear Layer Style). Odprite okno sloga sloja in v sivem besedilu s spodnjimi nastavitvami uporabite Spustite senco.

8. korak
Barvo ospredja nastavite na # f5f5f5, izberite orodje Rounded Rectangle Tool in nastavite Radius na 20px. Ustvarite vektorsko pot 160 x 35 px, jo postavite, kot je prikazano na prvi sliki spodaj, in jo nato podvojite: Control + J. Izberite dvojnik in ga naredite belega. Preklopite na orodje Rectangle Tool, kliknite gumb Intersect na zgornji plošči in narišite vektorsko pot 40 x 35 px, kot je prikazano na drugi sliki spodaj.

Obrnimo se na paleto slojev. Zmanjšajte motnost zapolnitve (Fill) te poti na 0%, nato pa, ko odprete okno sloga sloja, uporabite nastavitve, prikazane na spodnjih slikah:

9. korak
Ponovno izberite zaobljeni pravokotnik, ustvarjen na začetku prejšnjega koraka, in ga podvojite (Control + J). Izberite kopijo, jo spravite spredaj: Shift + Control +], zmanjšajte motnost polnjenja (Fill) na 0%, odprite okno Sloji sloga in vnesite naslednje nastavitve:

10. korak
Ponovno izberite drugo pot, ustvarjeno v koraku 8, in jo podvojite: Control + J. Izberite kopijo in jo prinesite spredaj: Shift + Control +]. Nato odprite okno sloga sloja in prilagodite parametre sloga sloja Shadow, kot je prikazano spodaj.

11. korak
Oglejmo si desno stran oblik, ki so nastale med izvajanjem zadnjih korakov. Barvo ospredja nastavite na #ebebeb, izberite orodje Rectangle Tool, ustvarite vektorsko pot 10x15 px in jo postavite, kot je prikazano na prvi sliki spodaj. Izberite ta mali pravokotnik. V zgornji vrstici možnosti kliknite gumb Dodaj v izbiro in narišite še eno vektorsko pot 10x15, kot je prikazano na drugi sliki spodaj. Ko se prepričate, da je zadnja pot, ki ste jo ustvarili, še vedno aktivna, pritisnite Control + T, jo zavrtite za 45 stopinj in pritisnite Enter.

Pojdite na paleto slojev. Pridržite Ctrl in kliknite sličico sloja vektorske poti, ustvarjene v prejšnjem koraku. S tem se bo naložilo njegovo izbirno območje v prostem teku. Zdaj izberite orodje za izbiro in se prepričajte, da je plast z vektorsko potjo - puščica aktivna.

V zgornji vrstici možnosti kliknite gumb Poravnaj navpična središča in Poravnaj vodoravna središča, da poravnate puščico, kot je prikazano na peti spodnji sliki. Nato odprite okno Sloji slojev in uporabite naslednje sloge s spodnjimi nastavitvami.

12. korak
Izberite Type Tool in vnesite preprosto besedilo, kot je prikazano na spodnji sliki. Nastavite barvo na # b4b4b4, nato odprite okno sloga sloja in uporabite Spustite senco z nastavitvami, prikazanimi na sliki. Izberite to novo besedilo z elementi, ustvarjenimi v zadnjih štirih korakih, in vse to združite v skupine: Control + G.

13. korak
Ustvarite še štiri kopije zadnje skupine, ki ste jo ustvarili. Razporedite nove skupine, kot je prikazano spodaj, in spremenite oznake.

14. korak
Bodite pozorni na podmeni menija, imenovan »Vadnice«, odprite okno sloga sloja, ki je uporabljeno za obliko puščice, in vnesite naslednje parametre:

15. korak
Izberite besedilo »Vadnice« in spremenite njegovo barvo v # 2c95dd. Izberite tudi sivi zaobljeni pravokotnik pod besedilom, odprite okno Sloji slojev, uporabite spodnjo nastavitev Gradient Overlay.

16. korak
Za zadnje korake potrebujemo mrežo z velikostjo celice 1 slikovna pika. Torej pojdite na Uredi\u003e Nastavitve\u003e Vodniki, mreža in rezine in v polje Mrežna črta vnesite 1. Barvo ospredja nastavite na # a1d8ff, izberite orodje Rectangle Tool, ustvarite kvadrat 6 slikovnih pik in ga postavite, kot je prikazano na prvi spodnji sliki. Nato izberite orodje za neposredno izbiro in bodite pozorni na dno ustvarjene vektorske poti. Izberite desno sidrišče in ga premaknite za 3 slikovne pike v levo. Preklopite na orodje Delete Anchor Point Tool in kliknite preostalo spodnjo sidrišče, da ga izbrišete. Posledično bi se vaš kvadrat moral spremeniti v trikotnik!

Končana slika

V tej vadnici bomo ustvarili izviren gumb za spletno mesto.

Korak 1.

Ustvarite nov dokument, nastavite barvo ozadja s kazalnikom: # f7f5f6. Aktivirajte orodje Orodje za zaokrožen ponovni zaplet (Zaobljeni pravokotnik) s polmerom 10 slikovnih pik. Nastavite barvo ospredja na barvo z eksponentom: # 2f88bb. Na novi plasti ustvarite majhen zaobljen pravokotnik.

2. korak

Zdaj pa pojdi na Sloj slojain se prijavite za narisan pravokotnik Zunanji sijaj in Notranji sij z naslednjimi nastavitvami:

3. korak

Držite tipko kliknite z miško na sličico plasti s pravokotnikom, da nanjo naložite izbor. Ustvari novo plast, vstopi v meni: Izberite-spremenite-pogodba (izbor-sprememba - skrči) in v parametru "velikost stiskanja" nastavite vrednost: 1 slikovna pika.

Aktivirajte orodje Eliptično šotorsko orodje(Ovalno izbirno območje) in držite tipko , začnite odštevati izbor, kot je prikazano. Ko ostane potreben del izbora, ga napolnite z belim prozornim gradientom in nastavite način mešanja gradienta Prekrivanje, neprosojnost sloja -48% in prekličite izbiro s pritiskom na bližnjico na tipkovnici .

4. korak

Ustvarite novo plast in z orodjem Eliptično šotorsko orodje(Ovalno izbirno območje), ustvarite elipso, kot je prikazano. Zdaj uporabljamo orodje Gradient(Gradient), slog - od glavnega do prosojnega in ustvarite gradientno zapolnitev vzdolž ovalne izbire. Ta gradient bo deloval kot senca.

5. korak

Nadalje držite tipko kliknite z miško na sličico plasti s pravokotnikom, da nanjo naložite izbor. Zdaj vstopite v meni Izberite Inverznoin pritisnite tipko ... S tem dejanjem bomo z gumba odstranili odvečno senco.

6. korak

Neprosojnost sloja gumba nastavite na 32%. Držite tipko kliknite z miško na sličico prvega sloja, da nanjo naložite izbor, in nato, medtem ko držite tipko in uporabo Orodje za pravokotne šotore(Pravokotni šotor), odštejte polovico izbora.