Kuinka luoda litteitä kuvakkeita Photoshopissa.

Kuinka nopeasti ja helposti luoda oma kuvake Photoshopissa. Tallennamme kuvakkeen Photoshopiin nimellä icon format.ico
Ensin sinun on tuettava .ico-muotoa Photoshopissa.

ICO-muodon tuki

Piti äskettäin piirtää favicon ystävälle Photoshopissa. Töiden aloittamisen jälkeen tajusin sen yhtäkkiä photoshop ei ystäviä ico muoto. Miettimättä kahdesti, muistin yhtäkkiä, että olin jo törmännyt tähän ja pystyin ystävystymään icon kanssa vain liitännällä, josta kerron sinulle.
Saadakseen ystäviä photoshop cs6 ja nuoremmat icon kanssa-muodossa (ystävien saaminen avaa ico-muodon, muokkaa sitä, tallenna se toiseen muotoon tai tallenna se ico-muodossa) tarvitsemme laajennuksen.
Joten ensinnäkin ladataan laajennus, suunnilleen tältä sivustolta ja valitaan minkä bittisyvyyden (en tiedä miten teen Windows bitin syvyys) tarvitset laajennuksen joko 32- tai 64-bittiseen järjestelmään

Kun olet ladannut ZIP-tiedosto pura siitä yksi tiedosto 8bi-tunnisteella.


Laita tämä tiedosto kansioon (32- ja 64-bittisille järjestelmille)
C:/Ohjelmatiedostot/Adobe/ Adobe Photoshop CS6 (64-bittinen)/Pakollinen/Lisäosat/Tiedostomuodot/
C:/Ohjelmatiedostot (x86)/Adobe/Adobe Photoshop CS6/Pakollinen/Plug-Ins/Tiedostomuodot


Tämän jälkeen sulje Photoshop ja käynnistä se uudelleen. Nyt voit tallentaa ico-muodossa ja avata ico-muodossa suoraan suosikkiisi photoshop-editori. Ainoa asia on, että jos haluat säästää ico-muodossa koon tulee olla 16 x 16 pikseliä tai EI OLE ikkunaa, jossa on mahdollisuus tallentaa ico!

Kun Photoshop tukee jo ico-muotoa, voimme aloittaa kuvakkeen luomisen Photoshopissa. Jos osaat piirtää, voit piirtää uuteen asiakirjaan kuvakkeen läpinäkyvällä taustalla. Resoluutio enintään 512 x 512 pikseliä. Joka tapauksessa, emme tallenna kuvaketta 512 x 512 -muodossa, vaan pienemmässä muodossa!


Kuten näemme, kuvassa ei ole taustaa. Se on täydellinen meille kuvakkeen luominen ico-muodossa Photoshopissa. Avaa se Photoshopissa, tee koko 256×256 pikseliä ja tallenna se ico-muodossa


Ikonimme on valmis, ja käytämme sitä menestyksekkäästi!

04.07.2016 27.01.2018

Tässä opetusohjelmassa opit luomaan litteitä litteitä sosiaalisen median kuvakkeita.

Mitä luot:

Tasaisten kuvakkeiden luomiseksi aloitamme taustasta, sitten lisäämme kuvakkeisiin tehosteita antaaksemme niille omaperäisyyttä, ja sitten piirrämme pitkiä varjoja. Toistaaksesi tämän opetusohjelman, tarvitset Photoshop CS3:n tai uudemman.

Resurssit:

  • Fontti 1 - http://fontawesome.io/cheatsheet/
  • Fontti 2 - http://fontawesome.io/

Vaihe 1

Luoda uusi tiedosto (Ctrl + N) koko 500 × 400 pikseliä.

Luoda uusi ryhmä (CTRL+G) ja anna sille nimi "tausta".

Vaihe 2

Täytä tausta väri # e7e9ea käyttämällä Kauhatyökalu.

Vaihe 3

Jos haluat lisätä tehosteita taustaan, lisäämme liukuvärin. Napsauta kuvaketta Säätökerros ja valitse Gradientti (Kaltevuus), käytä seuraavia asetuksia:

Kerrosten sekoitustila Pehmeä valo (Pehmeä Kevyt) | Peittävyys: 25 %

Vaihe 4

Luo uusi ryhmä ja anna sille nimi "symbolit".

Vaihe 5

