Izveidojiet Photoshop grafiku, izmantojot slāņu stilus un viedos objektus

Šajā apmācībā mēs izstrādāsim grafiku vietnei 8izz, kas ir fiktīva iPhone lietotne. Es izpētīšu, kā izmantot Photoshop slāņu stilus un viedos objektus, lai izveidotu tīrus korporatīvus grafiskos elementus, kurus jūs varētu izmantot saviem dizaina projektiem, tostarp vietnes prezentācijas zonu un tās pasūtīšanas pogu; atdalītāji vietnes satura sadalīšanai; un multivides atskaņotāju ar pielāgotiem noapaļotiem stūriem.

Zemāk jūs varat redzēt pilnu vietnes maketu. Apmācības laikā jūs varat redzēt atsevišķu elementu tuvplānus.

kā pievienot tekstūru ilustratoram

Fiktīvas 8izz lietotnes pilnīgs dizains. Šajā apmācībā mēs izpētīsim, kā atjaunot dažus tā dizaina elementus



Fiktīvas 8izz lietotnes pilnīgs dizains. Šajā apmācībā mēs izpētīsim, kā atjaunot dažus tā dizaina elementus

1. Prezentācijas zona

Sāksim, izveidojot pelēko prezentācijas laukumu maketa augšdaļā. Mēs izveidosim arī viltotu pielāgotu ēnu iPhone grafikai.

Sāksim izkārtojumu, atverot jaunu Photoshop dokumentu. Atlasiet Fails> Jauns vai izmantot vai nu Cmd + N vai Ctrl + N , atkarībā no tā, vai strādājat ar Mac OS X vai Windows.

Iestatiet platumu līdz 1200 pikseļiem un augstumu līdz 1800 pikseļiem (pikseļus izmantosim visiem slāņiem, izņemot tekstu, kuram izmantosim punktus). Iestatiet 12 kolonnu režģi: es iesaku izmantot Nathan Smith 960 režģa veidni, kuru jūs varat lejupielādēt bez maksas no viņa vietne . (Instalēšanas instrukcijas ir iekļautas lejupielādē.) Jūs varat aktivizēt vai deaktivizēt režģi, izmantojot Cmd / Ctrl +; saīsne.

Nākamais solis ir fona modeļa pievienošana prezentācijas zonai. Es izmantoju bezmaksas Smalki raksti vietni, bet jūs varētu izmantot kādu no savām. Atveriet attēlu, atlasiet> Visi, izvēlieties Rediģēt> Definēt modeli un noklikšķiniet uz Labi.

Tagad pievienojiet modeli fona slānim, dodoties uz Slānis> Slāņa stils> Raksta pārklājums vai vienkārši veicot dubultklikšķi uz slāņa slāņu paletē un dialoglodziņā Layer Style izvēloties opciju Pattern Overlay. (Piezīme: ja opcija Layer Style nav redzama, iespējams, jums būs jāpārvērš fons parastā slānī, ar peles labo pogu noklikšķinot uz tā paletes Layers un izvēloties Layer from Background). Dialoglodziņā jums būs jāizvēlas vertical_cloth modelis, ko varat izdarīt, vienreiz noklikšķinot uz grafikas Pattern (parādīts zemāk), lai atvērtu paraugu kopu.

Prezentācijas laukuma darba virsmas sagatavošana ar Pattern Overlay

Prezentācijas laukuma darba virsmas sagatavošana ar Pattern Overlay

Izveidojiet jaunu slāņu grupu, dodoties uz Slānis> Grupu slāņi vai nospiežot Cmd / Ctrl + G . Novietojiet to virs galvenes un nosauciet to Galvenais saturs (ar peles labo pogu noklikšķiniet uz tā Layers paletē un izvēlieties Group Properties, lai to pārdēvētu). Tās iekšpusē izveidojiet citu grupu ar nosaukumu Prezentācija .

