Luo Photoshop-grafiikkaa tasotyyleillä ja älykkäillä objekteilla

Tässä opetusohjelmassa suunnittelemme grafiikkaa verkkosivustolle 8izzille, fiktiiviselle iPhone-sovellukselle. Tutkin, kuinka Photoshopin tasotyylien ja älykkäiden objektien avulla luodaan puhtaita, yritysgrafiikkaelementtejä, joita voit käyttää omiin suunnitteluprojekteihisi, mukaan lukien sivuston esittelyalue ja sen tilauspainike; erotimet sivuston sisällön jakamiseksi; ja mediasoitin, jossa on mukautetut pyöristetyt kulmat.

Alla näet sivuston täydellisen mallin. Näet lähikuvia yksittäisistä elementeistä, jotka rakennat koko opetusohjelman ajan.

Kuvitteellisen 8izz-sovelluksen täydellinen suunnittelu. Tässä opetusohjelmassa tutkitaan, miten osa sen suunnitteluelementeistä luodaan uudelleen



Kuvitteellisen 8izz-sovelluksen täydellinen suunnittelu. Tässä opetusohjelmassa tutkitaan, miten osa sen suunnitteluelementeistä luodaan uudelleen

1. Esitysalue

Aloitetaan luomalla harmaa esitysalue mockupin yläosaan. Luomme myös väärennetyn mukautetun varjon iPhone-grafiikalle.

Aloitetaan asettelu avaamalla uusi Photoshop-asiakirja. Valitse Tiedosto> Uusi tai käytä jompaa kumpaa Cmd + N tai Ctrl + N , riippuen siitä, työskenteletkö Mac OS X: ssä vai Windowsissa.

Aseta leveydeksi 1200 pikseliä ja korkeudeksi 1800 pikseliä (käytämme pikseleitä kaikille tasoille paitsi tekstille, jolle käytämme pisteitä). 12 sarakkeen ruudukon määrittäminen: Suosittelen Nathan Smithin 960-ruudukkomallin käyttöä, jonka voit ladata ilmaiseksi osoitteesta hänen verkkosivuillaan . (Asennusohjeet sisältyvät lataukseen.) Voit aktivoida tai deaktivoida ruudukon Cmd / Ctrl +; pikakuvake.

Seuraava vaihe on lisätä taustakuvio esitysalueelle. Käytän vapaata pystysuoraa kangasta -kuviota Hienot kuviot verkkosivustolla, mutta voit käyttää jotain omaa. Avaa kuva, valitse> Kaikki, valitse Muokkaa> Määritä malli ja napsauta OK.

Lisää nyt kuvio Taustakerrokseen siirtymällä kohtaan Taso> Tasotyyli> Kuvion peitto tai yksinkertaisesti kaksoisnapsauttamalla tasoa Tasot-paletissa ja valitsemalla Tasomalli-valintaikkunasta Kuvion peitto -vaihtoehto. (Huomaa: jos et näe Tasotyyli-vaihtoehtoa, sinun on ehkä muutettava tausta normaaliksi tasoksi napsauttamalla sitä hiiren kakkospainikkeella Tasot-paletissa ja valitsemalla Taso taustasta.) Sinun on valittava pystysuora_kankaakuvio valintaikkunasta, jonka voit tehdä napsauttamalla kerran Kuvio-grafiikkaa (näkyy alla), jotta voit avata joukon värimalleja.

Esitysalueen työpinnan valmisteleminen kuvion peitteellä

Esitysalueen työpinnan valmisteleminen kuvion peitteellä

Luo uusi tasoryhmä siirtymällä kohtaan Kerros> Ryhmäkerrokset tai painamalla Cmd / Ctrl + G . Aseta se otsikon yläpuolelle ja nimeä se Pääsisältö (Napsauta sitä hiiren kakkospainikkeella Tasot-paletissa ja nimeä se uudelleen valitsemalla Ryhmän ominaisuudet). Luo sen sisällä toinen ryhmä nimeltä Esitys .

