Tervezzen egy tiszta és elegáns blogelrendezést a Photoshop CS6 rendszerben

Ebben a bemutatóban bemutatom a folyamatot egyszerű és tiszta tervező blog készítése a legújabb Photoshop használatával. Az újat fogjuk használni Karakterstílusok és Bekezdésstílusok hogy segítsen racionalizálni a folyamatot.

A bemutató követéséhez a következő forrásokra lesz szüksége:

• Ingyenes betűkészlet a Bernd Montag-tól.
• 26 Ismételhető képpontmintázat a PSDfreemium-tól.
• Ingyenes szociális média ikonok a Daniele Selvitellától.

• Demó

A vászon készítése

1. lépés

Ebben a kialakításban 960 g-ot fogunk használni keretként. Töltse le a sablont a főoldaláról és a zip fájlból, keresse meg a Photoshop fájlt. Nyissa meg a '12 oszlop grid' fájlt a Photoshopban.

A 12 Col Grid réteg szemcsés ikonjára kattintva elrejtheti; most nem lesz szükségünk rá.

2. lépés

Az aktuális vászonméret túl kicsi. Kattints Kép> Vászonméret (vagy Ctrl + Alt + C). Adjon meg egy nagyobb méretet, és győződjön meg róla, hogy a horgonypontja középre van állítva.

3. lépés

Nyomja meg a Ctrl + R billentyűt a vonalzó felfedéséhez. Kattints Nézet> Új Útmutató az új útmutató elkészítéséhez, amely segít pontosan megtervezni. választ Függőleges és a pozícióban: 185 px egy függőleges útmutatót, 185 px-t a vászon felső bal sarkából.

4. lépés

Rajzoljon egy másik függőleges vezetőt a helyzetben 150 px, 1095 px és 1130 px.

Az alábbiakban a vászon belsejében található végső útmutatót találjuk.

Színes téma előkészítése

5. lépés

Ehhez a designhoz egy szép színkombinációt fogunk használni a Colorlouver-től. Kattintson az Előnézet hivatkozásra a színkombináció jpeg fájlként való megnyitásához.

Mentse el a színkombinációt, és helyezze a Photoshop fájlba. Ha a képet közvetlenül a vászon belsejébe helyezzük, gyorsabban és könnyebben mintát tudunk venni.

A háttér előkészítése

6. lépés

választ Háttér réteg és kattintson a Rögzítés ikonra a Rétegek panel tetején. Kattintson duplán a miniatűrre annak színének módosításához.

Kattintson a második színre, # 948371, kiválasztásához.

7. lépés

Rajzoljon egy téglalap alakú alakot a vászon tetején. Ez lesz a második háttér.

8. lépés

Tartsa a kiválasztott alakot. Ban,-ben Opciós sáv, nyisd ki Tölt Szín kattintson a gombra színes kerék ikonra. Amikor megnyílik a Színválasztó párbeszédpanel, kattintson az első színre a kiválasztáshoz. Azért ütés szín kiválasztása Egyik sem.

9. lépés

Készítsen egy új réteget, majd válassza ki a felső vászonot a négyszögletes sátoreszköz segítségével. Aktiválja a gradiens eszköz és töltse ki sugárirányú gradiens fehértől feketeig. Győződjön meg róla, hogy a színátmenet a vászon tetején van.

Változtassa meg Keverék mód nak nek Képernyő és csökkentse Átlátszatlanság nak nek 37%.

10. lépés

Készíts egy új réteget, és nevezd el 'árnyéknak'.

Rajzoljon egy szögletes választást a másodlagos háttér alján, mint az ábrán látható. Kattints Szerkesztés: Töltse ki. Készlet Használat nak nek Fekete. Kattints rendben töltse ki a választást fekete színnel.

11. lépés

Lágyítsuk a Gauss-blur használatával. Kattints Szűrő> Blur> Gauss-blur.

12. lépés

Tartsa lenyomva az Alt billentyűt, majd helyezze a kurzort árnyék és felső háttér réteg. Az Alt gomb felszabadítása nélkül kattintson a gombra konvertálja a réteget Vágómaszkra. A Vágómaszkvá alakításával az árnyék most a felső háttérbe kerül.

13. lépés

Hozd le az árnyékot Átlátszatlanság nak nek 50% hogy finom legyen. Az alábbiakban az eredmény 100% -os nagyítással látható.

14. lépés

