Izveidojiet tīru un elegantu emuāru izkārtojumu Photoshop CS6

Šajā apmācībā es jums parādīšu procesu vienkārša un tīra dizaina emuāra izveide izmantojot jaunāko Photoshop. Mēs izmantosim jauno Rakstzīmju stili un Sadaļu stili lai palīdzētu mums racionalizēt procesu.

Lai sekotu šai apmācībai, jums būs nepieciešami šādi resursi:

• Bezmaksas fontu seansi no Bernd Montag.
• 26 Atkārtojams Pixel Pattern no PSDfreemium.
• Bezmaksas sociālo mediju ikonas no Daniele Selvitella.

• Demo

Gleznas sagatavošana

1. solis

Šajā projektā mēs izmantosim 960 g kā pamatu. Lejupielādējiet veidni no tās galvenās lapas un zip faila, meklējiet Photoshop failu. Atveriet failu "12 sleju režģis" programmā Photoshop.

Lai paslēptu 12 Col Grid slāni, noklikšķiniet uz acu ikonas; mums tas nav vajadzīgs tagad.

2. solis

Pašreizējais audekla izmērs ir pārāk mazs. Klikšķis Attēls> Gleznas izmērs (vai Ctrl + Alt + C). Pievienojiet lielāku izmēru un pārliecinieties, ka tā stiprinājuma punkts ir centrēts.

3. solis

Nospiediet Ctrl + R, lai atklātu lineālu. Klikšķis Skatīt> Jauns Rokasgrāmata, lai izveidotu jaunu rokasgrāmatu, kas palīdzēs mums precīzi izstrādāt. Izvēlieties Vertikāli un pozīcijā: 185 px veikt vertikālu vadotni 185 px no audekla augšējā kreisā stūra.

4. solis

Zīmējiet citu vertikālu vadotni pozīcijā 150 px, 1095 px un 1130 px.

Zemāk ir mūsu gala ceļvedis audeklā.

Krāsu tēmas sagatavošana

5. solis

Šim dizainam mēs izmantojam jauku krāsu kombināciju no Colorlouver. Noklikšķiniet uz saites Priekšskatījums, lai atvērtu krāsu kombināciju kā JPEG failu.

Saglabājiet krāsu kombināciju un ievietojiet to Photoshop failā. Ievietojot attēlu tieši audekla iekšpusē, varam ātrāk un vieglāk izlasīt tās krāsu.

Fona sagatavošana

6. solis

Izvēlieties Pamatinformācija slāni un noklikšķiniet uz bloķēšanas ikonas slāņu paneļa augšpusē, lai to atbloķētu. Lai mainītu krāsu, veiciet dubultklikšķi uz sīktēla.

Noklikšķiniet uz otrās krāsas, # 948371, lai to izvēlētos.

7. solis

Zīmējiet audekls uz taisnstūra formas. Tas būs otrais fons.

8. solis

Saglabājiet izvēlēto formu. Iekš Opciju josla, atvērts Aizpildiet Krāsa noklikšķiniet uz krāsu riteņa ikona. Kad ir atvērts dialoglodziņš Krāsu atlasītājs, noklikšķiniet uz pirmās krāsas, lai to atlasītu. Par to Insults izvēlieties krāsu Nav.

9. solis

Izveidojiet jaunu slāni un pēc tam atlasiet augšējo audumu, izmantojot taisnstūrveida telts rīku. Aktivizējiet gradienta rīks un aizpildiet to radiāli slīpums no baltas uz melnu. Pārliecinieties, vai slīpums ir vērsts uz audekla virsmas.

Mainiet tās Maisījums režīmā uz Ekrāns un samazināt tās Necaurredzamība uz 37%.

10. solis

Izveidojiet jaunu slāni un nosauciet to par “ēnu”.

Zīmējiet taisnstūra izvēli sekundārā fona apakšā, kā parādīts. Klikšķis Rediģēt: aizpildiet. Iestatīt Izmantot uz Melns. Klikšķis labi aizpildīt atlasi ar melnu.

11. solis

Mīkstina to, izmantojot Gauss Blur. Klikšķis Filtrs> Blur> Gaussian Blur.

12. solis

Turiet Alt un pēc tam novietojiet kursoru starp ēna un augšējā fona slāni. Neatverot Alt taustiņu, noklikšķiniet uz pārvērst slāni uz Clipping Mask. Pārvēršot to Clipping Mask, ēna tagad iet augšējā fonā.

13. solis

Nolieciet ēnu Necaurredzamība uz 50% lai tas būtu smalks. Zemāk redzams rezultāts 100% palielinājumā.

14. solis

Vienmēr ir laba ideja šos slāņus ievietot vienā grupā. Lai to izdarītu, atlasiet visus slāņus un pēc tam noklikšķiniet uz Ctrl + G.