Valitse nyt pyöristetyn suorakulmion työkalu (U). Määritä näytön yläreunan asetuspalkista 10 kuvapisteen säde ja # 606060 väri. Piirrä 960 x 430 kuvapisteen muoto, nimeä se Esityskanta ja lisää seuraava tasotyyli:

  • Drop Shadow: Normaali sekoitustila, 40% peittävyys, 120 ° kulma, Käytä globaalia valoa, 1 kuvapisteen etäisyys, 3 kuvapisteen koko (jätä kaikki muut asetukset oletusarvoihin)
  • Sisävarjo: Normaali sekoitustila, 50% peittävyys, 93 ° kulma, 2 kuvapisteen etäisyys, 3 kuvapisteen koko
  • Gradient Overlay: Overlay Blend Mode, 20% Opacity, Gradient 100% Opacity from # 000000 to #ffffff (voit muokata näitä asetuksia napsauttamalla Gradient-grafiikkaa avataksesi Gradient Editorin), Lineaarinen tyyli ja Tasaa kerroksen kanssa, 145 ° kulma
  • Aivohalvaus: 1 kuvapisteen koko, ulkoasento, normaali sekoitustila, 100% peittävyys, # 1f1f1f väri

Tuloksen pitäisi näyttää tältä:

Valmistunut pohja esitysalueelle

Valmistunut pohja esitysalueelle

Jos haluat tallentaa nämä asetukset tyylinä, siirry Tyylit-palettiin, napsauta Luo uusi tyyli -kuvaketta paletin alaosassa ja nimeä se Perustyyli . Tämän avulla voit käyttää samoja asetuksia myöhemmin valitsemalla tason, johon haluat soveltaa, ja napsauttamalla valikosta haluamaasi tyyliä.

Uuden tyylin määritteleminen Presentation Base -grafiikastamme

Uuden tyylin määritteleminen Presentation Base -grafiikastamme

Älä unohda kohdistaa esitysaluetta ruudukkoon!

miten teen kansikuvastani yksityisen

Lisää nyt iPhone 4s -mockup (voit ladata sen ilmaiseksi osoitteesta Pixeden ). Avaa latauksesta iPhone-4S-black-3views-mockup.psd, valitse iPhone 4S (musta) -ryhmä, vedä ja pudota se ja järjestä se Esittelykannan sisälle, jättäen 90 kuvapisteen vasen marginaali ja 45 kuvapisteen alempi marginaali.

Luomme uuden varjon iPhonelle, joten poista Shadow- ja Reflex-kerrokset iPhone 4S (musta) -ryhmästä (voit tehdä tämän napsauttamalla niitä hiiren kakkospainikkeella Tasot-paletissa ja valitsemalla Poista taso). Valitse nyt Ellipse-työkalu (U) ja luo muoto, jonka mitat ovat 220 kuvapistettä H: 7 kuvapistettä, ja Väri-asetuksena on # 00000. Muunna tämä taso älykkääksi objektiksi napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Muunna älykkääksi objektiksi -vaihtoehto. Mene Suodata> Hämärtää> Gaussin hämärtää ja aseta säde arvoon 6 kuvapistettä, jotta se näyttää varjolta.

Gaussin epätarkkuuden lisääminen varjoon

Gaussin epätarkkuuden lisääminen varjoon

Jos haluat lisätä tekstin esitysalueelle, voit luoda otsikon Vaakasuora tyyppi -työkalulla (T), joka on asetettu Myriad Pro Semibold, 48pt, Sharp -asetukseksi. Käytä Tasotyyli-valintaikkunassa Drop Shadow -asetusta, jonka asetuksena on Normaali sekoitustila, 40% peittävyys, 120 ° kulma, Käytä globaalia valoa, 1 kuvapisteen etäisyys, 3 kuvapisteen koko ja # f5f5f5 väri. Kohdista teksti ruudukon kanssa jättäen 30 kuvapisteen vasen marginaali ja 20 kuvapisteen ylämarginaali.

