7 Photoshop-vinkkejä puhtaiden ja nykyaikaisten verkkosivustojen suunnitteluun
Puhdas, tyylikäs ja kaunis web-suunnittelu on usein henkilökohtaisen perspektiivin asia. Tarkastelen satoja sivustoja joka viikko, ja useat heistä erottuvat minulle, mutta kaikki eivät välttämättä ole tehokkaita.
Liian usein suunnittelijat kutovat konseptin liian pitkälle, tuottaen lopullisen muotoilun, joka on vain tekstiä ja ruudukkoa. Vaikka nämä minimaaliset mallit ovat niiden esteettisiä valintoja, erityisesti silloin, kun ne on yhdistetty erinomaiseen typografiaan, ne saattavat jäädä huomaamatta.
Henkilökohtaiset mielipiteet syrjään, on olemassa tiettyjä piirteitä, joiden ansiosta se voidaan ylpeänä leimata puhtaaksi tai uudenaikaiseksi ja parantaa sen käytettävyyttä ja likatietoja universaalilla tasolla. Yksinkertaisuus ei ole suunnittelumalli, vaan pikemminkin hyvän mallin attribuutti.
Photoshop tarjoaa meille monipuolisen valikoiman työkaluja syvyyden ja kiinnostuksen luomiseen ja kehottaa meitä integroimaan hienot yksityiskohdat, mihin jäisimme tyhjän tilan. Sinun tarvitsee vain muutamia näistä työkaluista, jotta nykyisen muotoilun ominaisuudet voidaan jakaa asetteluksi. Hallitsemalla niitä voit luoda puhtaita malleja, jotka ilmaisevat toiminnot selkeästi ja tehokkaasti.
1. Tila
Valkoinen tila mahdollistaa suunnittelun elementtien visuaalisen erottamisen ilman laatikoita, viivoja tai muita grafiikoita ja on mahdollisesti nykyajan muotoilun tärkein osa. On olennaista sisällön esittely ja luettavuus. Käytettäessä oikein, valkoinen tila antaa asettelulle sen puhtaan ja tyylikkään tunnelman.
Oppaat ja ruudukot ovat käytettävissä Photoshopissa, jotta voit sijoittaa elementtejä tarkasti. Verkko peittää koko asiakirjan, kun taas oppaat voidaan asettaa manuaalisesti. Käytä ohjeita aikaisin asettamaan näkymättömiä reunuksia, reunuksia ja pehmusteita, joita käytetään määrittämään valkoisen tilan.
Luo opas napsauttamalla Ctrl + R (Win) tai Cmd + R (Mac) osoittamalla viivain ja napsauttamalla ylhäältä tai vasemmalta viivalta vedäksesi ohjeet haluamaasi kohtaan. Seuraavassa on joitain ylimääräisiä oikoteitä, joiden avulla voit hallita oppaita työskentelyn aikana:
- Suuntaviivan siirtäminen: Ctrl (Win) tai Cmd (Mac) ja napsauta oppaasta
- Näytä / piilota oppaat: paina Ctrl +; (Win) tai Cmd +; (Mac)
- Näytä / piilota verkko: paina Ctrl + '(Win) tai Cmd +' (Mac)
Ota Smart Guides käyttöön kohdasta Näytä> Näytä> Smart Guides . Älykkäät oppaat tulevat automaattisesti näkyviin, kun piirrät muotoa, kohdistat tekstiä tai luodat valinnan tai liukusäätimen ja säästät näiden ohjeiden ohjeiden asettamista etukäteen.
Kohteiden kohdistaminen oppaiden ja verkkojen avulla tekee suunnittelusta helpommin sulatettavan ja antaa kokonaisuloksen kiiltävämmäksi.
2. Syvyys
Kevyellä ja varjolla luotu syvyys tekee elementit näkyväksi ja aidoksi. Varjoefektit voidaan soveltaa mihin tahansa objektin, valinnan tai tekstikerroksen, mutta temppu on valita taustalle sopiva väri ja luovuttaa oletus musta.
Kaikki varjot eivät saa olla tummat. Yhdistä Inner Shadow -teksti valkoisella tai vaalealla Drop Shadow -tuotteella, jotta voit luoda upotetun tai "kohopainatuksen" tekstin tai lomakekenttien avulla.
3. Yksityiskohta
Sekä kaltevuus työkalu että kaltevuus kerroksen vaikutukset ovat suuri rooli puhtaana ja moderni muotoilu. Vyöhykkeet ovat nykyajan muotoilun kaikissa osissa, varjoista ja kohokohdista taustoihin ja painikkeisiin.
Päästäksesi kaltevuustyökaluun, paina Shift + G. Voit luoda kaltevuuden napsauttamalla kangasta, vetämällä ja vapauttamalla. Tätä työkalua käytetään parhaiten suurilla alueilla, kuten taustalla, valolla tai radiaalisella varjolla. Kun käytät yksittäisiä elementtejä, kuten osioita, painikkeita tai kuvakkeita, Gradient Overlay layer -efekti on tehokkaampi keino luoda pintatyylejä tai kuvioita. Tätä työkalua voi käyttää kaksoisnapsauttamalla elementtikerrosta ja valitsemalla "Gradient Overlay" -valintaruutu.
Käytä tätä vaikutusta painikkeiden ja navigointipalkkien hienovaraiseen ulottuvuuteen tai jäljittelemiseen paperin tai metallien tyylistä ja tekstuureista.
4. Määritelmä
Ylittäessään reunoja ja reunoja varmista, että elementeillesi on oikea kontrasti.
Stroke-kerroksen vaikutus piirtää elementtejä, kuten tekstiä tai painikkeita, joissa tarvitaan yhtä painotettua ääriviivaa kaikilla puolilla. Tämän vaikutuksen avulla vapautat sisä- ja pudotusvarjot laajentamaan vaihtoehtoja.
On houkuttelevaa päästä kynätyökaluilla suoraviivojen ja horisontaalisten sääntöjen tekemiseen, mutta jos haluat käyttää kaltevuuksia tai varjoja linjaan, on helpompi käyttää Single Row Marquee Tool -työkalua, joka on piilotettu tarkasti Rectangular Marquee Tool -työkalun takana . Käytä Single Row -työkalua uudella kerroksella ja valkoisella tai vaalealla pudotusvarjolla luodaksesi korostusrivit reunaerissä tai erottimissa, joissa et pysty käyttämään vaikutusta elementtiin.
5. Kiinnostus
Puhdas ja moderni ei tarvitse olla yhtä tylsää, valkoista tai minimaalista. Selkeät tekstuurikuvio ja kuvio tekevät suunnittelusta erottuvan, samalla kun viestitään tyyliä ja tuotemerkkiä. Käytä hienovaraisia tekniikoita, kuten kohinan lisäämistä (Suodata> Lisää Melu) tai Tekstuurikerroksen kerroksen vaikutusta tausta-alueille tai käyttöliittymäelementteihin, jotta ne voidaan erottaa toisistaan. Todellisempi ja selkeämpi elementti näkyy, sitä houkuttelevampi on katsojalle.
6. Perspektiivi
Perspektiivi on nykyaikaisen web-suunnittelun eniten käyttämätön tekniikka yksinkertaisesti, koska jatkuvat trendit keskittyvät jatkuvasti symmetriaan ja verkkoihin. Soveltamalla näkökulmaa kuvioihin ja elementteihin suunnittelussa voit ottaa käyttöön syvyyden, ulottuvuuden, modernismin ja kiinnostuksen suunnitteluun yhdellä helppoa askeleella.
Perspektiivi voidaan antaa mihin tahansa muotoon tai kuvaan valitsemalla "Vapaa muunnosreitti" -vaihtoehto hiiren kakkospainikkeella ja napsauttamalla työkalupalkissa olevaa "Warp" -painiketta.
Perspektiivin illuusio voidaan tuottaa myös luomalla epäsymmetrisiä muotoja tai kehyksiä ja käyttämällä kaltevuuksia ja varjoja asianmukaisesti sijoittamaan kohteet erilleen.
7. Luettavuus
Vahva tyyppi on hyvin rakastettu muotoiluyhteisössä ja vieläkin vahvempi osa puhtaasta suunnittelusta. Se voi korvata kuvioita ja grafiikkaa, jotka muutoin voivat monimutkaistaa mallin ja välittää edellä mainittujen tekniikoiden täydellisen olemuksen yksinkertaisella ja suoraviivaisella tavalla.
Jos haluat lisätä tekstuureja tekstiin, voit muuntaa tekstikerroksen älykkääseen kohteeseen napsauttamalla ensin hiiren kakkospainikkeella kerrosta ja valitsemalla vaihtoehdon "Muunna älykäs objekti". Olet vain oletusarvoisesti kerrosefektejä, ellei tekstisi ole rasteroitu, käytäntö, jonka haluat välttää, vaikka suunniteltaisiin ruudulle. Siirtyminen Smart Objects -ominaisuuksiin mahdollistaa tekstien suodattimien ja muiden tekniikoiden käytön säilyttäen muokkausominaisuudet siinä tapauksessa, että tekstiä on myöhemmin muutettava.
Muista, että sinulla on käytettävissään seuranta- ja kerning-vaihtoehtoja tekstisisältöjen määrittämisessä. Vaikka tekstisi on tarkoitus kopioida CSS: ssä, kokeile rivi- ja kirjainväliä aikaisemmin, jotta voit paremmin visualisoida, miten sisältösi näkyy siinä tilassa, jonka olet antanut. Muista myös käyttää "Crisp" tai "Sharp" tekstiä pitämään määritelmä ja selkeys.
Se, miten esität sisällön puhtaana, on tärkeämpää kuin mikään muu tyyli, koska katsojalle on vähemmän nähtävissä visuaalisesti. Käyttämällä yllä olevia vinkkejä avaruustekstiin ja kohteisiin asianmukaisesti, lisäämällä määritelmää ja kiinnostusta ja asettamalla sisältöä rajapinnan ulkopuolelle, suunnittelusi saavuttaa optimaalisen tehokkuuden.
Mitä mieltä olet nämä vinkit ja onko sinulla muita käyttäjiä säännöllisesti? Jaa alla oleva ...