Kujundage puhas ja elegantne blogi paigutus Photoshop CS6-s

Selles juhendis näitan teile protsessi lihtne ja puhas disain blogi kasutades viimast Photoshopit. Me kasutame uut Märkide stiilid ja Lõike stiilid aidata meil protsessi lihtsustada.

Selle juhendi jälgimiseks on vaja järgmisi ressursse:

• Tasuta Font Sansation Bernd Montagilt.
• 26 PSDfreemiumi korduv pikslite muster.
• Tasuta sotsiaalmeedia ikoonid Daniele Selvitellast.

• Demo

Lõuendi ettevalmistamine

Samm 1

Selles disainis kasutame raamistikuna 960 g. Laadige mall oma põhilehelt ja zip-faili sisse, otsige Photoshop-faili. Avage Photoshopis 'Column Grid' fail 12.

Klõpsake 12 Col Grid'i kihi silmakuval, et seda peita; me ei vaja seda praegu.

2. etapp

Praegune lõuendi suurus on liiga väike. Klõpsake nuppu Pilt> Lõuendi suurus (või Ctrl + Alt + C). Lisage suurem suurus ja veenduge, et selle kinnituspunkt on keskele.

3. etapp

Joonlaua avamiseks klõpsake Ctrl + R. Klõpsake nuppu Vaade> Uus Juhend uue juhendi koostamiseks, mis aitab meil täpselt kujundada. Valige Vertikaalne ja positsioonil: 185 px vertikaalse juhiku tegemiseks 185 pikslit lõuendi ülemisest vasakpoolsest nurgast.

4. etapp

Joonista teine ​​vertikaalne juhik asendisse 150 px, 1095 px ja 1130 px.

Allpool on meie lõplik juhend lõuendil.

Värviteema ettevalmistamine

5. etapp

Selle disaini jaoks kasutame Colorlouverilt ilusat värvikombinatsiooni. Värvikombinatsiooni avamiseks jpeg-failina klõpsake lingil Eelvaade.

Salvestage värvikombinatsioon ja asetage see Photoshopi faili. Paigutades pildi otse lõuendile, saame proovida selle värvi kiiremini ja lihtsamalt.

Tausta ettevalmistamine

6. etapp

Valige Taust kiht ja klõpsa lukustuse avamiseks paneelil Kihid paneeli peal. Oma värvi muutmiseks topeltklõpsake pisipildil.

Klõpsake teist värvi, # 948371, selle valimiseks.

7. samm

Joonista lõuendi peal ristkülikukujuline kuju. See on teine ​​taust.

8. samm

Hoidke kuju valitud. In Võimalusriba, avatud Täitke Värv ja klõpsake siis nuppu värviratta ikoon. Kui dialoogiaken Color Picker (Värvivalija) on avatud, klõpsake selle valimiseks esimest värvi. Selle eest Stroke värvi valimine Puudub.

9. samm

Tehke uus kiht ja seejärel valige ristkülikukujulise telgitööriista abil ülemine lõuend. Aktiveeri gradienti tööriist ja täitke see radiaalne gradient valge kuni must. Veenduge, et gradiendi keskpunkt on lõuendi peal.

Muutke selle Segu režiimis kuni Ekraan ja vähendada selle Läbipaistmatus kuni 37%.

10. etapp

Tehke uus kiht ja nimetage see varjus.

Joonista ristkülikukujuline valik sekundaarse tausta all, nagu näidatud. Klõpsake nuppu Redigeeri: täitke. Määra Kasutage kuni Must. Klõpsake nuppu Okei valiku täitmiseks mustaga.

11. samm

Pehmendage seda Gauss-Bluri abil. Klõpsake nuppu Filter> Blur> Gaussian Blur.

12. samm

Hoidke Alt ja asetage kursor vahele vari ja ülemine taust kiht. Alt klahvi vabastamata klõpsake nuppu teisendage kiht lõikamismaski. Muutes selle Clipping Mask'iks, läheb vari nüüd ülemise tausta sisse.

13. etapp

Too varju alla Läbipaistmatus kuni 50% et see peeneks muuta. Allpool näete tulemust 100% suurendusega.