Kirjoita nyt tekstiteksti asettamalla se 40 kuvapistettä otsikon alle käyttämällä DejaVu Sans Book, Sharp, 12pt. (Voit ladata fontin ilmaiseksi tässä .) Aseta johtoasetus 18pt: ksi (napsauta yläpalkin kuvaketta vaihtaaksesi Merkki- ja Kappale-paneelit tai valitse Ikkuna> Merkki ) ja käytä väriä # f5f5f5.

Voit lisätä kerrostyylin valitsemalla otsikkotekstikerroksen, napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Kopioi kerrostyyli, siirtymällä nykyiseen tekstikerrokseen, napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Liitä tasotyyli. Vaihtoehtoisesti voit luoda uuden kerrostyylin manuaalisesti samalla tavalla kuin aiemmin.

kuinka lisätä hehkua tekstiin Photoshopissa

Valmistuneen esitysalueen tulisi näyttää tältä:

Valmis esitysalue

Valmis esitysalue

2. Tilauspainikkeen luominen

Painikkeen luominen tyhjästä ei ole niin vaikeaa. Luo muotoilu uudelleen alla:

Tilauspainike, jota yritämme luoda uudelleen

Tilauspainike, jota yritämme luoda uudelleen

Aloita luomalla uusi ryhmä Esitys-ryhmään ja nimeämällä se Button . Kun pyöristetyn suorakulmion työkalu on asetettu 10 kuvapisteen säteeksi ja # 262626 väri, piirrä muoto, jonka mitat ovat 90 x 70 kuvapistettä, ja nimeä se Hintalappu . Lisää Tasotyyli-valintaikkunasta sisävarjo, jossa on normaali sekoitustila, 45% peittävyys, 50 ° kulma, 2 kuvapisteen etäisyys ja 5 kuvapisteen koko.

Lisää hinta osoittava teksti käyttämällä Myriad Pro Bold-, Sharp-, 24pt- ja Color-asetuksia arvoon # f5f5f5. Käytä Tasotyyli-valintaikkunassa seuraavia asetuksia:

  • Drop Shadow: Normaali sekoitustila, 40% peittävyys, 120 ° kulma, käytä globaalia valoa, 1 kuvapisteen etäisyys, 3 kuvapisteen koko
  • Sisävarjo: Normaali sekoitustila, 25% peittävyys, 120 ° kulma, käytä globaalia valoa, 1 kuvapisteen etäisyys, 2 kuvapisteen koko
  • Sisäinen hehku: Normaali sekoitustila, 15% opasiteetti, kaltevuus 100% - 0% opasiteetti ja #ffffff-väri, 1 kuvapisteen koko

Valmistunut hintalappu

Valmistunut hintalappu

Luo painikkeen 'Saatavana iPhone App Storessa' -osa käyttämällä Pyöristetty suorakulmio -työkalua, jonka asetuksena on 10 kuvapisteen säde ja # d4e945 väri. Piirrä muoto, jonka mitat ovat 240 x 80 kuvapistettä, ja nimeä se Button .

Näytän nyt tarkan tavan muuttaa tämän suorakulmion pyöristettyjä kulmia. Anna Button Vector -maskin pienoiskuva valittuna (valitse se Tasot-paletista tai poista sen valinta). Luo neliö, joka täyttää kulman ja tekee siitä täysin terävän käyttämällä Suorakulmio-työkalua, jossa on muoto-kerrokset ja Lisää polkualueelle (+) alla valitulla tavalla. Tee tämä muutos molempiin oikeaan kulmaan.

Tarkempi tapa muuttaa napin pyöristettyjä kulmia

Tarkempi tapa muuttaa napin pyöristettyjä kulmia