Ennen kuin aloitamme, meidän on määritettävä valikko Hallitsijat Ja Ristikot (Viivaimet ja ristikot). Siirry valikkoon Näkymäviivaimet (Näytä- Hallitsijat) Ja Näytä-Näytä-ruudukot (NäytäNäytäRistikot) . Tässä ovat asetukset Viivaimet ja ristikot(ne voidaan avata menemällä osoitteeseen Muokkaa-asetukset:

Luoda Ohjelinja, sinun tarvitsee vain napsauttaa ja vetää se viivaimesta. Voit luoda pystysuoran ohjaimen vetämällä pystyviivaimesta ja päinvastoin. Näin jaoin kankaan (jokainen kuvake on yhtä suuri 50 × 50 pikseliä ja kunkin kuvakkeen välinen etäisyys 25 pikseliä):

Vaihe 6

Tässä opetusohjelmassa työskentelemme Awesome-fontin kanssa, ja voit lisätä mukautettuja kuvakkeita verkkosivustollesi. Yleensä tämä tehdään asettamalla CSS-fontti sivustollesi, mutta koska työskentelemme Photoshopin kanssa, meidän on kopioitava jokainen kuvake, jota haluat käyttää huijausarkista. Siirry sivulle, valitse kuvake, jonka haluat piirtää. Käytin kuvakkeita seuraaviin ( sosiaalinen media) sivustot: Twitter; Facebook; Tumblr; Google+;Instagram; YouTube; Nykiä; Dropbox; DeviantArt; Pinterest; Skype; Syötä.

Vaihe 7

Kun olet löytänyt kuvakkeen, jota haluat käyttää, kopioi se ( Valitse se ja napsauta sitten oikealla painikkeella hiiren kopio)

Palaa sitten Photoshopiin ja valitse Tekstityökalu (TekstiTyökalu) työkalupalkissa. Muuta fonttiasetuksia kuvan osoittamalla tavalla:

Liitä nyt juuri kopioimasi kuvake. ( Napsauta hiiren kakkospainikkeella-Liitä)

Vaihe 8

Toista edellinen vaihe, kunnes olet lisännyt kaikki kuvakkeet, joita haluat käyttää.

Vaihe 9

Luo uusi ryhmä ja nimeä se uudelleen "ikoni bg", sijoita ryhmä "symbols"-ryhmän alle.

Vaihe 10

Luoda uusi kerros ja sijoita se edellisessä vaiheessa luotuun ryhmään. Nimesin tason uudelleen nimellä "icon bg".

Vaihe 11

Työkalun käyttäminen Suorakaide pyöristetyillä kulmilla (Suorakulmainenympyrän muototyökalu)(sijaitsee alla olevassa työkalupalkissa Tekstityökalu) Tein kuvakkeiden taustan,

Tässä ovat kaikki käyttämäni värit:
Viserrys: # 6bd1f4;
Facebook: # 5a93 cb;
Tumblr: # 3c6a9c;
Google +:# e44940;
Instagram:# 9bd29d;
Youtube:# f4504c;
Nykiä:# a96db6;
Dropbox:# 81d5ed;
Deviantart:# 6e8e61;
Pinterest:# f25f5f;
Skype:# 67d5f4;
Syöte:# e9951d;

Voit käyttää näitä värejä tai voit käyttää värejä harkintasi mukaan - näin työ saa omaperäisyyttä.

Jos et pidä pyöristetyistä suorakulmioista, voit valita toisen muodon, kuten neliön tai ympyrän. Täydellisen ympyrän tai neliön luomiseksi muista pitää kiinni SHIFT-näppäin niiden luomishetkellä.

Vaihe 12

Jos olet tyytyväinen tulokseen tässä vaiheessa, voit mennä pidemmälle, mutta jos haluat lisätä kuvakkeisiin eloa, jatketaan parannuksia. Aloitetaan tasotyyli Shadow (Drop Shadow). Avaa "symbolit" -ryhmä, valitse yksi kuvakkeista ja napsauta kuvaketta Fx-Shadow (Fx-Drop Shadow)

Vaihe 13

Toista edellinen vaihe jäljellä olevien kuvakkeiden kanssa. Tee työstäsi paljon helpompaa napsauttamalla napsauta tasoa hiiren kakkospainikkeella - Kopioi tyyli seisoo (-Kopioi Tasotyyli) . Valitse sitten loput kuvakekerrokset ja napsauta napsauta hiiren kakkospainikkeella - Liitä tasotyyli.

Vaihe 14

Lisätään nyt sisäinen varjo jokaisen kuvakkeen taustalle. Avaa "icons bg" -ryhmä, valitse taso kuvakkeella, napsauta kuvaketta Fx-Sisävarjo (Fx-InnerVarjo) . Käytä seuraavia vaihtoehtoja:

Vaihe 15

Luo uusi kerros ja anna sille nimi "kiiltotehoste". Vaihda etualan väriksi # ffffff; ja avustuksella Suorakulmainen valintatelttatyökalu luoda useita suorakulmioita, puoli pienempi koko kuvakkeet (n. 50x25 pikseliä). Tee tämä kaikille kuvakkeille.

Muuta sitten sekoitustila pehmeään valoon, vähentää Peittävyys kerros ylöspäin 20% , A täyttää ennen 80% .

Vaihe 16

Poista "Gloss Effect" -kerroksen näkyvyys käytöstä. Luo uusi kerros ja anna sille nimi "Long Shadow". Tämä vaihe on hieman monimutkaisempi verrattuna muihin tehosteisiin. Aseta uusi kerros "Gloss Effect" -kerroksen alle.

Vaihe 17

Ota Monikulmainen lassotyökalu ja aloita suorakaiteen muotoisen varjon luominen koskettamalla kuvakkeen reunaa vain oikeassa alakulmassa, tee sitten vinoviiva, kunnes se saavuttaa kuvakkeen taustan oikean alareunan, tee suora viiva, kunnes se saavuttaa taustan keskustan, ja yhdistä sitten viivat. Kuvassa näet selkeämmin, kuinka pitkä varjo piirretään.

Vaihe 18

Viimeinen askel! Vähentää Peittävyys varjokerrokseen 10% , Ja täytä (Fill) ennen 0% .

Napsauta nyt Fx-kuvaketta ja valitse Peittokuvavärit (VäriPeittokuva). Käytä seuraavia vaihtoehtoja:

Valitse nyt Peittokuvagradientti (KaltevuusPeittokuva) ja käytä näitä asetuksia:

Lopputulokset:


Litteä suunnittelu on suhteellisen uusi suunta verkkorajapintojen kehityksessä. iOS ja jopa Windows sopeutuvat vähitellen tähän tyyliin, ja pian kaikki (elleivät kaikki) verkkosivustot ottavat tämän lähestymistavan.

Eräänä päivänä, kun heräät aamulla ja avaat suosikkisivustosi, hämmästyt siitä ulkomuoto myös litteä muotoilu! Ja kiirehdit heti kierrättämään omasi oma blogi tai verkkosivusto olla trendikäs.

Edellä olevan perusteella kysymys ehdottaa itseään: " Mikset aloittaisi käyttöliittymäsi uudelleensuunnittelua jo tänään?"? Näin voit olla askeleen muiden edellä!

Saatat ajatella, " Mistä minun pitäisi aloittaa?”Tietenkin nettisivujen suunnittelu on helvetinmoista työtä. Tämä artikkeli on omistettu juuri tälle asialle - se on auttava kätesi tässä vaikeassa asiassa.

Hyvä ensimmäinen askel sivustosi skeuomorfisen suunnittelun muokkaamisessa on muuttaa käyttöliittymäelementeissä käytetyt kuvat tasaiseksi suunnittelutyyliksi. Tämä on ehkä yksinkertaisin vaihe, koska se ei vaadi käytännössä mitään koodin uudelleenkäsittelyä.

Tarvitset vain luovuutta ja tietoa grafiikkaohjelmat. Todennäköisesti sivustollasi on melko paljon kuvakkeita, jotka on saatettava tasaiseen muotoon. Tämä voi viedä aikaa. Tärkeimmät on tietysti ensin muokattava uudelleen: ne, jotka näkyvät kaikilla sivuilla. Voit aloittaa logolla tai, mikä vielä parempaa, navigointikuvakkeilla.

Tässä artikkelissa yritän tehdä suunnittelun uudelleensuunnittelusta helpompaa ja puhua siitä, kuinka navigointikuvakkeet luodaan tasaisella tyylillä. Käytän Adobe Photoshop CS6 -grafiikkapakettia (mutta voit helposti käyttää enemmän varhaiset versiot). Valmistaudu - aloitamme kohta.

Tässä lopputuloksemme:

Avaa Photoshop. Luo uusi tiedosto käyttämällä "Photo"-esiasetusta (Photo) ( 10 × 8 tuumaa, 300 DPI, läpinäkyvä tausta, väriskeema RGB).


Valitse työkalu" Suorakulmio kanssa pyöristetyt kulmat " (Pyöreä suorakulmio) ja luo uusi muoto mitoilla 1736 x 1736 pikseliä(px), fileen säde 83 px ja väri #82d8b5 . Voit myös määrittää oman värisi, joka sopii parhaiten sivustosi suunnitteluun.


Käytä sitten kynätyökalua ( Kynä työkalu) ja piirrä jotain alla olevan kuvan kaltaista. Käytä #a30d00 väriä. Tämä on talomme katto, mikä osoittaa kotisivu sivusto.


Luo seuraavaksi suorakaiteen muotoinen muoto alla olevan kuvan mukaisesti vaihtamatta kynätyökalua. Käytä tätä tehdessäsi väriä #ffffff . Piirrä myös pieni neliö käyttämällä suorakulmiotyökalua värillä #3498db.





Lähetä varjo alimpaan kohtaan ja rasteroi tämä kerros. Käyttämällä " taikasauva "(Taikasauvatyökalu), luo tasolle valinta suurella suorakulmiolla pyöristetyt kulmat, jonka sisällä talomme sijaitsee, ja käännä sitten valittu alue (voit käyttää pikanäppäintä CMD/CTRL+Shift+I). Poistamatta valintaa, valitse varjokerros ja paina "poista"-painiketta.



Kuvake on valmis. Tallenna se napsauttamalla " Tiedosto> Tallenna verkkoa ja laitteita varten...» (Tiedosto>Tallenna Webille) (kuuma CTRL-näppäin+ Vaihto + ALT + S ). Tallenna kuvake PNG-24-muodossa läpinäkyvyyden ollessa käytössä.

Haluamme, että kaikki tallennetaan PNG-24-muodossa läpinäkyvyystuella.



Katsotaanpa nyt Viesti-kuvaketta:


Alla näet Tietoja minusta ja Ota yhteyttä -kuvakkeet:

Kaikki kuvakkeet voi ladata täältä.



Toivottavasti lukemisen jälkeen tämä käsikirja, alat suunnitella verkkosivustojasi uudelleen. Kuten jo sanoin, tämä on erittäin työvoimavaltainen prosessi, mutta se on väistämätöntä, joten sinun ei pitäisi vastustaa sitä.

Lisäksi litteä muotoilu ei ole suunniteltu pelkästään miellyttämään silmää, vaan se on hyödyllinen myös käytännön näkökulmasta. Siksi voit tappaa useita lintuja yhdellä kivellä kerralla.

Muista kuitenkin, että IE ei tue näitä molempia muotoja, eivätkä ne toimi siinä.

Monikokoinen Favicon
Tavallisen 16x16 pikseliä mittaavan faviconin lisäksi, joita käytetään suunnittelussa osoitekenttä, sitä on useita, mitat 32x32 pikseliä ja 48x48 pikseliä. Nämä kuvakkeet ovat hyvin yleisiä Windows-ympäristö. Jos esimerkiksi haluat sijoittaa työpöydällesi Web-sivun pikakuvakkeen, Windows yrittää automaattisesti käyttää faviconia pikakuvakkeena. Mutta vakiokoko (16x16 pikseliä) ei riitä korkealaatuiseen näyttöön, koska vakiokoko pikakuvake Windows-ympäristössä on 48x48 pikseliä - tämä tarkoittaa, että pikakuvake venyy haluttuun kokoon ja siitä tulee ruma ja lähes lukukelvoton.

On kuitenkin olemassa tapa korjata tämä puute. Hyödyllinen omaisuus.ico-tiedostot voivat sisältää useita muunnelmia samasta kuvakkeesta eri kokoja ja värisyvyys (kuten .gif-tiedostojen kyky sisältää useita kehyksiä). Siksi, jos sijoitat kuvan favicon.ico-sivustoon useissa eri koossa ja eri värisyvyyksillä, Windows voi valita automaattisesti sopivimmat parametrit käytettäväksi pikakuvakkeessa. Yleisimmät käytettävät tarrakoot ovat 16x16, 24x24, 32x32 ja 48x48 pikseliä.

Monikokoisen kuvakkeen luominen ei ole paljon vaikeampaa kuin tavallisen 16x16 pikselin faviconin luominen. Vaadittu laajennus Löydämme kaiken samalta Telegraphics-sivustolta, sen avulla voit sijoittaa useita kuvakkeita yhteen .ico-tiedostoon. Periaatteessa tämä ei ole edes laajennus, mutta erillinen ohjelma, jota voidaan käyttää sekä Windowsissa (via komentorivi) ja MacOS:ssa (vetämällä ja pudottamalla). Tällä ohjelmalla on myös analogeja, kuten: Sib Icon Studio (www.sibcode.com/icon-studio) ja Any to Icon Convertor (www.aha-soft.com/anytoicon).

Värisyvyyden suhteen olet ehkä huomannut, että joissakin kuvakkeissa on rosoiset reunat, kun taas toiset tasoittavat rosoisia reunoja ja näyttävät todella kauniilta. Tämä on mahdollista 32-bittisen värisyvyyden ansiosta, joka näyttää todellista läpinäkyvyyttä, aivan kuten Photoshop. Voit luoda kuvakkeesta 32-bittisen version sekä 24-bittisen (16 miljoonaa väriä, joka tukee läpinäkyvyyttä kuten .gif-tiedostoissa), 16-bittisen (256 väriä) ja jopa 8-, 4-, tai 2-bittinen versio ja laita ne kaikki yhteen ico-tiedostoon.

Siksi, jos haluat olla varma, että faviconisi näyttää kauniilta kaikin puolin mahdollisia tapauksia- On parempi tehdä se useissa versioissa kerralla. Esimerkiksi:

16x16, 16-bittinen (256) väriä
16×16, 32-bittiset värit
32x32, 16-bittinen (256) väriä
32×32, 32-bittiset värit
48x48, 16-bittinen (256) väriä
48×48, 32-bittiset värit

Älä kuitenkaan innostu ja luo monia vaihtoehtoja, koska jokaisella lisäyksellä favicon.ico kasvaa, mikä voi vaikuttaa negatiivisesti sen latautumiseen.

Mahdollisten ongelmien ratkaiseminen
Yleisiä ongelmia
Jos "favicon" ei vieläkään näy yllä olevien vaiheiden jälkeen, yritä päivittää sivusi useita kertoja (noin 5) tai tyhjentää selaimen välimuisti tai laittaa "??" - tämä toiminto saa selaimen ajattelemaan, että sivu on uusi eikä sitä lisätty välimuistiin.

Toinen tapa ratkaista tämä ongelma on seurata suoraa linkkiä "faviconiin" (esimerkiksi: http://site/favicon.ico), jonka jälkeen selain (IE) näyttää ja muistaa kuvakkeen välittömästi.

Selaimen yhteensopivuusongelmia
Microsoft IE 6 (ja 7, 8 ja 9) ei ehkä näytä faviconia ennen kuin sivusi linkki on lisätty suosikkeihin. Siinä tapauksessa yritä seuraava vaihtoehto- pitää alhaalla vasen näppäin hiiri näytetyn "faviconin" päällä (yleensä tavallinen kuvake IE), sitten "ravistele" sitä ja vapauta se. Nämä toiminnot lataavat sivun uudelleen ja päivittävät kuvakkeen. Toinen tapa ratkaista tämä ongelma on lisätä seuraava koodi niiden sivujen ""-osioon, joilla haluat "faviconin" näkyvän:

< link rel= "shortcut icon" href= "favicon.ico" > < link rel= "icon" type= "image/ico" href= "favicon.ico" >

Safari for Mac ei näytä päivitettyä faviconia ennen kuin selaimen välimuisti on tyhjennetty. Tyhjennä välimuisti -valikkopainikkeen napsauttaminen ei kuitenkaan ratkaise ongelmaa, koska "Safari" tallentaa kuvakkeet erillinen kansio. Voit tyhjentää kuvakkeiden välimuistikansion siirtymällä "Muokkaa > Palauta Safari" -valikkoon ja valitsemalla "Poista kaikki verkkosivustojen kuvakkeet" -kohdan vieressä oleva valintaruutu. Vaihtoehtoinen (manuaalinen) tapa on poistaa sisältö seuraava kansio: "Käyttäjä>Kirjasto>Safari>Kuvakkeet". Safarin Windows-versiossa polku on hieman erilainen: "C:\Documents and Settings\Käyttäjänimi\Local Settings\Application Data\Apple Computer\Safari", tästä kansiosta sinun on poistettava tiedosto "WebpageIcons.db". . Haluan muistuttaa, että "Paikalliset asetukset" -kansio ja sen alikansiot ovat oletuksena piilossa, mikä tarkoittaa, että sinun on määritettävä näyttö, jotta pääset niihin. piilotetut tiedostot Ja Windowsin kansiot. Kun olet poistanut yllä olevat tiedostot, sinun on käynnistettävä "Safari" uudelleen (joissain tapauksissa sinun on myös käynnistettävä tietokone uudelleen).

Voit ratkaista samanlaisen ongelman kohdassa " Mozilla Firefox" sinun täytyy tyhjentää selaimen välimuisti ja käynnistää ohjelma uudelleen.

Opera-selaimessa tällaista ongelmaa ei ole, joten kuvakkeen päivityksen jälkeen se riittää yksinkertainen päivitys sivuja (mahdollisesti useita kertoja).

Toinen Windowsin ongelma on Internet-sivujen kuvakkeiden päivittäminen (esimerkiksi kun sivukuvake asetetaan työpöydälle). varten pakotettu päivitys muuttuneet kuvakkeet, sinun on suoritettava seuraavat vaiheet:
1. Napsauta työpöytää hiiren kakkospainikkeella;
2. Valitse valikkokohta "Ominaisuudet" ("Windows XP") tai "Personalize" (" Windows Vista" tai "Windows 7") ja siirry "Näytön ominaisuudet" -välilehteen;
3. Muuta värintoiston laatu 32-bittisestä 16-bittiseksi ja napsauta "OK"- tai "Käytä"-painiketta;
4. Muuta värin laatu takaisin 32-bittiseksi ja napsauta "OK" tai "Käytä".

Ongelmia "Photoshop"-laajennuksen kanssa kuvakkeiden kanssa työskentelyssä
Windows Icon (ICO) -muoto ei ole käytettävissä, jos:
1. Asensit laajennuksen väärin;
2. Olet määrittänyt väärin käyttöjärjestelmällesi sopivan laajennuksen version;
3. Photoshopin työtilaa ei luotu 1-, 4-, 8-bittisissä indeksoiduissa tai 24-bittisissä RGB-tiloissa.

Lisäksi sinun on käynnistettävä itse Photoshop uudelleen laajennuksen asentamisen jälkeen, jotta muutokset tulevat voimaan.

Tällä oppitunnilla opimme piirtämään kaunis ikoni TV Adobe Photoshopissa.

Vaihe 1.

Luoda uusi asiakirja (Tiedosto > Uusi) näkyvillä asetuksilla


Vaihe 2

Täytä tausta #FFFFFF väri ja käytä sitten seuraavaa sitä Tasoefektit.

Vaihe 3.

Käytä säteen kanssa 35px BODY, auki Tasotyylit ja käytä seuraavia asetuksia.

Lisää myös Aivohalvaus kerroksen kanssa BODY kanssa seuraavilla asetuksilla

Vaihe 4.


Vaihe 5.

Käyttää Pyöristetty suorakulmiotyökalu (U) säteen kanssa 35px ja luo minkä tahansa värinen suorakulmio. Nimeä tämä kerros BODY_2 ja käytä sen jälkeen seuraavat tehosteet tälle tasolle.

Lisää myös Aivohalvaus kerrostaa BODY_2 seuraavilla asetuksilla.

Lisää sen jälkeen Sisäinen varjo kerrostaa BODY_2 seuraavilla asetuksilla.


Vaihe 6.

Sinun pitäisi saada samanlainen tulos.


Vaihe 7

BODY. Nimeä tämä kerros BASE. Käyttää Pyöristetty suorakulmiotyökalu (U) säteen kanssa 35px

Tee tämä valitsemalla taso BODY napsauta hiiren oikeaa painiketta ja valitse Kopioi kerroksen tyyli ja valitse sitten Base-taso, napsauta hiiren oikeaa painiketta ja valitse Liitä kerrostyyli.

Tämän jälkeen sinun on korjattava paksuus Aivohalvaus päällä 3px kerroksessa BASE.



Vaihe 8

Sinun pitäisi saada samanlainen tulos.


Vaihe 9

Luo uusi kerros ja aseta se kerroksen alle BODY. Nimeä tämä kerros JALKA. Käyttää Pyöristetty suorakulmiotyökalu (U) säteen kanssa 35px ja käytä sitten siihen seuraavia tasotehosteita.

Hae myös Sisäinen varjo kerrostaa JALKA.


Vaihe 10

Sinun pitäisi saada samanlainen tulos.


Vaihe 11

Kopioi nyt kerros JALKA ja aseta se kuvan osoittamalla tavalla.


Vaihe 12

Luo uusi taso, anna sille nimi KIILTÄVÄ ja aseta se kaikkien kerrosten päälle ja valitse sitten Harjatyökalu (B) ja maalaa yksi valkoinen piste isolla siveltimellä, jossa on pehmeät reunat.

Muuta sitten Sekoitustila päällä Päällekkäisyys vähennyksen kanssa Läpinäkyvyys päällä 50%



Vaihe 13

Luo uusi taso ja anna sille nimi NÄYTTÖ ja aseta se kaikkien kerrosten päälle.

Käyttää Pyöristetty suorakulmiotyökalu (U) säteen kanssa 35px suorakulmion luomiseksi. Sitten kopioi Tasotyyli BODY_2 ja levitä se kerrokseen NÄYTTÖ. Säädä nyt iskun paksuus 10px kerroksessa NÄYTTÖ.


Vaihe 14

Sinun pitäisi saada samanlainen tulos.


Vaihe 15

Tässä vaiheessa teemme itse näytön. Luo uusi kerros NÄYTTÖ_2. Aseta se muiden kerrosten päälle. Käyttää Pyöristetty suorakulmiotyökalu (U) säteen kanssa 35px suorakulmion luomiseksi. Hae sitten Kaltevuus V Tasotyylit seuraavilla asetuksilla.

Hae sitten Sisäinen varjo kerrostaa NÄYTTÖ_2.

Hae sitten Sisäinen hehku kerrostaa NÄYTTÖ_2.

Sitten Varjo kerrostaa NÄYTTÖ_2.




Vaihe 16

Sinun pitäisi saada samanlainen tulos.


Vaihe 17

Luo uusi taso ja anna sille nimi NÄYTTÖ KIILTÄVÄ ja aseta se muiden päälle. Valitse sitten Kynätyökalu (P) ja piirrä ääriviiva kuvan osoittamalla tavalla. Ja täytä se valkoisella #FFFFFF. Sitten vähennämme läpinäkyvyys ennen 20%



Vaihe 18

Luo uusi kerros ja kutsu se VALO PISTE ja aseta se kerrokseksi muiden päälle. Tämän jälkeen valitsemme Harjatyökalu (B) Ja suurikokoinen siveltimet, joissa on pehmeät reunat, aseta yksi suuri valkoinen täplä näytön keskelle.


Vaihe 19

Tässä vaiheessa teet painikkeita. Ota Ellipsityökalu (U) ja luo ympyrä ja aseta se suunnilleen kuten kuvassa, nimeä tämä kerros PAINIKE.

Palaa nyt kerrokseen BODY_2 ja kopioi se Tasotyyli napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Kopioi kerroksen tyyli. Käytä sen jälkeen kopioitua tyyliä tasoon PAINIKE.



Vaihe 20.

Tämän jälkeen haemme Tasotyyli kuten kuvassa näkyy, meidän kopioomme ympyrästä.

Sitten lisäämme Varjo.



Vaihe 21

Sinun pitäisi saada samanlainen tulos.


Vaihe 22

Toistamme alkuvaiheet ja täytämme Tasotyylit suorakulmioon, mutta muuta asetuksia hieman Varjot.



Vaihe 23

Sinun pitäisi saada samanlainen tulos.


Vaihe 24

Kopioimme kerroksen PAINIKE aseta se ensimmäisen painikkeen alle ja kierrä sitä sitten hieman. Muokkaamme myös Tasotyyli Kaltevuus toinen painike.



Vaihe 25

Nyt painikkeemme ovat valmiit.

Tuloksen pitäisi olla kuvan mukainen.


Vaihe 26

Tehdään kaiutin. Meidän on luotava suorakulmio pyöristetyillä kulmilla painikkeiden alle, kuten kuvassa. Kutsutaan tätä kerrosta KAIUTTIMET.


Vaihe 27

Nyt avataan Tasotyyli ja käytä seuraavia asetuksia.

Sovellettava Sisäinen varjo kerrostaa KAIUTTIMET.

Lisätään Aivohalvaus kerrostaa KAIUTTIMET.