Suunnittele puhdas ja tyylikäs blogisovellus Photoshop CS6 ssa

Tässä oppaassa näytän sinulle prosessin yksinkertaisen ja puhtaan muotoilupalvelun tekeminen käyttämällä uusinta Photoshopia. Aiomme käyttää uutta Merkkityylit ja Kohtaustyyli auttaa meitä virtaviivaistamaan prosessia.

Voit seurata tätä opetusta seuraavasti:

• Ilmainen fonttikokoelma Bernd Montagilta.
• 26 PSDfreemiumilta toistettavissa oleva pikselin kuvio.
• Vapaa sosiaalisen median kuvakkeet Daniele Selvitellalta.

• esittely

Kankaan valmistelu

Vaihe 1

Tässä suunnittelussa käytämme kehyksenä 960 g. Lataa malli pääsivulta ja zip-tiedostosta, etsi Photoshop-tiedosto. Avaa "12 Column Grid" -tiedosto Photoshopissa.

Napsauta 12 Col Grid -kerroksen silmäkuvaketta piilottaaksesi sen; emme tarvitse sitä nyt.

Vaihe 2

Nykyinen kangaskoko on liian pieni. Klikkaus Kuva> Canvas-koko (tai Ctrl + Alt + C). Lisää isompi koko ja varmista, että sen kiinnityspiste on keskellä.

Vaihe 3

Osoita Ctrl + R paljastaaksesi viivaimen. Klikkaus Näytä> Uusi Opas, jolla voit tehdä uuden oppaan, joka auttaa meitä suunnittelemaan tarkasti. valita Pystysuora ja sijainnissa: 185 px tehdä pystysuora opas 185 px kankaalle vasemmassa yläkulmassa.

Vaihe 4

Piirrä toinen pystysuora opas asentoon 150 px, 1095 px ja 1130 px.

Alla on lopullinen opas kankaalle.

Väriteeman valmistelu

Vaihe 5

Tätä mallia varten käytämme Colorlouverin mukaista mukavaa yhdistelmää. Napsauta Esikatselu-linkkiä, jos haluat avata värikombinaation jpeg-tiedostona.

Tallenna väriyhdistelmä ja sijoita se Photoshop-tiedoston sisään. Sijoittamalla kuvan suoraan kankaalle voimme ottaa näytteen sen väristä nopeammin ja helpommin.

Taustan valmistelu

Vaihe 6

valita Tausta kerros ja napsauta Lukitse-kuvaketta Tasot-paneelin yläosassa avataksesi sen. Kaksoisnapsauta pikkukuvaa vaihtaaksesi sen väriä.

Napsauta toista väriä, # 948371, valitaksesi sen.

Vaihe 7

Piirrä kankaan päälle suorakulmainen muoto. Tämä on toinen tausta.

Vaihe 8

Pidä muoto valittuna. Vuonna Vaihtoehtopalkki, avata Täyttää Väri ja napsauta sitten väripyörän kuvake. Kun Värivalitsin-valintaikkuna on avattu, valitse ensimmäinen väri napsauttamalla sitä. Sen puolesta tahti Valitse väri Ei mitään.

Vaihe 9

Tee uusi kerros ja valitse ylempi kangas käyttämällä suorakulmaista marquee-työkalua. Aktivoi gradienttityökalu ja täytä se säteittäinen kaltevuus valkoisesta mustaan. Varmista, että kaltevuus on keskitetty kankaalle.

Muuta sen Sekoitus tila että kuvaruutu ja vähentää sen määrää sameus että 37%.

Vaihe 10

Tee uusi kerros ja anna sille nimi "varjo".

Piirrä suorakulmainen valinta toissijaisen taustan alareunassa, kuten kuvassa. Klikkaus Muokkaa: Täytä. Sarja Käyttää että Musta. Klikkaus kunnossa täyttää valinta mustalla.

Vaihe 11

Pehmennä sitä Gaussin hämärtymisen avulla. Klikkaus Suodatin> Blur> Gaussian Blur.

Vaihe 12

Pidä Alt ja aseta sitten kohdistin varjo ja ylempi tausta kerros. Napsauta Alt-näppäintä vapauttamatta muuntaa kerroksen Clipping Mask. Muuntamalla se Clipping Maskiksi, varjo siirtyy nyt ylempään taustaan.

Vaihe 13

Tuo varjo alas sameus että 50% tehdä siitä hienovarainen. Alla näet tuloksen 100% suurennettuna.

Vaihe 14

On aina hyvä ajatus asettaa nämä kerrokset yhteen ryhmään. Tehdä tämä, valitse kaikki kerrokset ja valitse sitten Ctrl + G.

