Sisu
- Virtuaalne pakend
- 1. Lõuend
- 2. Tekstuur
- 3. Maskeerimine 1
- 4. Maskeerimine 2
- 5. Pange see särama 1
- 6. Pange see särama 2
- 7. Pange see särama 3
- 8. Lisage detail
- 9. Üksikasjalikum
- 10. Tuum
- 11. Must rõngas
- 12. Korvpall
- 13. Mõjud
- 14. Lisateave
- 15. Sügavus
- 16. Korrastamine
- 17. Valgustus
- 18. Keerake kaaned
- 19. Viimane lihv
See artikkel ilmus esmakordselt ajakirja .net - maailma enimmüüdud ajakirja veebidisaineritele ja arendajatele - 228. numbris.
Alates iPhone'i 2007. aasta turule toomisest on nõudlus mobiilirakenduste kujundamise järele jätkanud oma suunda. Paljud meist, kes olid traditsiooniliselt töötanud veebiprojektide kallal, leidsid end ootamatult sõlmivat disainilepinguid ainult mobiilsete liideste jaoks.
IPhone SDK väljaandmisest on nüüd möödas neli aastat ja kui muud platvormid, nagu Android ja BlackBerry, turuosa nurka viivad, ei tundu, et mobiilsõjad lähiajal lõppeksid. Kuid olenemata platvormist, on kõigil nendel tarkvaratükkidel midagi ühist. Igal rakendusel on ikoon.
Virtuaalne pakend
Pakendikujundusega sarnasel viisil töötades on rakenduse ikoonid sageli esimesed asjad, mida enne ostu sooritamist näeme. Vaid mõne millisekundi jooksul võib selle väikese piksliruudu esteetika muuta allalaadimist või lihtsalt teise rakenduse vaatamiseks minema pühkida.Seetõttu on mõttekas veeta aega, kaaludes rakenduse ikooni loomise parimat viisi. Ükskõik, kas logo töötlemise või millegi abstraktsema kaudu, peab ikoon olema pilkupüüdev - ja ideaalis andma kasutajale hea ülevaate rakenduse tegevusest.
Selles õpetuses loome ilutulestiku abil väljamõeldud korvpallimängu jaoks rakenduse ikooni. Kuna realistlikud tekstuurid võivad ikoone tõeliselt täiustada, näitan teile kiiret ja lihtsat viisi harjatud metallist efekti kopeerimiseks koos mõne lihtsa valgustehnika abil, mis muudab teie ikoonid tõepoolest karjast eristuvaks.
1. Lõuend
Avage fail Canvas.png. Alustamiseks on see juba ette nähtud ja lisasin ka tumeda tekstuuriga tausta. See ei ole ikooni enda lahutamatu osa, nii et selle saab õpetuse lõpus eemaldada, kuid praegu jätame selle oma kohale lukustatuks, et me seda kogemata ei valiks.
2. Tekstuur
Joonista ring läbimõõduga 750px. Määrake värviks #000000 ja keskendage see lõuendile, kasutades Joondage tööriistad. Aastal Atribuudid paneel rakendab a Võrgusilma tekstuur koos 100% läbipaistmatus. Valige rippmenüüs Filtrid Blur> Radial Blur ja määrake atribuutide summa: 45; kvaliteet: 100.
3. Maskeerimine 1
Oleme rakendanud radiaalset hägustust, nii et enne millegi varjamist peame paremklõpsama ringil ja valima Grupp. Joonistage ümardatud ristkülik 512 pikslit välimiste juhikute vahel kõrge ja lai; määrake värviks #FFFFFF. Kollaste teemantide abil tõmmake raadius teisele juhikule.
4. Maskeerimine 2
Maski lõpuleviimiseks valige ring ja ristkülik ning valige Muuda> Mask> Grupi maskina. Nii et rakendus erineb meie lõuendist, rakendage varje koos atribuutide värviga: #000000, kaugus: 0, läbipaistmatus: 100%, pehmus: 22. Nüüd on meil ikooni tekstuuriga alus.
5. Pange see särama 1
Joonistage uus ümardatud ristkülik 512 pikslit kõrge ja lai, keskendage see lõuendile ja andke sellele sama raadius, nagu lõime 3. etapis Atribuudid paneelil klõpsake nuppu Täitke kategooria rippmenüü ja seejärel valige Gradient> Koonus.
6. Pange see särama 2
Valige värv Atribuudid paneelil ja määrake hüpikaknas vasakule ja paremale värviks #FFFFFF. Hõljutage hiirt värviriba keskmise punkti all, kuni näete märki + ja klõpsate üks kord. Määrake koonuse uus värv olema #666666.
7. Pange see särama 3
Lisage koonusele veel kaks värvi, kumbki umbes kaheksas skaala mõlemast otsast, ja määrake mõlemad # B3B3B3. Sära nurga all tõmmake gradientsuun lihtsalt ristküliku paremasse alanurka. Atribuutide paneelil määrake läbipaistmatus väärtuseks 65%.
8. Lisage detail
Ikka Atribuudid Klõpsake paneelil nuppu Filtrid rippmenüü ja vali Varju ja kuma> Sisemine kuma. Määrake värvi atribuudid: #000000, laius: 5, läbipaistmatus: 65%, pehmus: 3. Aastal Kujundid tööriistariba rippmenüüst valige Sõõrik; joonista lõuendile kuju 435 pikslit kõrge ja lai.
9. Üksikasjalikum
Parempoolse kollase teemandiga tehke sõõriku sein umbes 45px lai. Alates Täitke kategooria rippmenüüst valige Gradient> Lineaarne. Klõpsake värvi ja hüpikaknas seatud algusvärviks on #000000 ja lõpu värv kuni #FFFFFF. Vähendage läbipaistmatust 40%.
10. Tuum
Kopeerige just loodud sõõrik, määrake selle laiuseks ja kõrguseks 294 pikslit ja seejärel keskendage see lõuendile. Klõpsake ja tõmmake parempoolne teemant keskpunkti lõpuni, nii et seal pole enam seina (ja enam ka sõõrikut).
11. Must rõngas
Joonistage lõuendi keskele viimane sõõrik laiuse ja kõrgusega 400px. Tehke seina paksus umbes 30px ja anna sellele ühtlane värv #000000. Selle rõnga pimedus raamistab kenasti korvpalli, mille järgmisena loome.
12. Korvpall
Kasutades Kuju tööriista keskel ring 274 pikslit läbimõõduga lõuendil. Andke talle radiaalne gradient, sisemine värv # EC884C ja välimine # B8501B. Valige filtrites Varju ja kuma> Sisemine vari. Seadke kaugus: 7, värv: #000000, läbipaistmatus 100%, pehmus: 30, nurk: 35°.
13. Mõjud
Valige Varju ja kuma> Tilk varju atribuutidega kaugus: 0, värv: #000000, läbipaistmatus 90%, pehmus: 20. Kopeerige äsja loodud ring, eemaldades filtrid. Aastal Värv hüpikakna välimine läbipaistmatus seatud väärtusele 10%; aastal Tekstuur rippmenüü vahvlit ja muutke läbipaistmatus väärtuseks 65%.
14. Lisateave
Kasutades Pliiats tööriist, joonista seeria 6px paksud kumerad mustad jooned õmbluste loomiseks. Veendumaks, et teie jooned näevad siledad välja, tuleb Insuldi kategooria rippmenüüst kontrollige, kas neile on seatud Basic> Pehme joon. Ärge muretsege palli servadest üle minemise pärast; need varsti maskeeritakse.
15. Sügavus
Valige kõik mustad jooned viimasest sammust ja rühmitage need kokku. Kopeerige rühm ja muutke värviks #FFFFFF. Aastal Kihid paneel tõmmake uus rühm valgeid lööke mustade alla ja nihutage need siis lõuendil umbes allapoole 2px.
16. Korrastamine
Õmbluse servade kenaks kärpimiseks alustage kahe takti komplekti rühmitamisest. Joonista ühtlane valge ring 274 pikslit kõrge ja lai ning tsentreerige see otse löökide kohale. Valige nüüd mõlemad üksused ja valige Muuda> Mask> Grupi maskina.
17. Valgustus
Joonista ring 145px läbimõõduga ja asetage see korvpalli paremale ülemisele osale. Andke talle radiaalne gradient, mille sisemine värv on #FFFFFF ja välimine värv #FFFFFF. Määrake välimise värvi läbipaistmatus väärtuseks 0% ja seejärel vähendage kuju üldist läbipaistmatust 70%.
18. Keerake kaaned
Joonistage uus ring, läbimõõt 60px ja positsioneerige see 30px ülemisest juhendist ja 30px vasakult juhendilt. Andke talle radiaalne gradient, mille sisemine värv on #FFFFFF ja välimine #333333. Tehke välimise värvi läbipaistmatus 18%, kuju üldine läbipaistmatus 60%.
19. Viimane lihv
Aastal Atribuudid värvi hüpikaken, liigutage sisevärvi umbes kaheksandiku võrra mööda värviriba. Kruvikate on nüüd valmis, nii et jääb üle vaid kolm korda dubleerida ja asetada need ikooninurkadesse. Valmis: ikoon on skaalamiseks ja eksportimiseks valmis.
Avastage Creative Bloqis 20 parimat Photoshopi pistikprogrammi.