14. samm

Alati on hea kiht need kihid ühes rühmas panna. Selleks, valige kõik kihid ja seejärel klõpsake Ctrl + G.

Päis

15. samm

Joonista ülemisele lõuendile ristkülik nagu näidatud.

16. etapp

In Võimalusriba, seatud Stroke värvi # af9f8e.

17. samm

Selle eest Täitke värv, valige lineaarne gradient alates # d0c4b9 kuni # a89c91.

Allpool on 100% vaade.

Saidi nimi

18. samm

Lisage veebilehe nimi disaini vasakul küljel. Jälgige paigutust, nagu allpool näidatud. Topeltklõpsake teksti ja lisage Drop Shadow. Kasutage selle fondi jaoks Sansationi.

Menüü

19. samm

Joonistage menüüd menüüriba teisel poolel. Kasuta fondi Sansation 14 pt. Jällegi märkige paigutusi.

Samm 20

Aktiivse menüü jaoks määrake selle kirjatüüp paksus kirjas.

Samm 21

Aktiveeri Hulknurga tööriist ja seadistage Pooled kuni 3. Joonista kolmnurga kujutisega Täida: # 3d3123 ja Stroke: Puudub. Lisama Kihi stiil > Hoidke vari.

22. etapp

Rõhutame aktiivset menüüd, lisades selle alla joone. Aktiveeri Liini tööriist ja seadke selle kaal 5 px. Valige # f76b6a selle täitmiseks, ilma löögita.

Pange rida paremale aktiivse menüü alla ja lisage menüüriba alaosale 1 px.

Märkide stiilide kasutamine

Samm 23

Salvestame sümbolite märkide stiilina. See funktsioon on InDesigni sümbolite lihtsustatud versioon. Selle salvestamiseks aktiveerige tekst ja klõpsake ikooni „Uus märkide stiil”.

Topeltklõpsake uut laadi stiili ja kasutage järgmist seadistust.

24. samm

Valige teine ​​menüü ja klõpsake selle rakendamiseks suvandil Character Style. Kui leiate märkide stiili kõrvale plussmärgi, tähendab see, et tähemärk on erinev. Seadete tühistamiseks klõpsake ümmarguse noole ikoonil.

25. etapp

Korrake eelmist sammu, et teha aktiivse menüü jaoks uus märkide stiil.

26. etapp

Niisiis, milline on märkide stiilide kasutamine? Märkide stiilid aitavad sümbolite seadistamisel tsentraliseerida. Me saame lihtsalt muuta märkide stiili, et muuta seda stiili kasutades igat teksti. Vaadake allpool olevat näidet. Kui me muudame kirjatüübi märkide stiili sees Ülesmenüü - Tavaline Corbelile muudetakse kogu tavaline menüü automaatselt Corbeliks.

27. samm

Tee uus kiht ja asetage see menüüriba alla. Ctrl klõpsab menüüribal uue valiku tegemiseks selle kuju alusel. Täitke see must.

28. etapp

Eemaldage valik Ctrl + D abil. Pehmendage seda, lisades Gaussi hägusus, Filter> Blur> Gaussian Blur.

Liugur

29. etapp

Joonista ristkülikukujuline kuju, mille laius on 10 veergu (vt allpool).

Selle eest Täitke värv valige # dfd1c2. Selle eest Stroke valige # c8baac suurusega 10 pt. Klõpsake väikese rippmenüüst rea eelvaate kõrval ja veenduge Joondage sees on valitud.

30. etapp

Kleepige pilt raami peale. Teisenda see Lõikamismask lööb Ctrl + Alt + G. Pilt liigub automaatselt liuguriraami sisse. Vajadusel saate pilti liigutada ja selle suurust muuta ilma selle raami mõjutamata.

31. etapp

Joonistage sama värvi liuguri taha teine ​​ristkülikukujuline kuju. Veenduge, et klõpsate selle kõige kaugemale. Lisama Kihi stiil> Mustrikate kasutades PSDfreemiumist saadud pikslit. Too see alla Läbipaistmatus teha oma peen.

Samm 32