Tagad atlasiet noapaļotā taisnstūra rīku (U). Ekrāna augšdaļā esošajā iestatījumu joslā iestatiet to uz 10 pikseļu rādiusu un # 606060 krāsu. Uzzīmējiet 960 x 430 pikseļu formu, nosauciet to Prezentācijas bāze un pievienojiet šādu slāņa stilu:

  • Drop Shadow: Normāls sajaukšanas režīms, 40% necaurredzamība, 120 ° leņķis, globālās gaismas izmantošana, 1 pikseļa attālums, 3 pikseļu izmērs (atstājiet visus pārējos iestatījumus noklusējuma vērtībās)
  • Iekšējā ēna: normāls sajaukšanas režīms, 50% necaurredzamība, 93 ° leņķis, 2 pikseļu attālums, 3 pikseļu izmērs
  • Gradienta pārklājums: Pārklājuma sajaukšanas režīms, 20% necaurredzamība, gradienta 100% necaurredzamība no # 000000 līdz #ffffff (šos iestatījumus varat rediģēt, noklikšķinot uz grafiskā gradienta, lai atvērtu gradienta redaktoru), lineārais stils un izlīdzināt ar slāni, 145 ° leņķis
  • Insults: 1 pikseļa izmērs, ārējā pozīcija, normāls sajaukšanas režīms, 100% necaurredzamība, # 1f1f1f krāsa

Rezultātam vajadzētu izskatīties šādi:

Pabeigta prezentācijas zonas bāze

Pabeigta prezentācijas zonas bāze

Lai saglabātu šos iestatījumus kā stilu, dodieties uz paleti Stili, paletes apakšdaļā noklikšķiniet uz ikonas Izveidot jaunu stilu un nosauciet to Bāzes stils . Tas ļauj tos pašus iestatījumus izmantot vēlāk, atlasot slāni, kuram vēlaties to piemērot, un izvēlnē noklikšķinot uz vēlamā stila.

Jauna stila noteikšana no mūsu Prezentācijas bāzes grafikas

Jauna stila noteikšana no mūsu Prezentācijas bāzes grafikas

Neaizmirstiet saskaņot prezentācijas laukumu ar režģi!

Tagad pievienojiet iPhone 4s maketu (to varat lejupielādēt bez maksas no Piksedens ). No lejupielādes atveriet iPhone-4S-black-3views-mockup.psd, izvēlieties iPhone 4S (melnā) grupu un velciet un nometiet to un sakārtojiet to Prezentācijas bāzes iekšpusē, atstājot 90 pikseļu kreiso un 45 pikseļu zemāko piemali.

Mēs izveidosim jaunu ēnu iPhone, tāpēc izdzēsiet Shadow un Reflex slāņus no grupas iPhone 4S (melnā) (to varat izdarīt, ar peles labo pogu noklikšķinot uz tiem Layers Palette un atlasot Delete Layer). Tagad atlasiet Ellipse rīku (U) un izveidojiet figūru ar izmēriem 220 pikseļi pēc H: 7 pikseļi, iestatot Krāsa uz # 00000. Pārvērtiet šo slāni par viedo objektu, ar peles labo pogu noklikšķinot uz slāņa un izvēloties opciju Konvertēt uz viedo objektu. Iet uz Filtrs> Blur> Gaussian Blur un iestatiet rādiusu uz 6 pikseļiem, lai tas izskatās kā ēna.

Gausa izplūšanas pievienošana ēnai

Gausa izplūšanas pievienošana ēnai

Ja vēlaties pievienot tekstu prezentācijas apgabalam, virsrakstu varat izveidot, izmantojot horizontālā tipa rīku (T), kas iestatīts uz Myriad Pro Semibold, 48pt, Sharp. Dialoglodziņā Slāņa stils lietojiet pilienu ēnu, kas iestatīta uz Normal Blend Mode, Normal Blend Mode, 40% Opacity, 120 ° Leņķis, Use Global Light, 1px Distance, 3px Size, # f5f5f5 Color. Saskaņojiet tekstu ar režģi, atstājot 30 pikseļu kreiso malu un 20 pikseļu augšējo piemali.

