8 tapaa suunnitella sivustoja nopeammin Photoshopissa
Web-suunnittelija on vaikea pysyä järjestäytyneenä. Ei vain, että tasapainotat useita projekteja kerralla, mutta olet todennäköisesti tiukat aikataulut ja kovat asiakkaat samoin. Voit myös olla pomppimassa brändistä brändiin ja jatkuvasti opettelemaan uusia tuotemerkkejä koskevia suuntaviivoja ja tyylejä.
Onneksi työmäärän tehostaminen on monia tapoja. Auttaa ulos, olen koonnut nämä kahdeksan vinkkejä, jotka pitävät sinut terveeksi web-suunnittelutyössäsi
1. Pidä tiedostot järjestyksessä
Yksi helpoimmista asioista, joita voit tehdä pitämään terveyttäsi, pitää tiedostosi järjestyksessä. Jatkuvan kansion rakenteen luominen ja ylläpito tekee tiedostojen etsimisestä tuulen. Ongelmia ilmenee, kun rakennat yhden kansion eri tavalla kuin toinen, minkä vuoksi haasteena on löytää se Final-Final-logo.ai -tiedosto.
Yhdenmukaiset tiedostojen nimeämiskäytännöt ovat välttämättömiä tiedostojen järjestämisessä. Tässä versioinnit tulevat. Jotkut suunnittelijat käyttävät päivämääriä, toiset käyttävät versionumeroita ja joitain käyttökierroksia. Tämä riippuu yrityksestäsi ja henkilökohtaisista mieltymyksistäsi, mutta se on hyvä käytäntö. Versioiden ansiosta voit helposti seurata, mikä tiedosto on uusin, varsinkin jos sinulla on vanhat versiot tallennettu viitteeksi.
Pidän yleensä kahdesta kolmeen vanhaan versiota, jos asiakas haluaa palata takaisin sankaristastrategiaan Round One -ohjelmasta tai mieluummin matkapuhelimesi käsittelystä toisen kierroksen jälkeen. Jotta pakkaus rotta-mentaliteetti vältetään, on hyvä arkistoida tai poistaa vanhempia tiedostoja, jotta kiintolevy ei katoaisi.
Tässä on esimerkkirakenne, jota käytän Clearlinkissä.
Yhdenmukaisen kansiorakenteen ja nimeämiskäytäntöjen yhdistelmä versioiden avulla auttaa hakukykyä. Jos esimerkiksi aloitat kaikki tiedostonimesi yhdestä brändistä tuotemerkillä tai lyhenneellä, voit suodattaa tuotemerkin varat helpommin. Tämä auttaa erottamaan "ATT-logo-final.ai" siitä, mikä voisi mahdollisesti olla "log-final.ai: n" meri.
2. Ymmärrä puitteet
Yksi asia, jota en oppinut vasta useisiin vuosiin suunnitteluuraimalleni, on, miten hyödyntää olemassa olevaa kehystä. Kaksi raskasta hitters puulla maailmassa ovat tällä hetkellä bootstrap ja perusta , mutta Googlen toteutua varmasti antaa heille rahansa lähitulevaisuudessa. Yhtiö, jota työskentelen, käyttää säätiötä suurimmalle osalle heidän merkkituotteistaan.
Säätiön mukana tulee sisäänrakennettu reagoiva verkko sekä painikkeiden, kenttien, typografian, navigoinnin jne. Muotoilu muun muassa muiden elämän helpottamiseksi. Käyttämällä säätiön sisäänrakennettua verkkoa PSD: issä voit helpottaa kehittäjää toteuttamaan malleja pikselillä paremmin kuin jos teet omasi. Photoshopilla on tämä hieno opasasennustyökalu, joka ei ainoastaan anna ristikoiden luomista tuulta, vaan myös liittää ne taiteelliseen alustaan tiedoston uudelleenjärjestelyn ja liikkuvuuden helpottamiseksi.
Kuvakaappaus Säätiö huijata arkki
Kehykset tarjoavat myös hyvät lähtökohdat painikkeen muotoiluun, lomakkeisiin jne. Ja auttavat näkemään toteuttamissuunnitelmien mahdollisuudet ja rajoitukset. Tämä ei vain anna sinulle hyvän lähtökohdan suunnittelulle, mutta se auttaa edistämään ystävällisempaa yhteistyötä kehittäjän kanssa.
3. Järjestä tasosi sisältöosion mukaan
Kun olet tekemisissä monimutkaisten web-suunnitteluprosessien kanssa niin monta kansiota, kerroksia, älykkäitä esineitä jne., Se on helppo saada sekaisin. Kun kerros 2,455 tulee esille, alkaa ymmärtää, että tarvitset jonkinlaista organisaatiota PSD: ssäsi. Siksi suosittelen PSD: n järjestämistä osastoittain.
Kaivos koostuu yleensä kansioista, jotka sisältävät Nav, Hero, Intro, Packages, Benefits, Footer jne. Myös värikoodit nämä kansiot sateenkaaren tavalla, joten ne on helppo navigoida. Tämä tekee päivitysosista ja PSD: n uudistamisesta tuulen.
Järjestän tiedostoni osion kansioihin, jotka ovat sateenkaaren värikoodattuja helpottavan skannauskyvyn.
Jos haluat esimerkiksi sankareaktiota suuremman, voit helposti vetää kaikki alla olevat kansiot yhdeksi yksiköksi (pidätyskomento) ja vetää ne takaisin sen jälkeen, kun päivitys on tehty. Tämä strategia auttaa myös kehittäjiä ja muita suunnittelijoita helposti navigoimaan tiedostosi. Käyttämällä ymmärrettäviä nimiä kuten "Hero" ja "Nav", uusi suunnittelija voi helposti hypätä kansioon ja tehdä muutoksia, joita he tarvitsevat.
Jotkut suunnittelijat saavat jopa nimetä yksittäisiä kerroksia, jotka voivat olla myös erittäin hyödyllisiä, mutta voivat saada vähän aikaa vievää. Koska kerrokset ovat helposti löydettävissä automaattisen valintatyökalun avulla, kun se on asetettu "kerrokseksi", on helppo päästä yksittäisiin kerroksiin näinä päivinä, joten yksittäiselle suunnittelijalle on selvää, miten he haluavat järjestää kerrokset. Tarkoitus on, että olet valmis.
4. Muistuta kaikki normaalisti käytettävät pikanäppäimet
Tämä on tehokkuuden isku. Jos löydät itsesi käyttämällä tiettyä avainkomentoa säännöllisesti, muista se. Voit lisätä tehokkuutta eksponentiaalisesti, jos sinulla on kaikki tärkeimmät pikanäppäimet.
Jotkut tärkeät säästöt, kirjasinkoko ja johtavat, kerroksen tilaus, verkon säästäminen ja peittävyys monien muiden joukossa. Photoshop antaa sinulle myös mahdollisuuden luoda omia pikakuvakkeita. Kirjallani tärkein komentotiedosto on tallentanut tiedostoasi. Adobin satunnaisten kaatumisten takia on hyvä säästää usein säästämisen sijaan, eikä se menettää mitään etenemistasi.
Adobe antaa sinulle mahdollisuuden räätälöidä pikanäppäimet kohdassa Muokkaa> Näppäimistöpikanäppäimet
Pikakuvakkeet liittyvät myös kerrosten järjestämiseen sisältöosiokansioiden mukaan (kuten yllä mainittiin). On helpompaa tuoda kerrokset kansion yläosaan ja pohjaan pikanäppäimillä kuin järjestää uudelleen kerrokset järjestämättömässä tiedostossa. Täällä järjestetään tiedostosi, kun suunnittelet. Muistelemalla usein käytettyjä pikanäppäimiä ja pitämällä kerroksesi järjestäytyneesti lisäävät tehokkaasti tehokkuutta ja auttavat muita suunnittelijoita työskentelemään tiedostosi kanssa.
5. Käytä CC-kirjastoja
Yksi parhaista asioista, joita Adobe on lisännyt sisällön luomisen jälkeen, on kirjastoja. Jos et ole kuullut niistä, sinun täytyy tarkistaa tämä hämmästyttävä opetusohjelma miten niitä käytetään.
Minusta tuntuu, että jokaisen suunnitteluryhmän pitäisi hyödyntää tätä hämmästyttävää ominaisuutta. Kirjastojen avulla voit luoda tuotemerkkikirjaston, jolla on värejä, kuten kirjasintyylejä, valokuvia, kuvakkeita ja symboleja (kuten otsikot ja alatunnisteet). Kirjojen ansiosta voit helposti tehdä yhteistyötä useiden organisaatioiden mainosten kanssa käyttämällä yhtä tuotekirjastoa.
Kirjastoilla on helppo vaihtaa värejä ja päivittää tekstityylejä napin painalluksella. Ne auttavat myös tallentamaan brändikuvakkeita, joita voidaan helposti päivittää yhdessä paikassa, ja päivitykset heijastuvat nopeasti PSD-tiedostojen kautta. Tämä on erittäin hyödyllistä sivustosi otsikoille ja alatunnisteille, joissa olet todennäköisesti pieniä päivityksiä koko projektissa.
Käytän myös CC-kirjastoja fontin muotoiluun koko suunnitteluni ajan. Asennan tyylit sankarikopioille, otsikoille, alikansioille, kopion kopioille, vastuuvapauslausekkeille jne. Työpöydälle, tablet-laitteelle ja mobiilisovelluksille. Näkymän vaihtamiseksi löydän listan muodon useammin kuin laattakuvaksi sen helppokäyttöisyyden vuoksi.
Kirjastoelementtejä katsotaan yhteistyökumppaniksi
Kirjastot ovat myös erinomaisia tiimiyhteistyölle. Voit joko tehdä yhteistyötä muiden mainosten kanssa, jotta he voivat muokata ja lisätä kirjastoon tai voit jakaa kirjaston linkin helposti. Heillä on myös "Luo uusi kirjasto asiakirjasta" -ominaisuus, mutta haluan luoda itse kirjaston, joten se pysyy järjestäytyneenä ja sillä on vain tärkein omaisuus.
Valitettavasti kirjastoihin on olemassa joitain haittaohjelmia, joista yksi on tekstin puuttuminen erillisistä luonteesta ja kappaleesta. Työskentelen ympäri tätä soveltamalla hahmon tyyliä erillisessä laatikossa ja liittäen sitten eri tyylit laatikkoon, jotta tekstiruutuista helpompi hallita tiedostossa. Toinen haittapuoli on se, että tällä hetkellä ei voi päivittää merkistötapaa maailmanlaajuisesti. Tällä hetkellä kirjastossa ei ole organisaation kykyä luoda alikansioita kategorioihin (väri, hahmotyylit jne.), Mutta toivottavasti Adobe työskentelee myös tässä.
Nykyinen CC-kirjastojen toiminta on, että viimeisin päivitetty / lisätty omaisuus näkyy ylös. CC-kirjaston värejä ei voida soveltaa yksittäisiin teksteihin tekstilaatikoissa, ja niitä voidaan soveltaa helposti muotoihin ja koko tekstiruutuihin. Olen varma, että Adobe on vaikea ratkaista näitä asioita, joten en ole liian huolissani, varsinkin kun ammattilaiset ovat varmasti suuremmat kuin haitat.
6. Pidä kuvat ja vektorit älykkään objektin muodossa
Vaikka tiedostojen koko kasvaisi, kuviesi ja vektorien säilyttäminen älykkään objektimuodossa helpottaa tulevien suunnittelijoiden muokkaamista PSD-tiedostojasi. Kuva tämä: asiakas palaa muokkauksilla, joihin kuuluu sankarikuvan leikkaaminen uudelleen ja pieniä tweaksia vektori -kuvakkeeseen. Tämä on helpompaa, jos PSD sisältää täyden resoluution kuvan pikemminkin kuin pienempi, rasteroitu versio. Vektoreita on myös helppo nipistää, kun ne ovat älykkäitä esineitä Illustratorista rasteroitujen grafiikan sijaan.
Toinen hyödyksi, kun valokuvia on älykäs objektimuoto, tulee, kun tallennat ne PSD: ksi ja aseta ne tiedostossasi älykäs objekti. Sijoitetun valokuvan käyttäminen PSD: n avulla on helppo lisätä säätökerroksia ja muokata erillistä, sisältävää valokuvatiedostoa sen sijaan, että ryöstettäisiin lähdetiedostoasi. Hyödyllisten objektien käyttäminen kirjastografiakuviona antaa sinulle vielä enemmän voittavan yhdistelmän. Ei vain voit helposti muokata vektoriobjekteja, mutta kirjastografiat päivittyvät kaikkiin sovelluksiin.
"Hero Illustration" -grafiikkaa voidaan muokata erillisellä PSD: llä, jotta päätiedoston häiriö olisi mahdollisimman pieni.
7. Luo tyyliohje ja pidä siitä kiinni
Useilla tuotemerkeillä on yleinen tyyliopas, jota voit seurata fonttien, värejä, valokuvia, kuvakkeita, kuvituksia jne. Varten. Tämä on hyödyllistä resurssina, mutta ei aina pidä sinua johdonmukaisena verkkosivustokohtaisesti . Olen parantanut tehokkuuteni luomalla web-tyylisiä oppaita kullekin tietylle sivustolle, jota työskentelen.
Joskus brändeillä on useita eri tyylejä sisältäviä sivustoja, niin varmistan, että minulla on yksi jokaiselle sivustolle, jotta voin pysyä yhtenäisenä samalla kun suunnittelemme. Tämä luo myös helpon vedä ja pudota resurssia, kun tarvitsen painikkeita, kuvakkeita, kuvia, valokuvia jne. Ei vain tämä tekisi sinusta tehokkaamman kuin suunnittelija, mutta se auttaa sinua pysymään yhtenäisessä tyylissä koko sivustolla.
Minkä välin käytän välissä osioiden välillä? Tutustu tyyliohjeeseen! Mikä oli ensisijainen painikkeen väri ja pehmuste uudelleen? Tartu tyyliohjeesta! Tämä auttaa myös muita suunnittelijoita helposti hypätä sivuston malleja helposti ja tehokkaasti. Jos yhdistät CC-kirjastojen käytön tyylioppaaseen, olet vielä edellä pelin edellä.
Luomaan PSD-tyylin oppaan kaikille eri tuotemerkkeille, joita työskentelen, jotta voin helposti napata elementtejä, kuten painikkeita ja kuvakkeita.
Monet suunnittelijat ovat houkuttelevia lisäämään uusia tyylejä aina, kun ne kohtaavat uuden ongelman suunnittelussa. Johdonmukaisuuden vuoksi on parasta välttää tämä ja aina noudattaa tyylisi oppaassa määritettyjä standardeja. Jos lisäät uusia tasoja ja tyylejä, varmista, että niitä sovelletaan koko sivustossa.
Mitä uusia uusia tyylejä luodaan, monimutkaisemmat tulevaisuuden mallit tulevat olemaan, ja sitä vaikeammaksi uusien suunnittelijoiden on hypätä projekteihin ja pitää suunnitelmat johdonmukaisina. Monissa tapauksissa johdonmukaisuus on tärkeämpää kuin jatkuva innovaatio käyttökokemuksen osalta. Vaikka se saattaa viedä enemmän aikaa luoda web-tyylisuunnitelma projektin alussa, se lisää tehokkuutta kaikissa tulevissa sivuissa.
Yksi parhaista käytännöistä, joita olen oppinut Brad Frostista, on tehdä käyttöliittymän inventointi joko suunnitteluprosessin aikana tai olemassa olevalle sivustolle, jonka työskentelet. Käyttöliittymäkartoitus koostuu kaikkien tekstityylien, painotyyppien jne. Keräämisestä kuvakaappausten avulla ja niiden kokoamisesta löytääkseen epäjohdonmukaisuuksia. Voit sitten esittää havainnot asiakkaalle ehdottaa päivityksiä ja parannuksia.
Koska sivustot koskettavat useita suunnittelijoita heidän olemassaolonsa vuoksi, asiat saattavat olla melko karvaisia sakeusosastolla. Kun löydät sivun elementtejä koskevan yhtenäisen muotoilutyypin, päivitä tyylioppaasi niin, että kaikki ovat ajantasaisia.
Interface Inventory kuvakaappaus alkaen http://bradfrost.com/blog/post/interface-inventory/
8. Edistä osastojen välistä yhteistyötä
Monet ihmiset, jotka harjoittavat uran markkinointituotannossa (suunnittelijat, kehittäjät, copywriters jne.), Ovat yleensä introvertteja, joten on vaikea päästä pois oman mukavuuden alueelta, kun on kyse yhteistyöstä. On myös vaikea jättää asiantuntemusvaippaa, varsinkin kun se on helpompi liittyä alan ammattilaisiin. Vaikka se voi olla hankalaa tai epämukavaa joskus, jolloin kupla ja säännöllinen yhteistyö muiden yksikköjen kanssa työskentelevien kanssa voi suuresti parantaa mallien laatua ja tehokkuutta.
Erinomainen esimerkki tästä on, kun suunnittelijat ja kehittäjät tekevät yhteistyötä uudistettaessa. Sinun tulisi tavata kehittäjä etukäteen selvittämään, mitä kehystä he käyttävät, kouluttautumaan verkko-järjestelmässä ja arvioimaan mahdollisuuksia. Kun suunnittelutyö on valmis, varmista, että jakat Photoshop-kirjastosi, jotta kehittäjällä on helppo pääsy värivalikoimaan, fonttityyleihin jne. On myös hyödyllistä jakaa tyyliopas etukäteen yhdessä muiden komponenttien kanssa joka on suunniteltu antamaan heille hyvän pään alku.
Yhteistyö tiimisi muiden suunnittelijoiden kanssa kirjastojen käytössä auttaa myös sinua pysymään johdonmukaisena ja tehokkaampana. Kun luovat taidegrafiikan tai useimmat vanhemman suunnittelijan vastuun kirjasto- ja tyyliohjepäivityksistä, sekaannukset sekoittuvat ja tuotemerkit pysyvät yhdenmukaisina. Varmista vain, että päivityksiä tehdään, jotta jokainen on samalla sivulla.
Pysy rauhallisena
Web-suunnittelu voi joskus olla ylivoimainen ja haastava. Sen ei aina tarvitse olla näin. Seuraamalla näitä yksinkertaisia vinkkejä Photoshopin tehokkuuteen voit lievittää stressiasi hyvää kappaletta. Tämä ei ainoastaan paranna hyvinvointia, mutta sekä liike-elämän että luovien puolien johtajat ja johtajat todella arvostavat kovaa työtäsi ja suosittelevat sitä. Loppujen lopuksi kaikki ovat hyviä johdonmukaisemman, tehokkaamman, kauniimman muotoilun kanssa.