Tätä painiketta varten luomme uuden kuvion, joten paina Cmd / Ctrl + N luoda uusi tiedosto, jonka leveys on 5 kuvapistettä ja korkeus 5 kuvapistettä. Valitse lyijykynätyökalu (B), jonka koko on 1 px ja kovuus 100%, ja piirrä vinoviiva alla olevan kuvan mukaisesti.

Painikkeen määrittely

Määritä painikkeen kuvio ja aseta sen tyyli

Mene nyt Muokkaa> Määritä malli ja nimeä kuvio ja palaa sitten edelliseen tiedostoon lisätäksesi seuraavat Layer Style -efektit 'Saatavana iPhone App Storessa' -painikkeeseen:

  • Drop Shadow: Moninkertainen sekoitustila, 15% peittävyys, 90 ° kulma, 1 kuvapisteen etäisyys, 1 kuvapisteen koko
  • Sisävarjo: Normaali sekoitustila, #ffffff-väri, 90 ° kulma, 1 kuvapisteen etäisyys, 1 kuvapisteen koko
  • Viiste ja kohokuvio: Sisempi viistetyyli, sileä tekniikka, 100% syvyys, 2 kuvapisteen koko, 90 ° kulma, korostustila 0%, varjostustila 10%
  • Liukuvärjäys: Moninkertainen sekoitustila, 30% peittävyys, kaltevuus 100% peittävyys # 000000 - #ffffff väri, 150% asteikko
  • Kuvion peitto: Kerro sekoitustila, 10% peittävyys ja valitse juuri tekemäsi kuvio Pattern-näytteestä
  • Aivohalvaus: 1 kuvapisteen koko, sisäasento, normaali sekoitustila ja täytetyyppi asetettu kaltevuudelle 100% opasiteetilla # 8a8a8a - # 767676 Väri ja taaksepäin valittu, lineaarinen tyyli, 90 ° kulma

Vedä ja pudota Available_on_the_App_Store_ (harmaa) .png (saatavana osoitteesta Wikipedia ) -painiketta painikkeen muodon päällä ja muokkaa älykästä objektia seuraavasti: siirry kohtaan Valitse> Värialue, aseta Fuzziness-arvoksi 200 ja valitse taustaharmaa väri ja muuta se arvoksi # d4e945. Valitse samalla tekniikalla valkoinen väri ja vaihda se muotoon # 272827.

mitä polttotyökalu tekee photoshopissa

Värin muuttaminen

Saatavana iPhone App Storessa -merkin värien muuttaminen

Muuta App Store -merkin kokoa painamalla Cmd / Ctrl + T. tai menemällä osoitteeseen Muokkaa> Vapaa muunnos ja pienennetään merkki 80 prosenttiin kirjoittamalla tämä arvo sekä W- että H-kenttiin. Keskitä se. Käytä muunnosta pyydettäessä. Jotta rintamerkki sulautuisi hienosti napin pohjaan, teemme siitä leikkaavan maskin. Napsauta hiiren kakkospainikkeella App Store -merkkikerrosta ja valitse Luo leikkausmaski.

Annetaan nyt painikkeelle mukava kaltevuusvaikutus valitsemalla Liukuvärityökalu (G). Määritä liukuvärjäyseditorissa väriksi #ffffff ja tee vasemmasta reunasta 100% peittävyys ja oikealta 0% peittävyydestä. Valitse Kulman kaltevuus -kuvake näytön yläosassa olevasta Liukuvärityökalurivistä ja aseta Opasiteetti-arvoksi 10%. Luo uusi kerros painamalla Vaihto + Cmd / Ctrl + N . Kun kerros on valittu, pidä painettuna Cmd / Ctrl ja napsauta Button-kerroksen Vector Mask -kuvaketta rajoittaaksesi liukuvärikerroksen toiminnot tiettyyn muotoon. Vedä nyt kaltevuus oikeasta alakulmasta vasempaan yläkulmaan. Tuloksen pitäisi näyttää tältä:

Tilauspainike, jossa on kulmakaltevuus

Tilauspainike, jossa on kulmakaltevuus

Aseta lopuksi painike oikein, jolloin oikea ja alempi marginaali on 20 kuvapistettä.

3. Tehdään mahtavia erottimia

Seuraavaksi luomme joitain lineaarisia erottimia, jotka jakavat suunnittelun eri osat, kuten alla olevassa kuvassa näkyy:

Mukautettu erotin toiminnassa jakamaan kaksi suosittelua

Mukautettu erotin toiminnassa jakamaan kaksi suosittelua

Luo uusi tasoryhmä ja nimeä se Erottimet .

Aloitamme erottimen suunnittelun luomalla vaakasuoran lineaarisen muodon viivatyökalulla (U). Käytä lyhyessä pystysuorassa erottimessa kokoja 1 x 960 kuvapistettä (voit käyttää painoasetusta 1 kuvapistettä) ja Väri-asetukseksi # 585858. Järjestä se 40 kuvapistettä tekstiruutujen alle ja käytä Tasotyyli-valintaikkunassa alla olevia Liukuvärjäys-asetuksia:

Gradient Overlay -asetukset erottimille

Gradient Overlay -asetukset erottimille

Kopioi kerros, vaihda muodon Väri ja Liukuvärjäys-asetukseksi # 101010 ja aseta tämä uusi viiva ensimmäisen alle.

Valitse kaksi tasoa ja muunna ne älykkäiksi objekteiksi nimeämällä tämä Erotin 1 .

Jos haluat pidemmän vaakasuoran erottimen, kopioi Separator 1 -kerros (napsauta hiiren kakkospainikkeella Tasot-paletissa ja Kopioi taso), muuta kopion koko 1 x 200 kuvapisteen kohdalle, kierrä sitä 90 ° (voit taas käyttää Muokkaa> Vapaa muunnospolku ) ja kopioi tämäkin. Alla näet nämä erottimet valmiissa mallissa. (Emme käsittele tekstin ja kuvakkeiden luomista täällä.)

Valmiit erottimet toiminnassa

miten suunnitella videopelihahmoja
Valmiit erottimet toiminnassa

4. Suunnittele mukautettu mediasoitin

Seuraavaksi luomme mukautetun mediasoittimen, jossa on pyöristetyt kulmat, alla olevan kuvan mukaisesti:

Mukautettu soitin, jonka luomme uudelleen tässä opetusohjelmassa

Mukautettu soitin, jonka luomme uudelleen tässä opetusohjelmassa

Luo uusi tasoryhmä ja nimeä se Pelaaja ja aseta se pääsisällön alle.

Käytä kehyksessä pyöristetyn suorakulmion työkalua. Luo muoto, jonka mitat ovat 550 x 355 kuvapistettä ja # c2c2c2 Väri. Nimeä kerros Kehys ja käytä seuraavia tasotyyliasetuksia:

  • Drop Shadow: Normaali sekoitustila, 40% peittävyys, 120 ° kulma, käytä globaalia valoa, 1 kuvapisteen etäisyys, 3 kuvapisteen koko
  • Sisävarjo: Normaali sekoitustila, #ffffff-väri, 20% peittävyys, 120 ° kulma, käytä globaalia valoa, 2 kuvapisteen etäisyys, 0 kuvapisteen koko
  • Viiste ja kohokuviointi: Sisempi viistetyyli, sileä tekniikka, 50% syvyys, 3 kuvapisteen koko, 120 ° kulma, käytä globaalia valoa, korostustila 50%
  • Liukuvärjäys: Peittosekoitustila, 20% peittävyys, kaltevuus 100% peittävyys # 000000 - #ffffff väri, lineaarinen tyyli, 145 ° kulma, 100% asteikko
  • Aivohalvaus: 1 kuvapisteen koko, sisäasento, normaali sekoitustila, väritäyttö, # 474947 väri