Tagad uzrakstiet pamattekstu, ievietojot to 40 pikseļu attālumā zem nosaukuma, izmantojot DejaVu Sans Book, Sharp, 12pt. (Fontu var lejupielādēt bez maksas šeit .) Iestatiet vadošo vērtību 18pt (augšējā joslā noklikšķiniet uz ikonas, lai pārslēgtu rakstzīmju un rindkopu paneļus, vai atlasiet Logs> Raksturs ) un izmantojiet krāsu # f5f5f5.

Lai pievienotu slāņa stilu, atlasiet virsraksta teksta slāni, ar peles labo pogu noklikšķiniet uz tā un atlasiet Kopēt slāņa stilu, pēc tam dodieties uz pašreizējo teksta slāni, ar peles labo pogu noklikšķiniet uz tā un atlasiet Ielīmēt slāņa stilu. Varat arī manuāli izveidot jaunu slāņa stilu, tāpat kā iepriekš.

Aizpildītajai prezentācijas zonai vajadzētu izskatīties apmēram šādi:

Pabeigta prezentācijas zona

Pabeigta prezentācijas zona

2. Pasūtījuma pogas izveide

Izveidot pogu no jauna nav tik grūti. Mēs atjaunosim dizainu zemāk:

Pasūtījuma poga, kuru mēģināsim atjaunot

Pasūtījuma poga, kuru mēģināsim atjaunot

Vispirms izveidojiet jaunu grupu prezentāciju grupā un nosauciet to Poga . Kad noapaļotā taisnstūra rīks ir iestatīts uz 10 pikseļu rādiusu un # 262626 krāsu, uzzīmējiet figūru ar izmēriem 90 x 70 pikseļus un nosauciet to Cena . Dialoglodziņā Slāņa stils pievienojiet iekšējo ēnu ar parasto sajaukšanas režīmu, 45% necaurredzamību, 50 ° leņķi, 2 pikseļu attālumu un 5 pikseļu izmēru.

Pievienojiet tekstu, kas parāda cenu, izmantojot Myriad Pro Bold, Sharp, 24pt un Color iestatījumu uz # f5f5f5. Dialoglodziņā Slāņa stils lietojiet šādus iestatījumus:

  • Drop Shadow: Normāls sajaukšanas režīms, 40% necaurredzamība, 120 ° leņķis, globālās gaismas izmantošana, 1 pikseļu attālums, 3 pikseļu izmērs
  • Iekšējā ēna: normāls sajaukšanas režīms, 25% necaurredzamība, 120 ° leņķis, globālās gaismas izmantošana, 1 pikseļu attālums, 2 pikseļu izmērs
  • Iekšējais mirdzums: Normāls sajaukšanas režīms, 15% necaurredzamība, gradients no 100% līdz 0% necaurredzamība un #ffffff krāsa, 1 pikseļa izmērs

Pabeigta cenu zīme

Pabeigta cenu zīme

Lai izveidotu pogas daļu “Pieejams iPhone App Store”, izmantojiet noapaļotā taisnstūra rīku, kas iestatīts uz 10 pikseļu rādiusu un # d4e945 krāsu. Uzzīmējiet figūru ar izmēriem 240 x 80 pikseļi un nosauciet to Poga .

Tagad es jums parādīšu precīzu veidu, kā mainīt šī taisnstūra noapaļotos stūrus. Atlasiet pogas Vector maskas sīktēlu (noklikšķiniet uz tā slāņu paletē, lai to atlasītu vai noņemtu atlasi). Izmantojot Taisnstūra rīku ar formas slāņiem un Pievienot ceļa laukumam (+), kas izvēlēts, kā parādīts zemāk, izveidojiet kvadrātu, kas aizpildīs stūri, padarot to pilnīgi asu. Pielietojiet šīs izmaiņas abos labajos stūros.

Precīzāks pogas noapaļoto stūru maiņas veids

Precīzāks pogas noapaļoto stūru maiņas veids