ylätunniste

Vaihe 15

Piirrä suorakulmio yläpuolelle, kuten kuvassa.

Vaihe 16

Vuonna Vaihtoehtopalkki, sarja tahti väri # af9f8e.

Vaihe 17

Sen puolesta Täyttää väriä, valitse lineaarinen gradientti alkaen # d0c4b9 - # a89c91.

Alla on tulos 100% näkymässä.

Sivuston nimi

Vaihe 18

Lisää sivuston nimi suunnittelun vasemmalle puolelle. Noudata sijoittelua alla olevan kuvan mukaisesti. Kaksoisnapsauta tekstiä ja lisää Pudota varjo. Käytä sen fonttia käyttämällä Sansation.

valikko

Vaihe 19

Piirrä valikot valikkorivin toisella puolella. Käytä fonttia Sansation 14 pt. Huomaa jälleen sijoittelut.

Vaihe 20

Aseta aktiivinen valikko fonttityypiksi lihavoituna.

Vaihe 21

Aktivoida Monikulmio-työkalu ja asettaa Sides että 3. Piirrä kolmion muoto Täytä: # 3d3123 ja Aivohalvaus: Ei mitään. Lisätä Tasotyyli > Pudota varjo.

Vaihe 22

Korostamme aktiivista valikkoa lisäämällä sen alla olevan rivin. Aktivoi Linjan työkalu ja aseta sen paino 5 px. valita # f76b6a sen täyttö, ilman aivohalvausta.

Laita rivi oikealle aktiivisen valikon alle ja lisää 1 px-tila valikkopalkin alareunaan.

Merkkityylien käyttäminen

Vaihe 23

Tallennetaan merkkiasetus merkkityyliksi. Tämä ominaisuus on yksinkertaistettu versio InDesignin merkkityylistä. Jos haluat tallentaa sen, aktivoi teksti ja napsauta sitten "Uusi merkkityyli" -kuvaketta.

Kaksoisnapsauta uutta merkkityyliä ja käytä seuraavaa asetusta.

Vaihe 24

Valitse toinen valikko ja napsauta sen jälkeen Character Style. Jos löydät merkkityylin vieressä olevan plus-merkin, merkki on erilainen. Voit ohittaa asetukset napsauttamalla pyöreän nuolen kuvaketta.

Vaihe 25

Toista edellinen vaihe, kun haluat luoda uuden merkkityylin aktiiviselle valikosta.

Vaihe 26

Joten, mitä merkitystä on käyttää Character Styles? Merkkityylit auttavat meitä keskittämään merkistöasetukset. Voit yksinkertaisesti muokata merkkityyliä muokkaamalla jokaista tekstiä käyttämällä tätä tyyliä. Katso alla oleva esimerkki. Jos muokkaamme kirjasintyypin Character Style -merkin sisällä Päävalikko - Normaali Corbeliin, kaikki tavallinen valikko muuttuu automaattisesti Corbeliksi.

Vaihe 27

Tee uusi kerros ja aseta se valikkorivin alle. Ctrl-napsauta valikkopalkkia, kun haluat tehdä uuden valinnan sen muodon perusteella. Täytä se musta.

Vaihe 28

Poista valinta Ctrl + D: llä. Pehmennä se lisäämällä Gaussin hämärtyminen, Suodatin> Blur> Gaussian Blur.

Slider

Vaihe 29

Piirrä suorakulmainen muoto, jonka leveys on 10 saraketta (katso alla).

Sen puolesta Täyttöväri valita # dfd1c2. Sen puolesta tahti valita # c8baac kokoa 10 pt. Napsauta rivin esikatselun vieressä olevaa pientä nuolta ja varmista Kohdista sisäpuolelle on valittu.

Vaihe 30

Liitä kuva kehyksen päälle. Muunna se Leikkausmaski lyömällä Ctrl + Alt + G. Kuva siirtyy automaattisesti liukusäätimen kehykseen. Tarvittaessa voit siirtää ja muuttaa kuvan kokoa vaikuttamatta sen kehykseen.

Vaihe 31

Piirrä toinen suorakulmainen muoto liukusäätimen taakse samalla värillä. Varmista, että napsautat sen lähimpään oppaaseen. Lisätä Tason tyyli> Kuvion peite käyttämällä PSDfreemiumin pikselimallia. Ääni alas sameus tehdä sen hienovarainen.

Vaihe 32