Mindig jó ötlet, hogy ezeket a rétegeket egy csoportba helyezzük. Ezt csináld meg, válassza ki az összes réteget majd kattintson a Ctrl + G gombra.

Fejléc

15. lépés

Rajzoljon egy téglalapot a felső vászonra, mint az ábrán látható.

16. lépés

Ban,-ben Opciós sáv, készlet ütés színt # af9f8e.

17. lépés

Azért Tölt színt, válassza a lehetőséget lineáris gradiens tól től # d0c4b9 - # a89c91.

Az alábbiakban az eredmény 100% -ban látható.

A webhely neve

18. lépés

Adja hozzá a webhely nevét a design bal oldalán. Figyelje meg az elhelyezést az alábbiak szerint. Kattintson duplán a szövegre, és adja hozzá Árnyék. A betűtípus használatához használja a Sansation programot.

Menü

19. lépés

Rajzoljon menüket a menüsor másik oldalán. Betűtípus Sansation használata 14 pt. Ismét vegye figyelembe az elhelyezéseket.

20. lépés

Az aktív menüben állítsa be a betűtípust vastag betűvel.

21. lépés

Aktiválja Sokszög eszköz és állítsa be Sides nak nek 3. Rajzoljon egy háromszög alakot Töltse ki: # 3d3123 és Stroke: Nincs. hozzáad Réteg stílus > Csepp árnyék.

22. lépés

Hangsúlyozzuk az aktív menüt azáltal, hogy egy vonalat adunk hozzá. Aktiválja a Vonal eszköz és állítsa be a súlyát 5 px. választ # f76b6a a kitöltésért, stroke nélkül.

Helyezzük a vonalat az aktív menü alá, és adjunk hozzá 1 px területet a menüsor aljára.

Karakterstílusok használata

23. lépés

Mentse el a karakterkészletet karakterstílusként. Ez a funkció a karakterstílusok egyszerűsített változata az InDesign programban. A mentéshez aktiválja a szöveget, majd kattintson az "Új karakterstílus" ikonra.

Kattintson duplán az új karakterstílusra, és használja az alábbi beállítást.

24. lépés

Válassza ki a másik menüt, majd kattintson a Karakterstílusra. Ha a karakterstílus melletti pluszjelet talál, azt jelenti, hogy a karakter különböző beállításokkal rendelkezik. A beállítások felülbírálásához kattintson a kör alakú nyíl ikonra.

25. lépés

Ismételje meg az előző lépést az aktív menü új karakterstílusának létrehozásához.

26. lépés

Szóval, mi a lényege a Karakterstílusok használatának? A karakterstílusok segítenek központosítani a karakterkészletet. Egyszerűen szerkeszthetjük a Karakterstílust, hogy szerkeszthessük minden stílusát. Lásd az alábbi példát. Ha szerkesztjük a betűtípust a Karakterstílusban Felső menü - Normál a Corbel-hez, az összes normál menü automatikusan Corbel lesz.

27. lépés

Készítsen egy új réteget, és helyezze a menüsor alá. A Ctrl-re kattintva kattintson a menüsorra, hogy az új formátumot választja. Töltse ki fekete.

28. lépés

Távolítsa el a kiválasztást a Ctrl + D használatával Gauss-elmosódás, Szűrő> Blur> Gauss-blur.

Slider

29. lépés

Rajzoljon téglalap alakú, 10 oszlop szélességű alakot (lásd alább).

Azért Kitöltőszín választ # dfd1c2. Azért ütés választ # c8baac méretben 10 pt. Kattintson a vonal előnézete melletti kis legördülő nyílra, és győződjön meg róla Igazítsa be a belsejét kiválasztva.

30. lépés

Illessze be a képet a keret tetejére. Konvertálja azt Vágómaszk A Ctrl + Alt + G gomb megnyomásával a kép automatikusan a csúszka keretébe kerül. Szükség esetén mozgathatja és átméretezheti a képet anélkül, hogy befolyásolná a képkockát.

31. lépés

Rajzoljon egy téglalap alakú alakot ugyanolyan színű csúszka mögött. Győződjön meg róla, hogy a külső vezetőre kattint. hozzáad Rétegstílus> Minta átfedés a PSDfreemium képpontmintáját használja. Hangoljon le Átlátszatlanság hogy finomítsa.

32. lépés