Šai pogai mēs izveidosim jaunu modeli, tāpēc nospiediet Cmd / Ctrl + N lai izveidotu jaunu failu ar platumu 5 pikseļi un augstums 5 pikseļi. Atlasiet zīmuļa rīku (B), kura izmērs ir iestatīts uz 1 pikseļu un cietību līdz 100%, un uzzīmējiet diagonālo slīpsvītru, kā parādīts zemāk.

Pogas noteikšana

Pogas modeļa noteikšana un slāņa stila iestatīšana

Tagad dodieties uz Rediģēt> Definēt modeli un nosauciet savu rakstu, pēc tam atgriezieties iepriekšējā failā, lai pogai “Pieejams iPhone App Store” pievienotu šādus slāņa stila efektus:

  • Drop Shadow: Reizinātā maisīšanas režīms, 15% necaurredzamība, 90 ° leņķis, 1 pikseļa attālums, 1 pikseļa lielums
  • Iekšējā ēna: normāls sajaukšanas režīms, #ffffff krāsa, 90 ° leņķis, 1px attālums, 1px izmērs
  • Slīpums un reljefs: iekšējā slīpuma stils, gluda tehnika, 100% dziļums, 2 pikseļu izmērs, 90 ° leņķis, izcēluma režīms 0%, ēnas režīms 10%
  • Gradienta pārklājums: Reizināta sajaukšanas režīms, 30% necaurredzamība, gradienta 100% necaurredzamība no # 000000 līdz #ffffff Color, 150% skala
  • Raksta pārklājums: Reizina sajaukšanas režīms, 10% necaurredzamība un izvēlieties tikko izveidoto modeli no parauga parauga
  • Gājiens: 1 pikseļa izmērs, iekšējā pozīcija, normāls sajaukšanas režīms un aizpildījuma veids iestatīts uz gradientu ar 100% necaurredzamību no # 8a8a8a līdz # 767676 Atlasīta krāsa un reversa, lineārs stils, 90 ° leņķis

Velciet un nometiet Available_on_the_App_Store_ (pelēks) .png (pieejams no Vikipēdija ) pogas formas augšdaļā un rediģējiet viedo objektu šādi: dodieties uz Atlasīt> Krāsu diapazons, iestatiet izplūdumu uz 200 un izvēlieties pelēko fona krāsu un nomainiet to uz # d4e945. Izmantojot to pašu tehniku, atlasiet balto krāsu un nomainiet to uz # 272827.

Krāsu maiņa

Emblēmas “Pieejams iPhone App Store” krāsu maiņa

Mainiet App Store emblēmas lielumu, nospiežot Cmd / Ctrl + T. vai dodoties uz Rediģēt> Bezmaksas pārveidot un samazināt emblēmu līdz 80%, ierakstot šo vērtību gan W, gan H laukos. Centrējiet to. Pielietojiet transformāciju pēc uzaicinājuma. Lai emblēma labi saplūst ar pogas pamatni, mēs to padarīsim par cirpšanas masku. Ar peles labo pogu noklikšķiniet uz App Store emblēmas slāņa un atlasiet Izveidot izgriešanas masku.

kurš no šiem ir labākais strīdīgā rēķina apliecinošais dokuments

Tagad piešķirsim pogai jauku gradienta efektu, atlasot gradienta rīku (G). Gradienta redaktorā iestatiet tā krāsu uz #ffffff un kreisajā pusē iestatiet 100% necaurredzamību, bet labajā pusē - 0% necaurredzamību. Ekrāna augšdaļā esošajā rīkjoslā Gradient atlasiet ikonu Leņķa gradients un iestatiet necaurredzamību uz 10%. Izveidojiet jaunu slāni, nospiežot Shift + Cmd / Ctrl + N . Ar atlasīto slāni turiet Cmd / Ctrl un noklikšķiniet uz Pogas slāņa Vector Mask sīktēla, lai ierobežotu gradienta slāņa darbības līdz konkrētajai formai. Tagad velciet gradientu no apakšējā labā stūra uz augšējo kreiso stūri. Rezultātam vajadzētu izskatīties apmēram šādi:

Pasūtīšanas poga ar tās leņķa gradientu

Pasūtīšanas poga ar tās leņķa gradientu

Visbeidzot, pareizi novietojiet pogu, atstājot labo un apakšējo piemali 20 pikseļu attālumā.

3. Dažu lielisku atdalītāju izgatavošana

Pēc tam mēs izveidosim dažus lineārus atdalītājus, lai sadalītu dažādas dizaina daļas, kā parādīts zemāk esošajā attēlā:

Pielāgots atdalītājs darbībā, lai sadalītu divas atsauksmes

Pielāgots atdalītājs darbībā, lai sadalītu divas atsauksmes

Izveidojiet jaunu slāņu grupu un nosauciet to Atdalītāji .

Mēs sāksim projektēt separatoru, izveidojot horizontālu lineāru formu ar Line Tool (U). Īsam vertikālam atdalītājam izmantojiet izmērus 1 x 960 pikseļi (varat izmantot svara iestatījumu 1 pikseļi) un krāsu iestatiet uz # 585858. Sakārtojiet to 40 pikseļu attālumā zem tekstlodziņiem un dialoglodziņā Slāņa stils lietojiet zemāk redzamos gradienta pārklājuma iestatījumus:

Atdalītāju gradienta pārklājuma iestatījumi

Atdalītāju gradienta pārklājuma iestatījumi

Dublējiet slāni, mainiet formas krāsu un gradienta pārklājuma iestatījumus uz # 101010 un novietojiet šo jauno līniju zem pirmās.

Atlasiet divus slāņus un pārveidojiet tos par viedo objektu, nosaucot to Atdalītājs 1 .

Lai iegūtu garāku horizontālu atdalītāju, dublējiet Separator 1 slāni (ar peles labo pogu noklikšķiniet uz Layers paletes un Duplicate Layer), mainiet kopijas izmēru uz 1 x 200px, pagrieziet to par 90 ° (atkal varat izmantot Rediģēt> Bezmaksas pārveidošanas ceļš ) un arī to dublēt. Zemāk jūs varat redzēt šos atdalītājus gatavajā maketā. (Mēs šeit neiedziļināsimies, kā izveidot tekstu un ikonas.)

Pabeigtie atdalītāji darbībā

Pabeigtie atdalītāji darbībā

4. Pielāgota multivides atskaņotāja projektēšana

Pēc tam mēs izveidosim pielāgotu multivides atskaņotāja grafiku ar noapaļotiem stūriem, kā parādīts zemāk:

Pielāgotais atskaņotājs, kuru mēs atjaunosim šajā apmācībā

Pielāgotais atskaņotājs, kuru mēs atjaunosim šajā apmācībā

Izveidojiet jaunu slāņu grupu, nosauciet to Spēlētājs un ievietojiet to sadaļā Galvenais saturs.

Rāmim izmantojiet noapaļotā taisnstūra rīku. Izveidojiet figūru ar izmēriem 550 x 355px un # c2c2c2 Color. Nosauciet slāni Rāmis un lietojiet šādus slāņa stila iestatījumus:

  • Drop Shadow: Normāls sajaukšanas režīms, 40% necaurredzamība, 120 ° leņķis, globālās gaismas izmantošana, 1 pikseļu attālums, 3 pikseļu izmērs
  • Iekšējā ēna: normāls sajaukšanas režīms, #ffffff krāsa, 20% necaurredzamība, 120 ° leņķis, globālās gaismas izmantošana, 2 pikseļu attālums, 0 pikseļu izmērs
  • Slīpums un reljefs: iekšējā slīpuma stils, gluda tehnika, 50% dziļums, 3 pikseļu izmērs, 120 ° leņķis, globālās gaismas izmantošana, izgaismošanas režīms 50%
  • Gradienta pārklājums: Pārklājuma sajaukšanas režīms, 20% necaurredzamība, gradienta 100% necaurredzamība no # 000000 līdz #ffffff Color, lineārs stils, 145 ° leņķis, 100% mērogs
  • Insults: 1 pikseļa lielums, iekšpusē, normāls sajaukšanas režīms, krāsu aizpildīšanas veids, # 474947 krāsa