Piirrä suorakulmainen muoto muodon yläpuolelle Täytä: # b3aca5 ja ei Stroke. Paina Ctrl + T ja sitten kierrä sitä 45 °. Muunna kerroksen muoto Leikkausmaski.

Vaihe 33

Kopioi muoto ja muuta sen kokoa. Muuta sen Täyttää tummemmaksi. Muunna kerroksen muoto Leikkausmaski.

Vaihe 34

Toista sama vaihe piirtääksesi toisen nuolen toisella puolella.

Vaihe 35

Ctrl-klikkaa diaesitystä, kun haluat tehdä uuden valinnan. Tee uusi kerros ja muuntaa se a Leikkausmaski. Täytä valinta painikkeella musta.

Vaihe 36

Poista sitten valinta (Ctrl + D) pehmentää se käyttää Gaussin hämärtyminen.

Voit vähentää varjoa Opacity tarvittaessa.

Vaihe 37

Piirrä pyöristetty suorakulmio liukusäätimen kulmaan Täytä # c8baac.

Vaihe 38

Piirrä ympyrä muotoon. Aseta sen tahti että musta Koko 1 pt ja poista täyttö.

Vaihe 39

Valitse ympyrä polku Polun valinta työkalu. Shift + Alt-vedä polkua kopioidaksesi sen.

Toista tämä piirtääksesi lisää ympyröitä.

Vaihe 40

Valitse yksi ympyräreiteistä. Napsauta Ctrl + Shift + J leikataksesi sen uudelle tasolle.

Vaihe 41

Vuonna Vaihtoehtopalkki, poistaa sen tahti ja muuttaa sen Täyttää arvoon a säteittäinen kaltevuus # e38989 - # bb5c5c. Lisätä Tasotyyli> Ulkoinen hehku ja Pudota varjo.

Vaihe 42

Piirrä elliptinen valinta liukusäätimen alle. Tee uusi kerros ja täytä se musta.

Vaihe 43

Poista valinta (Ctrl + D). Pehmennä sitä käyttämällä Gaussin hämärtyminen.

Alempi tausta

Vaihe 44

Piirrä toinen suorakulmainen muoto pohjalle. Käytä samaa Täyttää ja tahti värin liukusäädintä.

Kuten aina, olkaa hyvin varovaisia ​​sijoittelunsa suhteen. Haluamme, että se kattaa kaikki kangasoppaan.

Lisätä Tason tyyli> Kuvion peite.

Alla on 100% suurennus.

Vaihe 45

Valitse sen yläalue käyttämällä suorakulmaista marquee-työkalua.

Vaihe 46

Tee uusi kerros, aseta se muodon taakse. Täytä valinta painikkeella musta. Osoita Ctrl + T, napsauta hiiren kakkospainikkeella ja valitse näkökulma.

Vedä sen yläkulmat ulospäin.

Napsauta hiiren kakkospainikkeella uudelleen ja valitse asteikko. Vedä yläkahva alas.

Napsauta hiiren kakkospainikkeella ja valitse Loimi. Vedä vasemmalle ja oikealle segmentti sisäänpäin.

Pehmennä sitä käyttämällä Gaussin hämärtyminen.

Ääni alas sameus että 20%.

Vaihe 47

Piirrä valkoinen suorakulmio taustan sisään. Tämä tulee olemaan taustalla sivuston tärkeimmälle sisällölle.

Lisää välilyönti 10 px vasemmalle, oikealle ja yläpuolelle. Etäisyyden pitäisi olla helppoa, koska olemme tehneet oppaan aikaisessa vaiheessa. Lisätä Tasotyyli> Ulkoinen hehku.

Vaihe 48

Lisää uusi opas, 25 px, muodon yläpuolelta.

Osaston otsikko

Vaihe 49

Lisää uusi merkkityyli sivuosion otsikkoon ja sen kuvaukseen.

Lisää osion otsikko ja sen kuvaus käyttämällä Tyyppi-työkalua. Käytä aiemmin tehtyjä tyylejä. Varmista, että lisäät 25 px tilaa taustan yläpuolelta aikaisemmin tehdyn oppaan avulla.

Vaihe 50

Piirrä 5 px -rivi sivuston kuvauksen alle Täytä: # 938270 ja Aivohalvaus: Ei mitään.

Blogipostaus

Vaihe 51

Tee postimerkille toinen merkkityyli.

Vaihe 52

Lisää postin nimi ja käytä aiempaa merkkityyliä.

Vaihe 53

Piirrä suorakulmion muoto otsikon alle 4 sarakkeen leveydellä. Sarja valkoinen sen puolesta Täyttää ja #BEBEBE sen puolesta tahti. Lisätä Tasotyyli> Aivohalvaus.