Galvene

15. solis

Uzzīmējiet taisnstūri augšējā audeklā, kā parādīts.

16. solis

Iekš Opciju josla, iestatīts Insults krāsu uz # af9f8e.

17. solis

Par to Aizpildiet krāsu, izvēlieties lineārais gradients no # d0c4b9 uz # a89c91.

Zemāk redzams 100% skatījums.

Vietnes nosaukums

18. solis

Pievienojiet vietnes nosaukumu dizaina kreisajā pusē. Ievērojiet izvietojumu, kā parādīts zemāk. Veiciet dubultklikšķi uz teksta un pievienojiet Drop Shadow. Lai to izmantotu, izmantojiet Sansation.

Izvēlne

19. solis

Zīmējiet izvēlnes no izvēlnes joslas otras puses. Izmantojiet fontu Sansation 14 pt. Atkal pamaniet izvietojumus.

20. solis

Aktīvajai izvēlnei iestatiet tā fontu tipu treknrakstā.

21. solis

Aktivizēt Daudzstūra rīks un iestatiet Sides uz 3. Zīmējiet trīsstūra formu Aizpildiet: # 3d3123 un Insults: nav. Pievienot Slāņu stils > Drop Shadow.

22. solis

Uzsvērsim aktīvo izvēlni, pievienojot to zem līnijas. Aktivizējiet Līnijas rīks un iestatiet tā svaru 5 px. Izvēlieties # f76b6a tās piepildīšanai, bez insulta.

Ievietojiet rindu pa labi zem aktīvās izvēlnes un pievienojiet 1 px atstarpi izvēlnes joslas apakšai.

Rakstzīmju stilu izmantošana

23. solis

Saglabāsim rakstzīmju iestatījumu kā rakstzīmju stilu. Šī funkcija ir vienkāršota versija rakstzīmju stiliem InDesign. Lai to saglabātu, aktivizējiet tekstu un pēc tam noklikšķiniet uz ikonas „Jauna rakstzīmju stils”.

Veiciet dubultklikšķi uz jaunā rakstzīmju stila un izmantojiet šādu iestatījumu.

24. solis

Atlasiet citu izvēlni un pēc tam noklikšķiniet uz Rakstzīmju stila, lai to izmantotu. Ja blakus rakstzīmju stilam atradīsiet plus zīmi, tas nozīmē, ka rakstzīmei ir atšķirīgs iestatījums. Lai ignorētu iestatījumus, noklikšķiniet uz apļveida bultiņas ikonas.

25. solis

Atkārtojiet iepriekšējo soli, lai izveidotu jaunu rakstzīmju stilu aktīvajai izvēlnei.

26. solis

Tātad, kāda ir nozīme rakstzīmju stilu lietošanā? Rakstzīmju stili palīdz mums centralizēt rakstzīmju iestatījumu. Mēs varam vienkārši rediģēt rakstzīmju stilu, lai rediģētu katru tekstu, izmantojot šo stilu. Skatiet zemāk redzamo piemēru. Ja rediģējam fontu veidu rakstzīmju stilā Augšējā izvēlne - Normal uz Corbel, visas parastās izvēlnes tiek automātiski nomainītas uz Corbel.

27. solis

Izveidojiet jaunu slāni un novietojiet to zem izvēlņu joslas. Noklikšķiniet uz izvēlnes joslas, lai veiktu jaunu izvēli, pamatojoties uz tās formu. Aizpildiet to ar melns.

28. solis

Noņemiet atlasi, izmantojot Ctrl + D. Mīkstiniet to, pievienojot Gausa izplūšana, Filtrs> Blur> Gaussian Blur.

Slīdni

29. solis

Zīmējiet taisnstūra formu ar 10 kolonnu platumu (skatiet tālāk).

Par to Aizpildiet krāsu izvēlieties # dfd1c2. Par to Insults izvēlieties # c8baac ar izmēru 10 punkti. Noklikšķiniet uz mazās nolaižamās bultiņas blakus līnijas priekšskatījumam un pārliecinieties Saskaņot iekšpusē ir izvēlēts.

30. solis

Ielīmējiet attēlu rāmja augšpusē. Konvertējiet to uz Apgriešanas maska hitting Ctrl + Alt + G. Attēls automātiski iet slīdņa rāmī. Ja nepieciešams, varat pārvietot un mainīt attēla izmērus, neietekmējot tā rāmi.

31. solis

Zīmējiet vēl vienu taisnstūra formu aiz slīdņa ar tādu pašu krāsu. Pārliecinieties, ka tas ir nospiests uz ārējo vadotni. Pievienot Slāņu stils> Pattern overlay izmantojot PSDfreemium pikseļu rakstu. Tonizējiet to Necaurredzamība padarīt to smalko.

32. solis