Rajzoljon egy négyszögletes alakot a forma fölé Töltse ki: # b3aca5 és nem Stroke. Nyomja meg a Ctrl + T billentyűt, majd forgassa el 45 ° -kal. A réteg alakjának átalakítása Vágómaszk.

33. lépés

Ismételje meg az alakot és méretezze át. Változtassa meg Tölt sötétebb színre. A réteg alakjának átalakítása Vágómaszk.

34. lépés

Ismételje meg ugyanazt a lépést egy másik nyíl rajzolásához a másik oldalon.

35. lépés

Ctrl-kattintással csúsztassa a keretet az új kiválasztáshoz. Készítsen egy új réteget, és konvertálja azt a-ra Vágómaszk. Töltse ki a kiválasztást a fekete.

36. lépés

Ezután törölje a kijelölést (Ctrl + D) enyhül használ Gauss-elmosódás.

Szükség esetén csökkentheti az árnyék Opacity-t.

37. lépés

Rajzoljon egy lekerekített téglalapot a csúszka sarkán Töltse ki a # c8baac értéket.

38. lépés

Rajzoljon egy kört az alakzatba. Állítsa be ütés nak nek fekete méretével 1 pt és távolítsa el a kitöltést.

39. lépés

Válaszd ki a kör elérési út Útvonal kiválasztása eszköz. A Shift + Alt-húzással átmásolhatja az útvonalat.

Ismételje meg, hogy több kört rajzoljon.

40. lépés

Válassza ki az egyik körútvonalat. A Ctrl + Shift + J gomb megnyomásával új rétegre vághatja.

41. lépés

Ban,-ben Opciós sáv, távolítsa el ütés és változtassa meg Tölt a sugárirányú gradiens # e38989 - # bb5c5c. hozzáad Rétegstílus> Külső ragyogás és Árnyék.

42. lépés

Rajzoljon elliptikus választást a csúszka alatt. Készítsen egy új réteget, és töltse ki fekete.

43. lépés

Törölje a kijelölést (Ctrl + D). Lágyítsa fel Gauss-elmosódás.

Alsó háttér

44. lépés

Rajzoljon egy másik téglalap alakú alakot az alsó háttérre. Ugyanezt használja Tölt és ütés színe a csúszka alakja.

Mint mindig, nagyon óvatosnak kell lennie az elhelyezésével. Azt akarjuk, hogy ez a vászon minden útmutatóját lefedje.

hozzáad Rétegstílus> Minta átfedés.

Az alábbiakban a 100% -os nagyítás eredménye.

45. lépés

Válassza ki a felső területet a Négyszögletes Marquee eszköz segítségével.

46. ​​lépés

Készíts egy új réteget, tedd az alakzat mögé. Töltse ki a kiválasztást a fekete. Nyomja meg a Ctrl + T billentyűt, kattintson jobb gombbal és válassza ki távlati.

Húzza a felső sarkát kifelé.

Kattintson jobb gombbal és válassza ki Skála. Húzza le a felső fogantyút.

Jobb klikk és válassza ki vetemedés. Húzza a bal és a jobb oldali szegmenst befelé.

Lágyítsa fel Gauss-elmosódás.

Hangoljon le a Átlátszatlanság nak nek 20%.

47. lépés

Rajzoljon egy fehér téglalapot a háttérben. Ez a webhely fő tartalmának háttere lesz.

Adjunk hozzá 10 képpontot a háttér bal, jobb és felső oldalához. A távolságnak könnyűnek kell lennie, mert az útmutatót korai lépésekben tettük. hozzáad Rétegstílus> Külső ragyogás.

48. lépés

Adjon hozzá egy új útmutatót, 25 px a forma felső oldalától.

Szakasz címe

49. lépés

Adjon új karakterstílust az oldalrész címéhez és leírásához.

Adja meg a szekció címét és leírását a Típus eszköz segítségével. Alkalmazzon olyan stílusokat, amelyeket korábban készítettünk. Győződjön meg róla, hogy 25 cm-es helyet ad a háttér felső részéből a korábban készített útmutató segítségével.

50. lépés

Rajzoljon egy 5 px vonalat a webhely leírása alatt Töltse ki: # 938270 és Stroke: Nincs.

Blog bejegyzés

51. lépés

Készítsen egy másik karakterstílust a bejegyzés címéhez.

52. lépés

Adjon hozzá egy bejegyzést, és alkalmazza az előző karakterstílust.

53. lépés

