Ikoonid on meie kujunduse lahutamatu osa. Need on visuaalsed näpunäited mitmesuguste toimingute tähistamiseks ja võivad anda tootele ainulaadse identiteedi. Kuid liiga sageli otsustame tähistada nende olulisust, laadides alla samad ikoonikomplektid ja muutes iga veebisaidi iga ikooni enam-vähem ühesuguseks. Milline viis sellise tähtsusega asja käsitlemiseks.
Selle probleemi lahendamiseks olen loonud juhendi, mis aitab disaineritel lisada oma ikoonidele visuaalse sügavuse ja muuta need ainulaadseks tootel, mida nad esindavad. See õpetus on suures osas inspireeritud mõjukast Google Materiali kujundusest.
Google'i materjalide kujundamise põhimõtted
As Google 'materjal on metafoor'. See laenab visuaalseid näpunäiteid füüsilisest maailmast ja loob uue visuaalse keele nende kõigi liideste standardiseerimiseks. Materjali kujundamise põhimõtted on ligipääsetav ning seda saab kiiresti rakendada liideste atraktiivsuse ja kasutajakogemuse parandamiseks.
1. Kasutage lihtsaid geomeetrilisi kujundeid ja rasvaseid värve
Lameda kujunduse trend inspireeris materjalidisaini, mis põhineb ka lamedatel põhikujudel. Valige hoolikalt, milline kuju kujutab kõige paremini ikooni kujutatavat elementi.
2. Lisage peene varjundiga sügavus
Vari on hea viis silma petmiseks ja kujunduse sügavuse tundmiseks, sest see stimuleerib objektile heidetud valguse mõju.
Pange tähele, et looduslikku valgust simuleeritakse sageli ülevalt vasakust nurgast.
3. Drop Shadowsi asendamiseks kasutage värvilisi varje
Kõiki värve kasutatakse visuaalse sügavuse simuleerimiseks mitmes toonis. Näiteks Gmaili ikoonil näete, et M kuju jaoks kasutatakse erinevaid punaseid toone ja ümbriku kaane all tumedamat halli tooni.
Kuidas saate seda liiga teha: samm-sammult demod
Rakendame materjali kujunduse stiili lihtsustatud versiooni ja iga ikooni jaoks kasutame tavalise „pika varju” efekti asemel ainult kolme sama värvi tooni ja hoiame varjud tasased ja lühikesed.
on c lihtne õppida
Ressursid
- Kontrollige Google'i täielikku tasuta ikoonikomplekti siin .
Alustame.
1. Poldi ikoon
Murra algne ikoon kaheks ja pane ülemine osa üles tõstetuks. Selle saate saavutada, luues varjuefekti kahe kuju ristumiskohas. Kasutage kolme kollast tooni - pealt heledamat, alt tumedamat ja hoidke varju jaoks kõige tumedamat tooni.
2. Vestluse ikoon
Algsel ikoonil on kahe mulli vahelises pilus varjundi vihje, sinna saate varju luua.
Alumisel kujundil valige pilust õige nurga moodustav punkt ja liigutage seda ülespoole vasakule, kuni moodustate vasakus ülanurgas täisnurga.
Kopeerige ülemine mull ja liigutage koopiat alla ja paremale. Valige koopia ja alumine mullikuju, jaotise loomiseks kasutage „Rajaleidjat” ja hoidke ainult ristmikku oma eelmise eksemplariga.
Nüüd saate rakendada kolme sinist tooni ja anda kõige pealt kõige heledam, keskelt tumedam ja teine tumedam alt.
3. Märkige ikoon
Loome volditud paberi efekti.
Kopeerige ikooni ja eemaldage kaks ülemist parempoolset, seejärel vasakpoolset serva, et saada kaks tükki.
Kopeerige vasak voldik ja liigutage seda parempoolse kohale.
Varjuefekti loomiseks ristuvad need kaks kuju. Seejärel kandke kolm värvitooni, hoides varju jaoks kõige tumedamat, pika tüki jaoks teist tumedamat ja ülaosas heledamat tooni.
4. Lipu ikoon
Alustage servade ümardamisest, seejärel tõmmake lipu alus välja.
Kokkupandava efekti loomiseks jälgige kahte diagonaalselt ristuvat joont. Jagage „Rajaleidja” abil lipu kuju joontega ja kandke lipule kolm rohelist tooni, hoides põhi hallina.
5. Südaikoon
Kopeerige südameikoon.
Isoleerige kuju vasak pool.
Jälgige diagonaaljoont allapoole, tulles paremast ülemisest punktist.
Saadud kuju kattub südamega, seejärel liigutage seda varju kuju lahutamiseks paremale. Kandke oma kolme roosa tooni.
6. Mägede ikoon
Tühi pilk algse ikooni sees näitab kohta, kuhu saame varju asetada.
Looge igast valikust kaks kolmnurga kuju.
Liigutage väiksema koopia paremale ja eraldage saadud ristmik varju kujul.
Kandke kolm pruuni tooni, hoides heledamat vasakul, teist heledat suurel kolmnurgal ja tumedamat varju keskel. Tulemuse pehmendamiseks rakendage mõnda nurga raadiust.
7. Inimeste ikoon
Valige ja kopeerige vasakul oleva inimese alumine osa. Joondage see koopia isikuga paremale. Nüüd valige kolm kattuvat kuju ja rakendage paneelil „Pathfinder” tööriist „Jaga”. Nüüd rakendage värvid lõpetamiseks.
8. Ujuva ruudu ikoon
Valige alumine kuju ja liigutage selle keskmist ülemist punkti ülespoole, kuni see näeb välja nagu teemant.
node js muudab asünkroonse kõne sünkroonseks
Kopeerige ülemine teemandi kuju ja liigutage koopiat 10 või 20 pikslit allapoole.
Valige kaks alumist kuju ja rakendage paneelil „Pathfinder” tööriist „Jaga”.
Saadud ristuvate kujundite hulgast hoidke ainult kaks alumist tükki ja kustutage kõik lisapunktid.
Pange see kokku, rakendades kolme punast tooni, määrates keskel tumedama.
9. Kirja ikoon
Valige otsevaliku tööriista (A) abil ümbriku kuju teine kõrgem punkt.
Lisage „Pliiatsi tööriista” abil paremal oleval lõigul punkt.
Nüüd, kui teil on lisapunkt, saate selle negatiivse ruumi paberile sarnanemiseks ümber kujundada, tõstes kahte ülemist punkti ja liigutades neid paremale ja vasakule nagu näidatud.
Valige kõik ja rakendage paneelil „Rajaleidja” jaotust. Enne kolme sinise tooni kasutamist eraldage paberi pealmine kuju ümbrikust, seejärel kopeerige ümbriku osa paberi peal, et varju kuju välja lõigata.
10. Tordiikoon
Isoleerige koogi alumise osa dubleeritud versioon.
Kitsendage selle laiust, liigutades vasakut ja paremat serva sissepoole.
Liigutage saadud kuju algse ikooni kohale ja laiendage kõrgemaid punkte jäätuva kuju kattumiseks.
Looge jaotisega „Rajaleidja” kogu kattuv kuju ja eemaldage varem loodud kitsa koogipõhja kõrval lisapunktid.
Täiendage oma kooki, kandes glasuurile ja küünlale heleoranži, alusele tumedama tooni ning leegi kuju ja varjuserva jaoks veelgi tumedama oranži.
Parandage oma ikoonikomplekti välimust ja tunnet
Materjali stiiliga ikoonide loomine on lihtne. Teil on vaja ainult head kombinatsiooni läbimõeldud geomeetrilistest kujunditest, paksudest värvitoonidest ja varjuefektist.
Hea uudis on see, et teil pole vaja isegi kõiki ikoone nullist luua, nagu me selles õpetuses tegime. Võite alustada olemasolevatest tasuta lamedatest ikoonidest ja rakendada just õpitud lihtsaid tehnikaid.
Andke meile teada, mida arvate! Palun jätke oma mõtted, kommentaarid ja tagasiside allpool.
• • •
