Suunnittele Forest Inspired Tumblr -teema Photoshopissa
Tumblr on mikroblogiointiympäristö, jonka avulla käyttäjät voivat helposti julkaista verkkosisällön tiedot, kuten valokuvan tai valokuvan, videon, tarjouksen tai vain yhden kappaleen.
Sitä käytetään usein online-päiväkirjaksi sen helppokäyttöisyyden suhteen verrattuna muihin blogeihin, kuten WordPressiin.
Paljon Tumblr-teemoja on olemassa, sekä ilmaisia että palkkioita, mutta oletko koskaan miettinyt, miten aiotte suunnitella omasi?
Tässä opetusohjelmassa opit luomaan metsäinsinöityä Tumblr-teemaa, jossa käytetään puutekstiilejä, hienovärisiä kuvioita ja nykyaikaisia tekniikoita - hieno yhdistelmä luonnollisia ja moderneja elementtejä.
Mitä aiomme suunnitella
Teemana, jonka suunnittelemme Photoshopissa, on neljä aluetta: puinen sivupalkki, pääosastoalue, oikea sivupalkki ja otsikko.
Vaihe 1
Ensimmäinen askel, kuten kaikkien suunnitelluilla tavoilla, on luonnosvaihe. Käyttämällä Wacom Bamboo -grafiikkatablettia ja tyhjää kangasta Photoshopissa piirrin seuraavanlaisen mallin, jossa on joitain suurempia elementtejä, vain saadakseni ideani alas (digitaaliselle) paperille.
Vaihe 2
Kun ajatus syntyi, luo uusi dokumentti Photoshopissa. (Pidä mielessä, tämä ei ole asetettu kiveen, se on vain jotain, johon voit viitata takaisin, jos sinä kiinni suunnittelusta.) Henkilökohtaisesti kokeilen ja vaihdan paljon siitä, mitä alun perin suunnittelin. Käytin seuraavia Photoshopin asetukset:
Vaihe 3
Seuraavana vaiheena on laittaa oppaita alas kangasta. Tämä auttaa sinua pitämään teeman rakenne siistinä, kun suunnittelet sitä. Haluan, että vasen sivupalkki on 200 pikseliä, pääsisällön pinta-ala on 600 pikseliä ja oikea sivupalkki 160 pikseliä, jolloin leveys on 960 pikseliä.
Jos olet käyttänyt samoja asetuksia, voit sijoittaa oppaasi 200, 800 ja 960 pikseliin vaakasuunnassa. Tämä muotoilu on kohdistettu vasemmalle niin, että puinen sivupalkki aina istuu käyttäjän näkymän vasemmalle puolelle.
Sijoitin myös oppaita 200 kuvapistettä kankaan yläosan alapuolelle ja 200 kuvapistettä kankaan pohjan yläpuolelle. Näin asiakirjani näyttää tällä hetkellä:
Vaihe 4
Lisää nyt kuvio taustaamme. Siirry kohtaan Tiedosto → Uusi ja luo uusi asiakirja, joka on 8 × 8 pikseliä. Piirrä pystysuorat viivat, joiden leveys on 2 pikseliä. Kanavasi tulisi nyt olla 2 pikseliä musta, 2 pikseliä valkoisena, 2 pikseliä musta, 2 pikseliä valkoisena. Siirry kohtaan Muokkaa → Määritä kuvio. Tallenna kuvio nimellä "Vertical Lines 2px."
Alkuperäisessä asiakirjallasi siirry Taskoon → Uusi täyttökerros → Kuvio. Valitse juuri luoma malli ja napsauta OK. Pudota kerroksen peittävyys, kunnes näyttää jotain näin:
Yhdistä kuvio taustakerrokseen, rasteroimalla se automaattisesti prosessiin. Siirry Suodatin → Melu → Lisää häiriö. Vaihda arvo 5 prosenttiin ja napsauta OK. Tämä lisää hienoista tekstuuria taustalle:
Luo uusi kerros ja täytä se valkoisella. Aseta se alkuperäisen taustakerroksen alle. Laske teksturoidun kerroksen kuvakuvasi peittävyys noin 40 prosenttiin ja yhdistä se taustakerrokseen siirtymällä tasolle → Yhdistä tasot.
Vaihe 5
Valitse suorakulmio -työkalu ja piirrä muoto, joka on 200 pikseliä leveä.
Aiomme leikata muotoilemme alalaidasta Polygonal Lasso -työkalua, jolloin se näyttää nauhalta. Luo valinta muodon päälle, rasteroise muodon kerros ja paina Poista-näppäintä valitun alueen poistamiseksi.
Aseta muoto vasemmalle sivupalkkialueelle, jonka merkitsimme oppaamme avulla.
Luo valinta muodon yläosasta ja siirry kohtaan Muokkaa → Vapaa muunnos. Varttaa muoto niin, että se peittää kankaan yläreunan.
Vaihe 6
Valitse Ellipse Shape -työkalu ja pidä Shift-näppäintä pitämällä pyöreä, piirrä ympyrä, täynnä valkoista. Aseta se sivupalkin yläosaan ja nimeä kerros uudelleen muotokuvaan.
Napsauta hiiren kakkospainikkeella uutta muotokerrosta ja valitse "Rasterize layer" -vaihtoehto kääntääksesi sen älykäs objekti pikseleiksi. Pidä Command-näppäintä painettuna ja napsauta kerroksen esikatselukuvaa Tasot-paneelissa. Tämä tekee valintasi ympyrästäsi.
Etsi kuva itsestäsi (tai mitä sivustosi on kyse) ja kopioi se. Päätä takaisin Photoshopiin ja, kun ympyrävalinta on vielä aktiivinen, siirry kohtaan Muokkaa → Liitä sisään. Tämä liittää objektin ympyränvalintaan.
Kun olet tehnyt tämän, olet luonut automaattisesti kuvion kerrosmaskin (eli uudella kerroksella, ei nykyisellä ympyräkerroksella). Määritä muokkaus → Vapaa muunnos, jos haluat muuttaa ja / tai pyörittää kuvaa. Se pysyy ympyränä; vain olla varma siitä, ettei se ole liian pieni. Kun olet tehnyt tämän, poista kerros nimeltä "Muotokuva" ja nimeä uusi taso uudelleen.
Vaihe 7
Valitse Tyyppi -työkalu ja luo tekstiruutu otsakealueella. Olen antanut teemani täysin satunnainen nimi: "Kabooom". Käytin fonttia Reklame Script. Voit ladata fontin demo tai ostaa sen 30 dollaria MyFonts .
Napsauta hiiren kakkospainikkeella tyyppikerrosta ja valitse "Sekoitusasetukset". Käytä värisävyä tekstiin. Käytin vaalean harmaa, joka on hieman tummempi kuin taustalla, jossa on kuusi-koodi # D6D6D6.
Käytä sisäistä varjoa tyyppiä käyttäen 10%: n läpikuultavuutta, 2 pikselin pituutta ja 1 pikselin kokoa. Jätä kaikki muu arvoon 0. Tämä tekee tyypistä näyttävän, että se oli kaiverrettu taustalla.
Kaiverretun vaikutuksen täydentämiseen lisäämme tyyppiseen pudotukseen varjon käyttämällä värillistä valkoista normaalia sekoitustilaa. Anna varjolle 2 pikselin pituus ja 1 pikselin koko. Nämä asetukset tekevät varjon näkyvän korostettuna lajin pohjassa, lisäämällä syvyyteen tyyppiä ja vahvistamalla sisäistä varjoa.
Vaihe 8
Vahvista Tyyppi -työkalu uudelleen ja luo tekstilaatikko, joka täyttää oikean sivupalkin leveyden, joka on merkitty oppailla. Laita useita kategorioita alla olevaan otsikkokohtaan:
Valitse luokan otsikko ja muuta kirjasintyyppiä haluamallasi tavalla. Käytin Minion Pro: ia. Kokeile ala-fontteja (lihavoitu, kursivointi jne.) Ja pistekoot.
Muuta luokkien fonttia ("Uutiset", "Päivät ulos", "Valokuvaus" jne.) Käytin Myriad Proa. Laske tyypin pistekokoa ja säädä johtavaa (eli tekstin rivien välistä tilaa) siten, että ylärivi sijaitsee alemmalla tasolla kuin oletusarvoisesti.
Kopioi ensimmäinen otsikko ja linkit ja liitä ne alla olevaan tekstiruutuun. Muuta otsikkoa ja luokkia. Käytin otsikoita "Omat projektit" ja "Omat ystävät". Käytä mitä tahansa verkkosivustosi kannalta merkityksellistä.
Vaihe 9
Aiomme nyt tehdä tekstin oikealla sivupalkilla hieman houkuttelevammaksi. Valitse alikategorioiden teksti (ts. Otsikot) ja muuta väriä mustaksi tummanharmaaksi. Käytin # 333333. Napsauta OK.
Napsauta hiiren kakkospainikkeella tyyppikerrosta ja valitse "Sekoitusasetukset". Käytä valkoista pudotusvarjon normaalilla sekoitustilalla. Vaihda kulma 120 ° ja etäisyys ja koko 1 pikseliin. Jätä kaikki muut asetettu 0 pikseliä. Tämä lisää tekstin alaosaan kohokohdan, aivan kuten otsikon kanssa.
Vaihe 10
Valitse Line-työkalu ja pitämällä Shift-näppäintä pitämällä suoraa, piirrä viiva otsikon "Kategoriat" alle.
Napsauta hiiren kakkospainikkeella riviä ja valitse "Sekoitusasetukset". Käytä valkoista pudotusvarjon normaalilla sekoitustilalla. Aseta kulma 90 ° ja etäisyys 1 pikseliin. Aseta kaikki muu 0 pikseliin.
Kopioi rivikerros ja aseta se jokaisen otsikon alapuolelle.
Vaihe 11
Jos sinulla on sama määrä otsikoita kuin minä, niin sinulla pitäisi olla kolme rivitasoa. Valitse ne kaikki ja kopioi ne. Kun valittuna olevat kolme linjakerrosta nostetaan, siirrä ne 10 pikseliä pitämällä Vaihto-näppäintä painettuna ja painamalla alas-näppäintä kerran. Laske uudempien rivikerrosten peittävyys 25%: iin päätyäksesi tähän:
Vaihe 12
Tartu suorakulmion muoto -työkaluun ja piirrä suorakulmio, joka on samanlainen kuin alla. Tee suorakulmiosta tarkalleen 570 pikseliä. Tämä mahdollistaa 10 pikselin välisen eron vasemman sivupalkin ja uuden suorakulmion reunan ja oikeanpuoleisen sivupalkin ja uuden suorakulmion reunan välille 20 pikselin välisen eron, kuten kuvassa näkyvässä kuvaskuvassa kuvataan:
Vaihe 13
Valitse uudelleen suorakulmion muoto -työkalu ja luo paljon pienempi harmaa suorakulmio, kuten alla oleva. Aseta se suuren suorakulmion oikeaan yläkulmaan, joka on siirretty suurelta suorakulmasta 10 pikselin tarkkuudella. Aseta muoto 30 kuvapistettä suorakulmion yläosasta.
Vaihe 14
Kopioi tyyppikerros oikeaan sivupalkkiin ja käytä Shift-näppäintä ja Kursor-näppäinyhdistelmää siirtäkää päällekkäistä tyyppikerrosta pääosan sisältöalueella. Tee samoin kahden rivin kerroksen kohdalla "Kategoriat".
Valitse Tyyppi -työkalu ja napsauta päällekkäistä tyyppikerrosta. Poista kaikki ruudussa oleva teksti ja muuta otsikko jotain sopivampaa. Käytin vain jonkin verran tekstiä: "Tätä täällä kutsutaan nimeksi."
Vaihe 15
Siirry kohtaan Tiedosto → Paikka ja etsi valokuvasta paikka paikalleen. Käyttämällä todellisia kuvia täällä on aina paras, koska ne tekevät mock-up näyttää todenmukaisemmalta ja houkuttelevalta. Käytin a kuva siskoni .
Siirry kohtaan Muokkaa → Vapaa muunnos, jos haluat pienentää valokuvan kokoa ja sijoittaa sen oikeaan kohtaan. Tee se yhteensä 20 pikseliä lyhyemmäksi sekä leveydeltä että korkeudelta niin, että se sopii hienosti mustan suorakulmion muotoon, kuten:
Vaihe 16
Avaa Suuri mustan suorakulmion sekoitusasetukset. Käytä valkoista värisäiliötä ja pudotusvarjon, jonka peittävyys on 10% ja kooltaan 3 pikseliä.
Vaihe 17
Valitse Rectangle Shape -työkalu uudestaan ja piirrä pitkä muoto valkoisen valokuvatiedon alla. Varmista, että se on sama leveys. Täytä se vaaleanharmaalla.
Avaa uuden harmaan suorakulmion Sekoitusasetukset ja käytä pudotusvarjon. Aseta väri valkoiseksi, normaalilla sekoitustilalla, peittävyys 100% ja etäisyys 1 pikseliin. Jätä kaikki muut asetettu 0 pikseliä.
Käytä myös sisäistä varjoa, jossa on musta väri, jonka läpinäkyvyys on 10%. Muuta koko 13 pikseliksi ja jätä kaikki muut asetettu 0 pikseliin. Nämä kaksi kerrosta tyylejä tekevät uuden muodon näyttävän olevan haudattu taustalla, kuten otsikkotyöstämme:
Vaihe 18
Siirry sivupalkkiin lataamalla joitain toistuvat puutekstiilit. Käytän a asetettu GraphicRiveriltä joka sisältää kolme erilaista puukerrosta: kevyt, keskikokoinen ja tumma.
Kun olet asentanut kuvioita Photoshopiin (avaamalla jokainen kuva ja määrittämällä sen kuvaksi), valitse sivupalkki Photoshop-dokumentissa. Siirry Taskoon → Uusi täyttökerros → Kuvio. Valitse yksi puun kuvioista (valitsin keskikokoisen version) ja napsauta OK. Valitsemalla sivupalkin ensin kuvio täyttää vain kyseisen alueen.
Napsauta kuvakerrosta hiiren kakkospainikkeella ja valitse "Sekoitusasetukset". Käytä kaltevuusmateriaalia, joka menee mustasta läpinäkyvään mustaan:
Muuta kaltevuuspeitteen peittävyyttä 10%: iin ja anna sille 0 ° kulma. Tämä lisää sivupalkkiin hienovarainen varjo, jolloin se näyttää hieman realistisemmalta ja vähemmän tasolta.
Käytä myös pudotusvarjoja sivupalkkiin. Laske peittävyys 30%: iin ja muuta kulmaa 180 °. Vaihda etäisyys 1 pikseliin ja koko 5 pikseliin, jolloin kaikki muut asetetaan 0 pikseliin. Tämä lisää sivupalkkiin pienen ja hienovarren varjon.
Vaihe 19
Avaa "Sulautumisasetukset" ympyränmuotokuva, joka luotiin tämän oppitunnin alussa. Käytä valkoista pudotusvarjon alla olevia asetuksia käyttäen:
Sovita myös sisäinen varjo alla olevien asetusten avulla. Tämä tekee ympyrän muotokuva näyttä siltä kuin se olisi sijoitettu puuhun sen sijaan, että se vain istuisi.
Vaihe 20
Kopioi otsikkokerros pääosissa. Siirrä se sivupalkkiin ja muuta tekstiä kohtaan "Tietoja minusta". Aseta ja muokkaa myös rivin alla olevat rivit.
Avaa uuden tyyppikerroksen "Sekoitusasetukset" ja muuta pudotusvalotusasetuksia näihin:
Lisää teksti "Tietoja minusta" -osiosta käyttämällä samaa kirjasinta ja kokoa, jota käytimme oikeassa sivupalkissa. Avaa tämän uuden tekstin "Sekoitusvaihtoehdot" ja napsauta "Ulkouima" -välilehteä ulkovaistetta käytettäessä. muuta peittävyyttä 30%: iin, väristä valkoinen ja kooltaan 18 pikseliä.
Tämä tekee tekstistä luettavuuden puusta.
Selaa kirjasinkokoa, jotta tekstistä on helpompi skannata.
Vaihe 21
Joidenkin kokeilun jälkeen päätin, että koko sivupalkki näytti paljon paremmalta edellä mainittujen kolmen tekstuurin tummemmasta. Muutin sivupalkin kuvio ja tekstin värit. Käytä tekniikoita, jotka olet jo oppinut tekemään.
Tässä on, mitä minun mallini näyttää toistaiseksi:
Vaihe 22
Kuitenkin paljon olet suunnitellut, sinun on tehtävä muutoksia suunnitteluprosessin aikana. Kun tarkastelemme koko mallia (pikemminkin hajanaisia), päätin, että 10 pikseliä sivupalkkien ja pääainesalueiden välillä ei ollut tarpeeksi lähellä.
Käytä Shift- ja Cursor-näppäinyhdistelmää siirtämällä sisältöäsi poikki ja tekemällä kaksi aukkoa 40 pikseliä 10: n sijasta. Tämä tekee suunnittelusta käyttökelpoisemman ja houkuttelevamman.
Vaihe 23
Päätin myös vaihtaa teeman otsikon tyylin.
Muuta väriä (käyttämällä värin peittokuvaa Blending options -ikkunassa), joka on valittu ympyränmuotokuvauksesta. Otin tumman vihreä-sinisen.
Poistin myös sisäisen varjon ja muutin pudotusvarjon asetuksia, jolloin otsikko istuu taustalla taakse eikä aseta siihen.
Vaihe 24
Pääsisältöbanderon (eli aiemmin luomasi suorakulmion, joka sijaitsee pääsisällön kuvakentän oikeassa yläkulmassa), siirtymällä valitsemalla suorakulmion napsauttamalla kerroksen pikkukuvan esikatselua pitämällä komentopainiketta painettuna.
Siirry Taskoon → Uusi täyttökerros → Kuvio ja valitse sama tekstuuri, jota käytit sivupalkissa.
Napsauta hiiren kakkospainikkeella kuvion täyttökerrosta ja valitse "Rasterize layer" -vaihtoehto. Käytä Dodge- ja Burn-työkaluja lisäämällä kohokohdat vasemmalle ja ylhäältä muotoon ja varjoihin muodon oikealle ja alareunalle.
Tämä lisää syvyyttä ja antaa pienen kolmiulotteisen tunnelman muotoon. Burn-työkalu tummentaa kuvaa, kun Dodge-työkalu keventää sitä.
Valitse Monikulmainen Lasso -työkalu. Valitse samanlainen muoto kuin alla oleva, ja täytä se tummalla ruskealla tekstuurilla.
Käytä Rectangular Marquee -työkalua valitsemalla ne uudet muodot, joita et tarvitse, ja poista ne painamalla Poista-näppäintä. Sinun pitäisi päätyä jotain vastaavaa:
Vaihe 25
Tartu omaan yksinomainen kuvaketta nimeltään "Reflection". Käytämme useita näistä kuvakkeista suunnittelussa.
Aseta haluamasi kuvakkeet asiakirjaan valitsemalla Tiedosto → Paikka. Valitsin kameran, sydämen, latauksen, muokkauksen ja kellon kuvakkeet, jotka toimivat kuvani, kuten, reblog, muistiinpanoja ja aikakuvakkeita teemassa.
Vaihe 26
Valitse kamerakuvake ja muokkaa sen kokoa. Aseta se juuri julkaistuun postityyppipalkkiin. Käytä sisäistä ja pudota varjoa, käyttämällä samankaltaisia asetuksia kuin olemme käyttäneet tässä oppaassa.
Lisää jonkin typografia postityypin palkkiin. Käytin samaa Reklame-komentosarjaa, jota käytimme nimikkeessä ja samoissa sekoitusvaihtoehdoissa, joita käytimme vasempaan sivupalkin otsakkeisiin.
Vaihe 27
Valitse muut neljä kuvaketta. Napsauta hiiren kakkospainikkeella ja valitse "Rasteroimalla kerrokset" kääntääksesi ne älykkäiltä objekteilta pikseliobjekteihin.
Käytä Rectangular Marquee -työkalua kaikkien kuvakeheijastusten valitsemiseen.
Paina Delete-näppäintä kummassakin kuvakerroksessa poistaaksesi heijastuksen.
Vaihe 28
Nollaa kaikki neljä kuvakekerrosta. Siirry kohtaan Muokkaa → Vapaa muunnos ja pitämällä vaihtonäppäintä pitämällä kuvakkeet suhteessa, pienentämään niiden kokoa ja asettamalla ne alempaan sisältöalueeseen alapuolelle.
Avaa kuvakkeet tasaisesti kohdistinpainikkeiden avulla.
Vaihe 29
Napsauta hiiren kakkospainikkeella sydänkuvaketta ja valitse valikosta "Sekoitusasetukset". Vaihda väri vaaleanharmaaksi värikerroksella ja käytä sisäistä varjoa käyttämällä seuraavia asetuksia:
Käytä nyt pudota varjoa käyttäen näitä asetuksia:
Kun asetukset on otettu käyttöön sydänkuvakuvakerroksessa, napsauta hiiren kakkospainikkeella ja valitse "Kopioi tasotyypit". Valitse kaikki neljä kuvaketta uudelleen, napsauta hiiren kakkospainikkeella ja valitse "Liitä tasotyypit". Kaikki tämän palkin kuvakkeet sama vaikutus.
Vaihe 30
Valitse Tyyppi -työkalu ja tee pieni tekstiruutu sydänkuvakkeen vieressä. Kirjoita "Like this post". Käytä sisäistä varjoa ja pudota varjo käyttäen samanlaisia asetuksia kuin olemme käyttäneet tässä opetusohjelmassa.
Toista edellinen vaihe jäljelle jääneille kuvakkeille käyttämällä seuraavia lauseita: "Reblog this post", "1052 notes" ja "Lähetetty 19/03/2011". Muista kopioida ja liittää samat kerrointatyypit kullekin tyyppiselle tasolle.
Voit myös halutessasi sijoittaa joitain kuvakkeita uuteen tekstiin varmistaen, että tekstin ja kuvakkeiden välinen ero on johdonmukainen; eri tekstin pituuksien vuoksi tämä on ehkä muuttunut.
Vaihe 31
Kopioi kaikki pääosan sisältökerrokset ja aseta ne alkuperäisen alkuperäisen alapuolelle. Muuta otsikko-, kuva- ja postityyppiruutu. Kuten mainittiin, sitä realistisempi mock-up, sitä paremmin.
Vaihe 32
Kopioi otsikkokohta ja teksti sivupalkista ja lisää kuvakkeet. Käytin erinomaisia sosiaalisen median kuvakkeita tunnetaan nimellä Buddycons , joka on toinen kuin Webdesigner Depot.
Lopullinen tuote
Jälkeen joitakin koskettaa-ups (olen poistanut rosoinen nauha-kuin leikkaus sivun alaosassa) olen valmis! Tässä on lopullinen muotoilu, joka on valmis koodatuksi tai lähetettävä kehittäjälle sen tekemiseen.
Tämä opetusohjelma koottiin yksinomaan Webdesigner Depot: lle Callum Chapman , freelance-käyttöliittymän suunnittelija kaupankäynnin nimellä Circlebox Creative . Callum työskentelee myös inspiraation galleria projekti nimeltä Vinspires.
Haluatko nähdä toisen opetusohjelman siitä, miten leikata ja koodata tämä malli täysin toimivaan Tumblr-teemaan?