Notiek rāmis

Notiek rāmis

Lai izveidotu noapaļotos stūrus, uzzīmējiet taisnstūri ar izmēriem 26 x 28 pikseļi un krāsu # 585858. Izmantojot tiešās atlases rīku (A), atlasiet apakšējo labo stūri un virziet to taisnstūra centra virzienā, lai iegūtu trīsstūra formu. Izmantojiet daudzstūra laso rīku (L), lai sagrieztu skalēna trīsstūri esošā iekšpusē tā garākajā pusē. Veiciet platumu 8 pikseļus un augstumu 9 pikseļus. (Izmantojiet zemāk esošo attēlu kā atsauci.) Pielietojiet tos pašus iekšējās ēnas, gradienta pārklājuma un gājiena iestatījumus kā rāmim.

Pielāgotais stūris atskaņotājam

Pielāgotais stūris atskaņotājam

Nosauciet slāni c1 (kā 1. stūrī), trīs reizes dublējiet to, katru no dublikātiem brīvi pārveidojiet, lai tie ietilptu citā rāmja stūrī, un padariet tos visus rāmja slāņa cirpšanas maskas.

Izveidojiet jaunu Attēla turētājs izmantojot tās pašas metodes kā iepriekš. Šis ir 532 x 336 pikseļu taisnstūris ar krāsu # 262726 un bez slāņu stiliem. Pievienojiet attēlu, kuru vēlaties parādīt atskaņotājā (tas var būt viss, kas jums patīk: mēs to neesam piedāvājuši) un izveidojiet to par apgriešanas masku.

Attēla turētāja apakšdaļā virs attēla pievienojiet taisnstūri ar izmēriem 532 x 85 pikseļi, iestatiet necaurredzamību uz 60% un nosauciet slāni Teksta turētājs .

Uzrakstiet atskaņotāja apakšdaļai tekstu, izmantojot Myriad Pro Bold, Sharp, 14pt. Iestatiet vadošo vērtību 18pt, iestatiet Color uz # f5f5f5 un novietojiet to virs iepriekšējā slāņa, centrējot to vertikāli un atstājot kreiso atstarpi 20px. Pielietojiet tos pašus Drop Shadow iestatījumus, kurus izmantojām cenu tagam.

Atskaņotāja pogai atlasiet Pielāgotas formas rīku (U), izlidošanas izvēlnē izvēlieties Circle Thin Frame ar #ffffff Color un izveidojiet formu ar izmēriem 120 x 120px. Dialoglodziņā Layer Style iestatījumā Stroke iestatiet Size uz 1px, Position uz Outside un Color uz #ffffff. Ar to pašu rīku izvēlieties trīsstūra formu (iespējams, jums būs jānoklikšķina uz mazās bultiņas ikonas izlidošanas izvēlnes labajā pusē un jāatlasa Visi, lai to redzētu). Izmantojot tos pašus iestatījumus un slāņa stilu kā aplim, izveidojiet 31 x 36 pikseļu trīsstūri. Konvertējiet šos divus slāņus par viedo objektu, centrējiet tos un nosauciet slāni Spēlētāja bultiņa .

Pabeigtais spēlētājs un tā slāņu grupas

Pabeigtais spēlētājs un tā slāņu grupas

Un tā ir pabeigta mūsu pielāgotā grafika. Izklaidējieties, izmēģinot šīs metodes! Pārbaudiet un pielāgojiet tos saviem jaunajiem dizainiem un izveidojiet kaut ko pārsteidzošu.

Resursi

Apmācībā parādītās grafikas izveidošanai tiek izmantoti šādi bezmaksas resursi:

Pārējā maketa izveidē tika izmantoti šādi resursi, taču tie nav nepieciešami pašai apmācībai:

Neaizmirstiet apskatīt jaunākās funkcijas Photoshop CS6 !