Zīmējiet taisnstūra formu virs formas Aizpildiet: # b3aca5 un nav Stroke. Nospiediet Ctrl + T un pēc tam pagrieziet to 45 °. Pārvērst slāņa formu uz Apgriešanas maska.

33. solis

Dublējiet formu un mainiet tā izmērus. Mainiet tās Aizpildiet tumsā krāsā. Pārvērst slāņa formu uz Apgriešanas maska.

34. solis

Atkārtojiet to pašu soli, lai otrā pusē izdarītu citu bultiņu.

35. solis

Ctrl klikšķa slaidu rāmis, lai veiktu jaunu izvēli. Izveidojiet jaunu slāni un konvertējiet to uz a Apgriešanas maska. Aizpildiet atlasi ar melns.

36. solis

Pēc tam noņemiet atzīmi (Ctrl + D) mīkstina to izmanto Gausa izplūšana.

Ja nepieciešams, varat samazināt ēnu necaurredzamību.

37. solis

Ar slīdņa stūri piestipriniet noapaļotu taisnstūri ar Aizpildiet # c8baac.

38. solis

Zīmējiet apli formas iekšpusē. Iestatiet tā Insults uz melns ar izmēru 1 pt un noņemiet aizpildi.

39. solis

Atlasiet aplis ceļš, izmantojot Ceļa izvēle rīks. Shift + Alt-velciet ceļu, lai to dublētu.

Atkārtojiet, lai izveidotu vairākus lokus.

40. solis

Izvēlieties vienu no apļa ceļiem. Nospiediet Ctrl + Shift + J, lai samazinātu to uz jaunu slāni.

41. solis

Iekš Opciju josla, noņemt to Insults un mainīt tās Aizpildiet uz a radiāli slīpums no # e38989 uz # bb5c5c. Pievienot Slāņu stils> Ārējais spīdums un Drop Shadow.

42. solis

Zem slīdņa zīmējiet elipsveida izvēli. Izveidojiet jaunu slāni un aizpildiet to melns.

43. solis

Noņemiet atzīmi (Ctrl + D). Mīkstina to, izmantojot Gausa izplūšana.

Apakšējais fons

44. solis

Uzzīmējiet vēl vienu taisnstūra formu apakšējā fonā. Izmantojiet to pašu Aizpildiet un Insults krāsu kā slīdņa formu.

Kā vienmēr, esiet ļoti piesardzīgi attiecībā uz izvietošanu. Mēs vēlamies, lai tas aptver katru gleznas gidu.

Pievienot Slāņu stils> Pattern overlay.

Zemāk ir 100% palielinājums.

45. solis

Atlasiet savu augšējo apgabalu, izmantojot rīku Taisnstūra Marquee.

46. ​​solis

Izveidojiet jaunu slāni, novietojiet to aiz formas. Aizpildiet atlasi ar melns. Nospiediet Ctrl + T, ar peles labo pogu noklikšķiniet un izvēlieties Perspektīva.

Velciet augšējos stūriem uz āru.

Noklikšķiniet vēlreiz ar peles labo pogu un izvēlieties Mērogs. Velciet augšējo rokturi uz leju.

Ar peles labo pogu noklikšķiniet un izvēlieties Warp. Velciet pa kreisi un pa labi segmentu uz iekšu.

Mīkstina to, izmantojot Gausa izplūšana.

Atzīmējiet taustiņu Necaurredzamība uz 20%.

47. solis

Uzzīmējiet baltu taisnstūri fona iekšpusē. Tas būs fona vietnes galvenajam saturam.

Pievienojiet 10 pikseļu atstarpi fona kreisajā, labajā un augšējā pusē. Attālumam jābūt viegliem, jo ​​mēs esam izstrādājuši ceļvedi agrīnā posmā. Pievienot Slāņu stils> Ārējais spīdums.

48. solis

Pievienojiet jaunu rokasgrāmatu, 25 px no formas augšējās puses.

Sadaļas sadaļa

49. solis

Pievienojiet jaunu rakstzīmju stilu lapas sadaļas nosaukumam un tā aprakstam.

Pievienojiet sadaļas nosaukumu un tā aprakstu, izmantojot rīku Tips. Lietojiet stilu, ko esam veikuši agrāk. Pārliecinieties, ka no fona augšējās puses pievienojiet 25 pikseļu laukumu, izmantojot iepriekš sniegto rokasgrāmatu.

50. solis

Ar vietnes aprakstu zīmējiet 5 zīmju līniju ar Aizpildiet: # 938270 un Insults: nav.

Blog Post

51. solis

Veiciet vēl vienu rakstzīmi stila nosaukumam.

52. solis

Pievienojiet ieraksta nosaukumu un lietojiet iepriekšējo rakstzīmju stilu.

53. solis