Rajzoljon egy négyszög alakú négyzetet a cím alatt 4 oszlop szélességével. Készlet fehér annakért Tölt és #BEBEBE annakért ütés. hozzáad Rétegstílus> Stroke.

54. lépés

Illessze be a képet az alakzat tetejére. Konvertálás vágómaszkra (Ctrl + Alt + G).

55. lépés

Rajzoljon egy lekerekített téglalapot Töltse ki: # 8e8380 és Stroke: Nincs. Konvertálja azt Vágómaszk.

56. lépés

Készítsen új karakterstílusokat a blog metaadataihoz.

57. lépés

Adjon hozzá metaadat szöveget az alakzat tetején, és alkalmazza a korábban elkészített karakterstílust.

58. lépés

Aktiválja típus egy szövegdoboz létrehozásához kattintson az eszközre, és kattintson a Állítsa szélességét 4 oszlopra. Kattints Típus> Lorem Ipsum beillesztése a Photoshop automatikus generált Lorem Ipsum-jával töltse ki.

59. lépés

Készítsen egy új bekezdésstílust a karakter tartalmához. Kattintson a bekezdésstílusok panelen található új ikonra.

Kattintson duplán a bekezdésstílusra, és használja ezt a következő beállítást.

60. lépés

Ezt a stílust alkalmazza a hozzászólás tartalmára. Kísérletezhet az Indent és Spacing beállításokkal is.

A webes tervezéshez kapcsolja ki az elválasztást.

61. lépés

Rajzoljon egy lekerekített téglalapot Töltse ki: # 8e8380 és Stroke: Nincs. hozzáad Rétegstílus> Minta átfedés. A következetesség érdekében ugyanazt a mintát használja, mint a csúszka.

62. lépés

Adjon hozzá egy gombcímkét. Azt javaslom, hogy karakterstílusként mentse el. Így könnyen használható más gombokhoz.

63. lépés

Az előző gomb normál állapotban van. Duplázzuk meg és változtassuk a színét # f76b6a. A címke típusát félkövérre kell állítani.

64. lépés

Helyezze el a bejegyzést egy csoportba, majd nyomja meg a Ctrl + J billentyűkombinációt. Alt-húzás a csoport ismétléséhez.

Ismételje meg ugyanazt a lépést a további bejegyzések létrehozásához. Ne feledje megváltoztatni az egyes bejegyzések képét és címét.

65. lépés

Másolat Olvass tovább gombot, és módosítsa a címke számát. Az oldal navigálásához fogjuk használni. Ne feledje, hogy az egyik gombot állítsa az állapotba.

66. lépés: Lábléc

Kezdjük a láblécet. Adjon hozzá egy widget-címet és annak leírását.

67. lépés

Adjon hozzá egy linket és rajzoljon alá egy 1 px sort. Készlet Töltse ki: Nincs és Stroke: # 8e8380.

68. lépés

Kattints Több lehetőség gomb és válassza ki szaggatott vonal.

69. lépés

További hivatkozások hozzáadása a widgethez.

70. lépés

Ismételje meg a widgetet.

71. lépés

Hozzá kell adnunk a lebegő állapotot is. Állítsa az egyik linket félkövérre.

Az aktív hivatkozás alatt adjon hozzá egy 5 px vonalat. Állítsa be a színét # f76b6a. A következetesség érdekében a hivatkozás megjelenése hasonló a menüsor aktív menüjéhez.

72. lépés

Adjon hozzá egy másik téglalapot az alsó területen. Állítsa be Tölt nak nek # 3d3123.

Lábléc információk

73. lépés

A lábléc információk hozzáadása típus eszköz. Adj egy sötétet Árnyék a háttérhez képest kontrasztot adni.

Közösségi háló

74. lépés

Adjon hozzá néhány szociális média ikont a Daniele Selvitellától. hozzáad Rétegstílus> Külső ragyogás.

75. lépés

A normál ikon hangjelzése 50%. Lebegő állapot esetén tartsuk meg Átlátszatlanság nál nél 100%.

76. lépés

Fogja meg a szabad kéz kurzor ikonját, és helyezze a legkisebb kéz kurzort az aktív vagy lebegő link fölé.

Végeredmény

Ez a végeredmény. Láthatjuk, hogy a legfrissebb Photoshop verzió néhány érdekes funkcióval rendelkezik a webes elrendezés tervezéséhez. A karakterstílusok és a bekezdésstílusok minden webdesigner számára jelentős javulás.

• Demó
• Letöltés forrása