Vaihe 54

Liitä kuva muodon päälle. Muunna se leikkausvaipaksi (Ctrl + Alt + G).

Vaihe 55

Piirrä pyöristetty suorakulmio Täytä: # 8e8380 ja Aivohalvaus: Ei mitään. Muunna se Leikkausmaski.

Vaihe 56

Tee blogimerkinnöistä uusia merkkityyliä.

Vaihe 57

Lisää metatietoteksti tekstin päälle ja käytä aikaisemmin tekemäämerkkiä.

Vaihe 58

Aktivoida Tyyppi voit tehdä tekstikentän napsauttamalla ja vetämällä. Aseta sen leveys 4 sarakkeeseen. Klikkaus Tyyppi> Liitä Lorem Ipsum täyttää se automaattisella Lorem Ipsumilla Photoshopista.

Vaihe 59

Luo merkkisisältöä varten uusi kappale-tyyli. Napsauta uuden kuvakkeen kohtaa Tyylit-paneelissa.

Kaksoisnapsauta kohtaa Tyyli ja käytä tätä seuraavaa asetusta.

Vaihe 60

Käytä tätä tyyliä postisisältöön. Voit myös kokeilla sen sisennys- ja väliasetuksia.

Web-suunnittelun poistaminen käytöstä poistetaan.

Vaihe 61

Piirrä pyöristetty suorakulmio Täytä: # 8e8380 ja Aivohalvaus: Ei mitään. Lisätä Tason tyyli> Kuvion peite. Johdonmukaisuuden vuoksi käytä samaa kuviota kuin liukusäätimessä.

Vaihe 62

Lisää painikemerkki. Suosittelen, että tallennat sen merkkityylinä. Näin voimme käyttää sitä helposti muille painikkeille.

Vaihe 63

Edellinen painike on normaalissa kunnossa. Anna sen kopioida ja muuttaa sen väriä # f76b6a. Aseta sen tarratyyppi myös lihavoitu.

Vaihe 64

Aseta viesti ryhmään ja paina sitten Ctrl + J kopioida se. Alt-vedä kopioi ryhmä.

Toista sama vaihe tehdäksesi lisää viestejä. Muista muuttaa kunkin viestin kuvaa ja nimeä.

Vaihe 65

monistaa Lue lisää -painiketta ja vaihda sen tunniste numeroksi. Käytämme sitä sivun navigointiin. Muista asettaa jokin painike siirtääksesi tilan.

Vaihe 66: Alatunniste

Aloitetaan alatunnisteen käsittely. Lisää widgetin nimi ja sen kuvaus.

Vaihe 67

Lisää linkki ja piirtää sen alle 1 px. Sarja Täytä: Ei mitään ja Aivohalvaus: # 8e8380.

Vaihe 68

Klikkaus Lisää vaihtoehtoja -painiketta ja valitse katkoviiva.

Vaihe 69

Lisää widgetiin lisää linkkejä.

Vaihe 70

Kopioi widget.

Vaihe 71

Meidän on myös lisättävä hover-tila. Aseta yksi linkistä lihavoitu.

Lisää aktiivisen linkin alle 5 px -rivi. Aseta sen väri # f76b6a. Johdonmukaisuuden vuoksi tämän linkin ulkoasu on samanlainen kuin valikkorivin aktiivinen valikko.

Vaihe 72

Lisää toinen suorakulmio alemmalle alueelle. Aseta sen Täyttää että # 3d3123.

Alatunnistetiedot

Vaihe 73

Lisää alatunnistetietoja käyttämällä Tyyppi työkalu. Anna sille pimeä Pudota varjo lisätä kontrastia taustaansa.

Sosiaalinen verkosto

Vaihe 74

Lisää joitakin sosiaalisen median kuvakkeita Daniele Selvitellalta. Lisätä Tasotyyli> Ulkoinen hehku.

Vaihe 75

Tone alas normaalin kuvakkeen kohdalle 50%. Hover-kunnossa pitää vain pitää sen sameus at 100%.

Vaihe 76

Tartu vapaan käden osoittimen kuvakkeeseen ja aseta pienin käsi kohdistin aktiivisen tai hover-linkin yläpuolelle.

Lopullinen tulos

Tämä on lopputuloksemme. Näet, että viimeisimmässä Photoshop-versiossa on mielenkiintoisia ominaisuuksia web-ulkoasun suunnitteluun. Merkkityylit ja kappaleiden tyylit ovat merkittävä parannus jokaiselle web-suunnittelijalle.

• esittely
• Lataa lähde