Zīmējiet taisnstūra formu zem nosaukuma ar 4 kolonnu platumu. Iestatīt balts par to Aizpildiet un #bebebe par to Insults. Pievienot Slāņu stils> Stroke.

54. solis

Ielīmējiet attēlu virs formas. Konvertēt to uz izgriešanas maska ​​(Ctrl + Alt + G).

55. solis

Zīmējiet ar noapaļotu taisnstūri Aizpildiet: # 8e8380 un Insults: nav. Konvertējiet to uz Apgriešanas maska.

56. Solis

Izveidojiet emuāra metadatu jaunus rakstzīmju stilus.

57. solis

Pievienojiet formāta metadatu tekstu un pielietojiet agrāk veikto rakstzīmju stilu.

58. solis

Aktivizēt Tips rīks un noklikšķiniet uz velciet, lai izveidotu teksta lodziņu. Iestatiet tā platumu līdz 4 slejām. Klikšķis Tips> Paste Lorem Ipsum aizpildīt to ar automātiski ģenerētu Lorem Ipsum no Photoshop.

59. solis

Izveidojiet jaunu rakstu saturu rakstzīmju saturam. Noklikšķiniet uz jaunās ikonas paneļa stilu panelī.

Veiciet dubultklikšķi uz rindkopu stila un izmantojiet šo iestatījumu.

60. solis

Lietojiet šo stilu pēc satura. Varat arī eksperimentēt ar tās ievilkšanas un atstarpes iestatījumiem.

Lai izveidotu tīmekļa dizainu, deaktivizējiet defisi.

61. solis

Zīmējiet ar noapaļotu taisnstūri Aizpildiet: # 8e8380 un Insults: nav. Pievienot Slāņu stils> Pattern overlay. Lai nodrošinātu konsekvenci, izmantojiet to pašu modeli kā slīdni.

62. solis

Pievienojiet pogas etiķeti. Es iesaku jums to saglabāt kā rakstzīmju stilu. Tādā veidā mēs varam to viegli izmantot citām pogām.

63. solis

Iepriekšējā poga ir paredzēta normālam stāvoklim. Atkārtojam to un mainiet tās krāsu uz # f76b6a. Arī iestatiet tā etiķetes tipu treknrakstā.

64. solis

Novietojiet ziņu grupas iekšienē un pēc tam nospiediet Ctrl + J, lai to dublētu. Alt-velciet, lai dublētu grupu.

Atkārtojiet to pašu darbību, lai izveidotu vairāk ziņu. Atcerieties mainīt katra ieraksta attēlu un nosaukumu.

65. solis

Dublikāts Lasīt vairāk pogas un nomainiet tās etiķeti uz numuru. Mēs to izmantosim lapu navigācijai. Neaizmirstiet iestatīt vienu no pogām, lai novietotu stāvokli.

66. solis: kājene

Sāksim strādāt pie kājenes. Pievienojiet logrīka nosaukumu un tā aprakstu.

67. solis

Pievienojiet saiti un zīmējiet zem tā 1 px. Iestatīt Aizpildiet: Nav un Stroke: # 8e8380.

68. solis

Klikšķis Vairāk iespēju pogas un izvēlieties Pārtrauktā līnija.

69. solis

Pievienojiet widget vairāk saites.

70. Solis

Kopēt widget.

71. solis

Mums ir jāpievieno arī lidojuma stāvoklis. Iestatiet vienu no saitēm uz treknrakstu.

Zem šīs aktīvās saites pievienojiet 5 px līniju. Iestatiet tās krāsu uz # f76b6a. Konsekvences labad šīs saites izskats ir līdzīgs izvēlnes joslas aktīvajai izvēlnei.

72. solis

Pievienojiet vēl vienu taisnstūri apakšējā daļā. Iestatiet tā Aizpildiet uz # 3d3123.

Kājenes informācija

73. solis

Pievienojiet kājenes informāciju, izmantojot Tips rīks. Dodiet tai tumšu Drop Shadow pievienot kontrastu tās fonam.

Sociālais tīkls

74. solis

Pievienojiet dažas sociālās mediju ikonas no Daniele Selvitella. Pievienot Slāņu stils> Ārējais spīdums.

75. solis

Noregulējiet parasto ikonas uz 50%. Pārvietojiet stāvokli, lai saglabātu savu stāvokli Necaurredzamība pie 100%.

76. Solis

Satveriet brīvās rokas kursora ikonu un novietojiet mazāko roku kursoru virs aktīvās vai hover saites.

Galīgais rezultāts

Tas ir mūsu galīgais rezultāts. Jūs varat redzēt, ka jaunākajai Photoshop versijai ir dažas interesantas iespējas, lai izstrādātu tīmekļa izkārtojumu. Rakstzīmju stili un rindkopu stili ir nozīmīgs uzlabojums katram tīmekļa dizainerim.

• Demo
• Lejupielādēt avotu