Kehys on käynnissä

Kehys on käynnissä

Luo pyöristetyt kulmat piirtämällä suorakulmio, jonka mitat ovat 26 x 28 kuvapistettä ja väri # 585858. Valitse suoravalintatyökalulla (A) oikea alakulma ja siirrä sitä suorakulmion keskiosaa kohti saadaksesi kolmiomaisen muodon. Leikkaa monikulmainen Lasso-työkalu (L) skaalakolmio nykyisen sisäpuolelle sen pisimmältä sivulta. Tee leveys 8 kuvapistettä ja korkeus 9 kuvapistettä. (Käytä alla olevaa kuvaa viitteenä.) Käytä samoja sisäisen varjon, liukuvärin peittokuvan ja viivan asetuksia kuin kehyksellä.

Soittimen mukautettu kulma

Soittimen mukautettu kulma

Nimeä kerros c1 (kuten nurkassa 1), kopioi se kolme kertaa, Muunna jokainen kaksoiskappale vapaasti sopivaksi kehyksen eri kulmaan ja tee niistä kaikki kehyskerroksen leikkausmaskit.

Luoda uusi Kuvan haltija käyttäen samaa menetelmää kuin aiemmin. Tämä on 532 x 336 kuvapisteen suorakaide, jossa on # 262726 Väri ja ei tasotyyliä. Lisää kuva, jonka haluat näkyvän soittimen sisällä (tämä voi olla mitä haluat: emme ole toimittaneet sitä) ja tee siitä leikkaava naamio.

Lisää kuvanpitimen alaosaan kuvan yläpuolelle suorakulmio, jonka mitat ovat 532 x 85 kuvapistettä, aseta Opasiteetti-arvoksi 60% ja nimeä kerros Tekstin haltija .

Kirjoita jonkin verran peittotekstiä soittimen alaosaan käyttämällä Myriad Pro Bold, Sharp, 14pt. Aseta johtava arvo 18pt, aseta Väri-asetukseksi # f5f5f5 ja aseta se edellisen kerroksen yläpuolelle keskittämällä se pystysuunnassa ja jättämällä vasen marginaali 20 kuvapistettä. Käytä samoja Drop Shadow -asetuksia kuin mitä käytimme hintalappussa.

Valitse soitinpainikkeelle Mukautettu muoto -työkalu (U), valitse ympyrän ohut kehys avattavasta valikosta #ffffff Color -toiminnolla ja luo muoto, jonka mitat ovat 120 x 120px. Määritä Tasotyyli-valintaikkunan Aivohalvaus-asetukseksi Koko 1px, Sijainti-asetukseksi Ulkona ja Väri-asetukseksi #ffffff. Valitse samalla työkalulla kolmion muoto (saatat joutua napsauttamaan pientä nuolikuvaketta lentovalikon oikealla puolella ja valitsemalla Kaikki, ennen kuin näet sen). Luo 31 x 36 kuvapisteen kolmio käyttämällä samoja asetuksia ja tasotyyliä kuin ympyrässä. Muunna nämä kaksi tasoa älykkääksi objektiksi, keskitä ne ja nimeä taso Pelaaja Nuoli .

Valmistunut pelaaja ja sen tasoryhmät

Valmistunut pelaaja ja sen tasoryhmät

Ja se on mukautettu grafiikkamme valmis. Hauskaa kokeilla näitä tekniikoita! Testaa ja mukauta niitä uusiin malleihisi ja luo jotain hämmästyttävää.

Resurssit

Seuraavia ilmaisia ​​resursseja käytetään opetusohjelmassa esitetyn grafiikan luomiseen:

Seuraavia resursseja käytettiin muun mallin luomisessa, mutta ne eivät ole välttämättömiä itse opetusohjelmalle:

Älä unohda tutustua uusimpiin ominaisuuksiin Photoshop CS6 !