Joonista ristkülikukujuline kuju kuju kohal Täida: # b3aca5 ja no Stroke. Vajuta Ctrl + T ja seejärel pöörake seda 45 °. Teisenda kihi kuju Lõikamismask.

Samm 33

Dubleerige kuju ja muutke selle suurust. Muutke selle Täitke tumedama värviga. Teisenda kihi kuju Lõikamismask.

34. etapp

Korrake sama sammu teise noolega teisel pool.

Samm 35

Uue valiku tegemiseks klõpsa klõpsuga slaidiraamile. Tee uus kiht ja teisendage see a-ks Lõikamismask. Täitke valik must.

Samm 36

Seejärel tühistage valik (Ctrl + D) pehmendada see kasutab Gaussi hägusus.

Vajadusel saate varju läbipaistmatust vähendada.

Samm 37

Joonistage liuguri nurgas ümardatud ristkülik Täida # c8baac.

Samm 38

Joonistage ringi kuju sisse. Seadke see Stroke kuni must suurusega 1 pt ja eemaldage täitmine.

Samm 39

Valige ringi tee kasutamine Tee valimine tööriist. Shift + Alt-lohista tee dubleerimiseks.

Korrake seda, et joonistada rohkem ringe.

Etapp 40

Valige üks suhtlusringidest. Vajutage Ctrl + Shift + J, et lõigata see uuele kihile.

Samm 41

In Võimalusriba, eemaldage see Stroke ja muuta selle Täitke kuni a radiaalne gradient alates # e38989 kuni # bb5c5c. Lisama Kihi stiil> Välimine sära ja Drop Shadow.

Samm 42

Tõmmake liuguri all elliptiline valik. Tee uus kiht ja täitke see must.

Samm 43

Tühista valik (Ctrl + D). Pehmendage seda kasutades Gaussi hägusus.

Alumine taust

Samm 44

Joonista teine ​​ristkülikukujuline kujutis alumise tausta jaoks. Kasutage sama Täitke ja Stroke värvi kui liuguri kuju.

Nagu alati, olge selle paigutamisega väga ettevaatlik. Me tahame, et see kataks iga lõuendi juhendi.

Lisama Kihi stiil> Mustrikate.

Allpool on toodud 100% suurendus.

Samm 45

Valige selle ülemine ala ristkülikukujunduse tööriista abil.

Etapp 46

Tee uus kiht, asetage see kuju taha. Täitke valik must. Vajuta Ctrl + T, paremklõpsake ja valige Perspektiiv.

Lohistage oma ülemised nurgad väljapoole.

Paremklõps uuesti ja vali Skaala. Lohistage ülemine käepide alla.

Paremklõps ja vali Warp. Lohistage vasakut ja paremat segmenti sissepoole.

Pehmendage seda kasutades Gaussi hägusus.

Too alla Läbipaistmatus kuni 20%.

Samm 47

Joonista taustal valge ristkülik. See on saidi peamise sisu taust.

Lisage tausta vasakule, paremale ja ülemisele poolele 10-tolline tühik. Vahekaugus peaks olema lihtne, sest oleme juhendi teinud varakult. Lisama Kihi stiil> Välimine sära.

Samm 48

Lisage kuju ülemisest küljest uus juhend, 25 pikslit.

Jaotise pealkiri

Samm 49

Lisage lehe jaotise pealkirja ja selle kirjelduse jaoks uus märkide stiil.

Lisage jaotise pealkiri ja selle kirjeldus, kasutades tööriista Tüüp. Rakenda varasemaid stiile. Veenduge, et lisate 25 taustaruumi oma tausta ülemisest osast eelnevalt tehtud juhendi abil.

Samm 50

Joonista saidi kirjelduse all 5-px joon Täida: # 938270 ja Stroke: Puudub.

Blogipost

Samm 51

Tehke postituse pealkirjale veel üks märkide stiil.

Etapp 52

Lisage postituse pealkiri ja rakendage eelmist märkide stiili.

Etapp 53

Joonista ristküliku kuju 4 veeru laiusega. Määra valge selle eest Täitke ja #bebebe selle eest Stroke. Lisama Kihi stiil> Stroke.

