Kuvakkeet ovat olennainen osa suunnittelua. Ne ovat visuaalisia vihjeitä, jotka osoittavat erilaisia toimintoja, ja ne voivat antaa tuotteelle ainutlaatuisen identiteetin. Mutta monta kertaa päätämme juhlia sen merkitystä lataamalla samat kuvakesarjat ja tekemällä jokaisen verkkosivuston jokaisesta kuvakkeesta sama kuin edellinen. Mikä tapa käsitellä jotain niin tärkeää!
Tämän ongelman ratkaisemiseksi olen luonut oppaan, jonka avulla suunnittelijat voivat lisätä kuvakkeisiinsa visuaalista syvyyttä ja tehdä niistä yksilöllisiä edustamalleen tuotteelle. Tämä opetusohjelma on pitkälti innoittamana Google Material Design -oppaasta.
Miten sanotaan Google 'Materiaali on metafora.' Lainaa visuaalisia vihjeitä fyysisestä maailmasta ja luo uusi visuaalinen kieli kaikkien käyttöliittymiesi standardoimiseksi. Materiaalisuunnittelun periaatteet ovat saatavilla ja sitä voidaan käyttää nopeasti eri käyttöliittymien visuaalisen houkuttelevuuden ja käyttökokemuksen parantamiseksi.
Materiaalisuunnittelun 'tasainen' suunnittelutrendi, joka perustuu myös tasaisiin muotoihin, valitsi huolellisesti, mikä muoto kuvasi parhaiten elementtiä, jota kuvake edustaa. Valitse huolellisesti, mikä muoto edustaa parhaiten elementtiä, jota kuvake kuvaa.
Varjo on hyvä tapa huijata silmiä ja antaa suunnittelulle syvyyden tunne, koska se simuloi valon vaikutusta esineeseen.
Huomaa, että luonnonvaloa simuloidaan usein tulevan vasemmasta yläkulmasta.
Kutakin väriä käytetään useina sävyinä visuaalisen syvyyden simuloimiseksi. Esimerkiksi Gmail-kuvakkeessa näkyy erilaisia punaisia sävyjä, joita käytetään M-muotoon, ja kirjekuoren läpän alla käytetään tummempaa sävyä harmaalle.
Sovellamme yksinkertaisempaa versiota materiaalisuunnittelutyylistä, ja jokaiselle kuvakkeelle käytämme vain kolmea samanväristä sävyä ja pidämme varjot tasaisina ja lyhyinä yleisen 'pitkä varjo' -efektin sijaan.
Jaa kuvake kahtia ja tee yläosasta kohotettu. Voit saavuttaa tämän luomalla varjoefektin molempien muotojen leikkauspisteeseen. Käytä kolmea keltaista sävyä - vaaleain päällä, tummempi pohjassa ja pidä varjoa varten vielä tummempi.
Alkuperäisessä kuvakkeessa meillä on vähän varjoefektiä kahden kuplan välisessä tilassa, ja sinä luot varjon.
Valitse alla olevasta muodosta piste oikeassa kulmassa avaruudessa ja siirrä sitä ylöspäin vasemmalle, kunnes muodostat suoran kulman vasempaan yläkulmaan.
Kopioi ylempi kupla ja siirrä kopiota alas ja oikealle. Valitse kopio ja alla oleva kuplan muoto, luo siivu Pathfinderillä ja pidä vain yksi leikkauspiste edellisen kopion kanssa.
Nyt voit levittää kolme sinistä sävyä ja laittaa vaaleampi päälle, toinen tummempi keskelle ja toinen tummempi alapuolelle.
Luomme taitetun paperitehosteen. Kopioi kuvake ja poista kaksi ylimääräistä kärkeä oikeassa yläkulmassa ja sitten vasen puoli toisella puolella poistaaksesi vielä kaksi kappaletta.
Kopioi taitto vasemmalla ja siirrä se oikealle.
Luo varjoefekti leikkaamalla nämä kaksi muotoa. Levitä sitten kolme värisävyä jättämällä tummimmat varjoon, toiset tummimmat pisimpään kappaleeseen ja vaaleimmat yläosaan. ### 4. Lippukuvake
Aloita pyöristämällä reunat ja poista sitten lipun pohja.
Luo taittovaikutus, piirrä kaksi leikkaavaa viivaa vinosti. Käytä Pathfinder-ohjelmaa, jaa lipun muoto viivoilla ja levitä lippuun kolme vihreää sävyä jättämällä pohja harmaaksi.
Kopioi sydämen kuvake.
Eristä muodon vasen puolisko.
Piirrä diagonaalinen viiva alas oikeasta yläkulmasta.
Peitä tuloksena oleva muoto sydämellä ja siirrä sitä sitten oikealle vähentääksesi muodon varjosta. Levitä kolme vaaleanpunaisen sävyä.
Alkuperäisen kuvakkeen sisällä oleva tyhjä tila osoittaa, mihin voimme asettaa varjon.
Luo kaksi kolmion muotoa kustakin huipusta.
Siirrä kopio pienemmästä oikealle ja pura tuloksena oleva leikkauspiste varjomuodoksi.
Levitä kolme ruskeaa sävyä vaaleammalla vasemmalla, toisella vaaleammalla suurimmalla kolmiolla ja tummimmalla keskellä olevalla varjolla. Levitä pieni säde kulmaan tuloksen tasoittamiseksi.
Valitse vasemmanpuoleisen henkilön alaosa ja kopioi se. Kohdista kopio oikealla olevan henkilön kanssa. Valitse nyt kolme päällekkäistä muotoa ja käytä 'Jaa' -työkalua 'Pathfinder' -paneelista. Ota nyt värit loppuun.
Valitse pohjan muoto ja siirrä sitten yläosan keskikohtaa ylöspäin, kunnes se näyttää timantilta.
Kopioi timantin yläosa ja siirrä kopiota 10 tai 20 kuvapistettä alaspäin.
Valitse kaksi alempaa muotoa ja käytä 'Jaa' -työkalua 'Pathfinder' -paneelista.
Pidä tuloksena olevista leikkaavista muodoista vain kaksi alaosaa ja poista mahdolliset lisäpisteet.
Viimeistele soveltamalla kolmea punaista sävyä ja samalla keskittämällä tummin.
Valitse ”Suora valinta” -työkalulla (A) kirjainmuodon toiseksi korkein kohta.
Lisää piste segmenttiin oikealle 'Kynä' -työkalulla.
Nyt kun sinulla on ylimääräinen piste, voit muotoilla negatiivisen tilan uudelleen, jotta se näyttäisi paperilta nostamalla kahta ylempää pistettä ja siirtämällä niitä oikealle ja vasemmalle kuvan osoittamalla tavalla.
Valitse kaikki ja käytä jakajan muotoa 'Pathfinder' -paneelista. Erota paperin ylempi muoto kirjekuoresta ja kopioi sitten kirjekuoren yläosa paperin päälle leikkaaksesi varjon muoto ennen kolmen sinisen sävyn levittämistä.
Eristä kakun pohjan kaksoiskappale.
Se pienentää sen leveyttä siirtämällä vasenta ja oikeaa reunaa sisäänpäin.
Siirrä tuloksena oleva muoto alkuperäisen kuvakkeen päälle ja pidennä korkeimmat kohdat päällekkäin himmeän muodon kanssa.
Luo jako kaikista päällekkäisistä muodoista 'Pathfinder' -sovelluksella ja poista ylimääräiset pisteet aiemmin luomasi kakun kapean pohjan vierestä.
Täydennä kakkusi levittämällä vaalean oranssia kuoreen ja kynttilään, tummempi sävy pohjassa ja jopa tummempi oranssi liekin muotoon ja reunavarjoon.
Kuvakkeiden luominen Materiaalityylillä voidaan suorittaa yksinkertaisella tavalla. Tarvitset vain hyvän yhdistelmän harkittuja geometrisia muotoja, rikkaita värisävyjä ja varjoefektejä.
Hyvä uutinen on, että sinun ei tarvitse luoda kaikkia kuvakkeita tyhjästä, kuten teimme tässä opetusohjelmassa. Voit aloittaa ilmaisista, olemassa olevista litteistä kuvakkeista ja soveltaa yksinkertaisia oppimiasi tekniikoita.
Haluaisin todella nähdä, mitä luot. Voit vapaasti jakaa kommenttisi ja mukautetut kuvakkeet.