Kuinka tehokkaasti järjestää Photoshop-tasosi
Suunnittelijat pyrkivät turhautumaan kehittäjiin, kun he ottavat vapauksia työstämme.
Mutta meidän on ymmärrettävä, etteivät ne ole täysin vikoja.
Aseta itsellesi kengät: kuvitella, mikä on kuin avaamalla Photoshop-tiedoston (PSD), vain löytääkseen huonosti leimattuja kerroksia ja kansioita, sekä runsaasti valittuja piilotettuja kerroksia ja muita puoli-paistettuja ideoita, jotka eivät tehneet sitä toteutuminen.
Seuraavassa opetusohjelmassa kuvataan organisoidun, suunnittelija- ja kehittäjäystävällisen PSD-tiedoston luominen .
Tämä ei ole mitenkään ainoa ratkaisu, mutta toivottavasti se kannustaa parantamaan käytäntöjä web-design-maailmassa.
Kirjoittaessani tämän opetusohjelman, haastattelin useita kehittäjiä, joilla on paljon kokemusta useiden suunnittelijoiden kanssa.
Heidän palautteensa oli äärimmäisen oivaltava. Haluan ehdottomasti myös tavoittaa kehittäjät, joiden kanssa työskentelet , selvittääksesi, voitko tehdä mitään PSD-tiedostojen parantamiseksi.
1. Peruskansion rakenne
Aloittelijoille, pidät PSD-tiedoston nimeltä "Website-Template.psd" .
Tämä tiedosto sisältää kunkin verkkosivuston perusteet, mukaan lukien verkkojärjestelmän, peruskansiorakenteen ja yhteisten himmentymien (käytän 1000: n 1440 pikselin työtilaa ja sivuston leveys on 960 pikseliä).
Tämä malli poistaa tarpeen luoda uusi tiedosto jokaiselle projektille.
Otetaan hetki tutustumalla näiden kansioiden perusorganisointiin.
Huomaat, että oletuskansion rakenne sisältää vain kolme pääkansioa: "otsake", "sisältö" ja "alatunniste".
Tämä yksinkertainen sarja sisältää peruskansiot, joita useimmat verkkosivustot käyttävät ja jotka saavat minut alkamaan oikealla jalalla tarjoamalla tehokkaan organisaation alustan.
Huomaat, että olen merkinnyt kaikki kansiot mahdollisimman yksinkertaisesti .
Nämä kansiot käsittelevät alikansioita. Kun suunnittusi kasvaa, varmista, että uudet kansiot on merkitty yhtä selkeästi.
Ylätunnisteen kansion laajentaminen näet alikansioiden järjestämisen.
Huomaa, että "navigointi" -alakansio on yleensä monimutkainen: pidä kehittäjä mielessä, kun tunnistat ja luodaan tämän ala-kansion ja sen sisältö on tärkeä.
Viimeinen vaihe ennen suunnittelun hyppäämistä on ryhmitellä tämä kansion kokoelma vanhempiin kansioihin nimeltä "wireframes" .
Tämä auttaa pitämään sisällön järjestyksessä, kun aloitamme suunnittelun ja värityksen. Se on myös hyvä tapa erottaa saman PSD-tiedoston eri sivuista.
2. Tasojen hallinta koko sivustolle
Kun suunnittelijat pääsevät uraan, luovuuden rakenteen hylkääminen voi olla helppoa. Tämä on silloin, kun itsekuria täytyy potkia.
Meidän on pakko ottaa aikaa järjestää luomamme tasot .
Nyt, kun alkuperäinen asennus on valmis, annan katsauksen siitä, miten ryhmitän yhteen koko mallin eri elementit.
Kuten tiedätte, suunnittelu harvoin noudattaa lineaarista polkua, joten muista, että tämä on vain yksi ehkä lukemattomista ratkaisuista.
"Jos kaikki suunnittelijat noudattivat tavanomaista menettelytapaa, jonka mukaan heidän PSD: ien järjestäminen [järjestämällä kansioitamme noudattaen vakiosarjaa], voit helposti lykätä tunnin kehityskustannuksia, ellei enemmän. Puhumattakaan, että täytät ristin muotoilun ja kehityksen välillä, mikä heikentää alkuperäisen suunnittelun heijastumista, joka on yhteinen kehitysvaiheessa "
Matt Sears, Ruby on Rails -kehittäjä
3. Kansioiden rakenne yksityiskohtaisesti
Aloitamme yleiskuvan pääosasta (sisältö) ja lopetamme otsikon, koska sillä on tärkeä elementti (navigointi), joka vaatii erityistä huomiota.
Sisällön kansion avaaminen huomaat, että olen jakanut alikansioita niin, että sivuston ulkoasu näkyy kansiorakenteessa .
Esimerkiksi, koska sisällössä on ylä- ja alaosa, olen merkinnyt ne vastaavasti: "yläosa" ja "alaosa" .
Olen myös asettanut kaikki taustakuvaksi (kaltevuudet ja muut kuvat, jotka täytyy leikata HTML: lle) omille kansioilleen.
Avaa nyt "ylhäältä" -kansio ( sisällön kansion alikansio), joka sisältää useita yhteisiä elementtejä, kuten tekstin tilaa, kuvan tilaa jne.
Huomaa vielä toisen alarakenteen käyttämistä lisäkerroksille ja kansioille.
Kansioihin on merkitty fontteja, kuvia ja taustakuvia (kaltevuudet, kiinteät värit jne.).
Koska fontit voivat häiritä kehittäjiä, kun ne lajitellaan PSD: n kautta, avaa "fontit" -kansio nähdäksesi, miten olen järjestänyt nämä.
Pohjustin menetelmääni palautteen saamista kehittäjältä, joka mainitsi, että olisi hienoa pystyä napsauttamalla fontit luomaan viipaleita ilman, että teksti päätyisi tapaan.
Olen ottanut ylimääräisen askeleen ja todella antanut kerrokselle saman nimen kuin fontti .
Tämä antaa kehittäjälle välittömästi tietää, minkä fontin haluat käyttää HTML-koodauksen yhteydessä.
Monimutkaisempia malleja varten voit luoda lisäkansioita muiden fonttien ja tärkeiden otsikkotyyppien määrittämiseen.
(Vihje: otsikot ovat tyypillisesti merkitty H1, H2 ja niin edelleen CSS / XHTML-terminologiassa, joten otsikkotyyppien merkitseminen samalla tavalla on hyvää käytäntöä).
Kaikki fontteja koskevat tiedot on sisällytettävä "fontti" -kansioon, joten kehittäjän on tehtävä vain yksi klikkaus kaikkien fonttien poistamiseksi ja sivuston graafisten elementtien eristämiseksi.
Se voisi näyttää jotain tällaiselta:
Käytä aina intuitiota ja pidä tarroja yksinkertaisena ja ilmeisenä .
Tämä tekniikka ei koske kehittäjän käsinpitämistä; se on luoda helppokäyttöinen tiedosto, joka auttaa kaikkia pitkällä aikavälillä.
Mitä enemmän erotat elementit, kerrokset ja kansiot suunnittelussa, sileämmät asiat ovat kehitysvaiheessa .
Käytä tätä organisaation menetelmää koko prosessin ajan, ja yllätte, kuinka nopeasti se tulee toiseksi luonteeltaan.
4. Navigointi ja rulla-ylitykset
Kun määrität navigointirajapintaa - riippumatta siitä, käytätkö välilehtiä, selkeää tekstiä vai jotain muuta - sinun on ilmoitettava kehittäjälle, miten välilehdet näyttävät tietyissä tiloissa .
Jos välilehti muuttuu esimerkiksi, kun käyttäjä rullataan sen päälle? Onko erityistä JavaScriptia, kuten haalistumista tarvitaan? Mahdollisuudet ovat rajattomat, joten älä odota kehittäjän voivan lukea mieltäsi. Kansioihin mennään vain niin pitkälle, että nämä yksityiskohdat näytetään.
Kehotan sinua täydentämään PSD: täsi suunnittelupohjalla, joka antaa yksityiskohtaiset ohjeet suunnittelun monimutkaisemmista ja yksityiskohtaisemmista näkökohdista.
Oletetaan, että mallimme käyttöliittymä (UI) on välilehden rakenne. Kehittäjät pyrkivät käyttämään tiettyjä termejä, kun viitataan välilehden eri "tiloihin" ("tilalla" tarkoitan eri tapoja, joilla välilehti näytetään käyttäjälle).
Kehittäjien haastatteluissa havaitsin, että seuraavat termit ovat kaikkein johdonmukaisin ja tunnistettavissa.
Huomaa kutakin kuvausta vastaava kuva ja huomaa, miten kansiorakenne kuvastaa ajatusprosessia.
5. Korjaa tarrojen välilehdet ja niiden valtiot
Päällä : Navigoinnin kohteen (tässä tapauksessa välilehti) "on" -tilassa ilmoitetaan, että siihen liittyvää sivua tarkastellaan parhaillaan. Tyypillisesti sen pitäisi olla näkyvin.
Pois : Tämä tila ilmoittaa, että välilehteä voidaan napsauttaa, mutta sitä ei ole parhaillaan tarkastelemassa tai hiirtä hiirellä.
Hover : Tämä tila näyttää, kuinka välilehti tulee näkyviin, kun hiiren osoitin liikkuu tai rullataan epäaktiivisessa välilehdessä. Tämän tilan graafinen käsittely on usein sama kuin "on" -tilassa, mutta sille olisi vielä annettava oma kansio.
Avain on johdonmukaisuus: riippumatta siitä, mitä merkitset välilehdille, muista pitää ne yhdenmukaisina!
6. Lopullinen huomautus välilehdistä
Yhden alikansiot avautuvat navigointiin (kuvakaappauksen alla oleva "off" -kansio), näet, että olen jälleen ryhmittänyt kaikki tekstin erilliseen kansioon.
Tämä on valinnainen, koska teksti on usein osa välilehden graafista koostumusta.
Jos teksti luodaan uudelleen HTML: ssä, suosittelen sijoittaa se erilliseen kansioon, jotta kehittäjä voi napsauttaa sitä poistamalla graafisen leikkauksen.
7. Tiedostojen viimeistely
Tämä strategia saattaa tuntua hieman pakkomielta, ja kiinnittää huomiota rakenteen ja järjestyksen suhteen, kun yksi suuren suunnittelun heittoihin jää kiinni, ei ole helppoa.
Hanki kuitenkin projektin lopussa aikaa järjestää ja merkitä kansioasi asianmukaisesti .
Jos sinulla on monimutkaisia kuvioita suunnittelussa, yritä tasoittaa ne yhteen hyvin merkittyyn kerrokseen.
Jos tätä ei voi tehdä (ehkä hienostuneiden sekoitustekniikoiden vuoksi), kokeile kerrosten muuntamista älykkäiksi kohteiksi ja rasteroimalla ne sitten.
Viime kädessä tavoitteena on vähentää kerrokset ja kansiot tasolle minimiin ja merkitä ne kaikki mahdollisimman selkeästi.
8. Astu oikeaan suuntaan
Kehittäjät ja suunnittelijat eivät aina ajattele samankaltaisia.
Vaikka monet suunnittelijat toimivat luovassa kaaoksessa, kehittäjät ovat tyypillisesti riippuvaisia järjestyksestä, rakenteesta ja logiikasta .
Suunnitellessamme, pieni organisaatio menee pitkälle pitämään kehittäjät onnellisina.
Ei ole varmasti mitään oikeaa tapaa järjestää PSD-tiedostoja, joten pääset kehittäjiisi ja näet, mitä voit tehdä luoda PSD-tiedostoja, jotka pitävät kaikki terveet!
Josh Sears on kirjailija, kuvittaja ja suunnittelija verkkopohjaisten projektien murroksista. Hän tekee elantonsa Lead Web Designer, Creative Director ja Co-Owner of Littlelines.com . Sinä pystyt tarkista hänen työnsä täällä tai seuraa hänen päivityksiä Twitterissä .
Sovellatko näitä vinkkejä, kun työskentelet Photoshopin kanssa? Mitä muita tekniikoita voit käyttää Photoshop-kerrosten järjestämiseen?