Etapp 54

Kleepige pilt kuju peale. Teisendage see lõikamismaskiks (Ctrl + Alt + G).

Samm 55

Joonista ümardatud ristkülik koos Täida: # 8e8380 ja Stroke: Puudub. Teisenda see Lõikamismask.

Etapp 56

Tehke blogi metaandmetele uued märkide stiilid.

Samm 57

Lisage kuju peale metaandmete tekst ja rakendage varem tehtud märkide stiili.

Etapp 58

Aktiveeri Tüüp tekstikasti tegemiseks klõpsa ja lohista. Seadke selle laius 4 veergu. Klõpsake nuppu Tüüp> Kleebi Lorem Ipsum see täidetakse automaatse genereeritud Lorem Ipsumi abil Photoshopist.

Samm 59

Tehke märkide sisu jaoks uus lõikstiil. Klõpsake paneelil Stiilide stiilid uut ikooni.

Topeltklõpsake lõigu stiili ja kasutage seda järgmist seadistust.

Etapp 60

Rakenda seda stiili postituse sisule. Samuti saate katsetada oma sisend- ja vahekauguse seadeid.

Veebidisaini puhul desaktiveerige tühjendus.

Samm 61

Joonista ümardatud ristkülik koos Täida: # 8e8380 ja Stroke: Puudub. Lisama Kihi stiil> Mustrikate. Järjepidevuse tagamiseks kasutage sama mustrit nagu liuguril.

Samm 62

Lisage nupu silt. Soovitan teil salvestada selle märgi stiili. Nii saame seda hõlpsasti kasutada ka teiste nuppude jaoks.

Etapp 63

Eelmine nupp on normaalseks. Teostame selle ja muudame selle värvi # f76b6a. Samuti määrake selle märgise tüüp paksus kirjas.

Samm 64

Asetage postitus gruppi ja vajutage Ctrl + J, et seda dubleerida. Grupi dubleerimiseks Alt-lohistage.

Korrake sama sammu, et teha rohkem postitusi. Ärge unustage muuta iga postituse pilti ja pealkirja.

Samm 65

Duplikaat Loe rohkem nupp ja muutke selle sildi number. Me kasutame seda lehekülje navigeerimiseks. Ärge unustage seada üks nupp seisukorra viimiseks.

Samm 66: jalus

Alustame tööd jalusega. Lisage vidina pealkiri ja selle kirjeldus.

Samm 67

Lisage link ja joonistage selle alla 1 px joon. Määra Täida: puudub ja Stroke: # 8e8380.

Samm 68

Klõpsake nuppu Veel valikuid nuppu ja valige punktiirjoon.

Etapp 69

Lisage vidinale rohkem linke.

Samm 70

Vidina dubleerimine.

Etapp 71

Samuti peame lisama hover-tingimuse. Seadke üks linkist paksus kirjas.

Selle aktiivse lingi all lisage 5-px joon. Määrake selle värv # f76b6a. Järjepidevuse huvides on selle lingi välimus sarnane menüüriba aktiivse menüüga.

Samm 72

Lisage alumisele alale veel üks ristkülik. Seadke see Täitke kuni # 3d3123.

Alamkausta teave

Samm 73

Lisa jaluse info kasutades Tüüp tööriist. Anna see pimedaks Drop Shadow kontrastse taustaga.

Sotsiaalvõrgustik

Samm 74

Lisa mõned sotsiaalmeedia ikoonid Daniele Selvitellast. Lisama Kihi stiil> Välimine sära.

Samm 75

Toonige tavaline ikoon alla 50%. Hover seisukorras olgem lihtsalt oma Läbipaistmatus juures 100%.

Samm 76

Haara vaba käe kursori ikoon ja aseta väikseim käsi kursor aktiivse või hoveri lingi kohal.

Lõplik tulemus

See on meie lõpptulemus. Näete, et viimasel Photoshopi versioonil on mõned huvitavad funktsioonid veebi paigutuse kujundamiseks. Märkide stiilid ja lõikstiilid on iga veebidisaineri jaoks oluline edasiminek.

• Demo
• Allalaadimise allikas