Share
I denne raske tipsveiledningen skal vi skape et fint, lite, stilig iPhone-ikon for smarteapplikasjonen "Bankapp" som var en del av en nylig publisert brukergrensesnittutforming her på Mobiletuts+.
Vi vil designe vårt ikon klar for iPhone 4s Retina-skjerm, noe som krever at vi skal utforme ikonet med en mye høyere oppløsning på 114x114 piksler med 320dpi (punkter per tomme). Dette gjør at ikonet vises krystallklart på netthinnen. Dette ikonet er vanligvis det som vil bli sett på en iPhones startskjerm. Det er imidlertid andre ikoner du trenger å tenke på (selv om vi ikke vil dekke dem i dette raske tipset), for eksempel ikonet du ser i iTunes (som kan være mye større hvis det vises i dekselvisningen) og mindre ikoner slik som de på iPhone når du søker.
Åpne Photoshop og gå til Start> Ny og opprett filen. Du kan se oppsettet mitt under.
Vi vil åpenbart ha samme fargevalg som det som ble brukt i den opprinnelige brukergrensesnittveiledningen, så grønne farger spenner fra # 7DA000 til # 9CCB01. Åpne vinduet Blandingsalternativer for ditt eksisterende bakgrunnslag i Photoshop ved å høyreklikke på laget og velge Blandingsalternativer. Bruk en gradient til laget ditt ved hjelp av de HEX-kodene jeg nettopp nevnte.
Lag et nytt lag og fyll det med rent hvitt. Gå til Filter> Støy> Legg til støy og legg til rundt 25% støy. Endre lagblandingsmodusen til Multiply og senk lagets opasitet til et sted rundt 20% -merket.
Lag et nytt lag og kaller det "Høydepunkter". Velg en myk børste på rundt 65 px i størrelse, og trekk et lite område med hvite linjer på ikonet ditt.
Gå til Filter> Uklarhet> Gaussisk uskarphet og uskarphet din hvite form med rundt 25%.
Endre lagsmeltemodus til Soft Light og senk opaciteten til rundt 20%.
Gjenta den samme prosessen, men med en svart børste på undersiden av ikonet ditt.
For vårt ikon for å representere vår "Bankapp" -applikasjon, skal vi bare bruke bokstavene "Ba", står for "bank" og "app". Velg tekstverktøyet og velg et utvalg på ikonet ditt. Skriv inn "Ba". Jeg brukte en fin skrifttype kalt Blue Highway.
Høyreklikk på tekstlaget og velg Blandingsalternativer. Bruk en Drop Shadow til teksten din ved å bruke innstillingene som finnes i følgende skjermbilde. Dette vil gjelde en skarp, men subtil skygge.
Velg det avrundede rektangelverktøyet. Sett radius av hjørnene til 20px, og hold deretter Shift-Key-knappen, dra ut figuren din. Juster den til midten av lerretet ditt og legg det under ditt typelag.
Høyreklikk på laget og velg Rasterize Layer. Høyreklikk en gang til, og velg deretter Blandingsalternativer. Påfør en gradientoverlegg som går fra # 475E00 til # 688500.
Bruk en indre skygge (for å få det til å se ut som formen er gravert) og en dropskygge (for å gi bunnen av formen en fin enkel piksel hvit linje) ved hjelp av innstillingene som vises i skjermbildene nedenfor.
Dupliser laget. Høyreklikk og velg Ryd lagformat. Fyll laget med hvitt, og gå deretter til Filter> Støy> Legg til støy. Legg til rundt 25%.
Endre lagsmeltingstilstanden til Multiply og senk opaciteten til rundt 25%.
Senk lagring av tekstlagene til ca 90%. Dette gjør ikke stor forskjell, men bare lar den lille subtile støy skinne gjennom.
Velg Elleptical Marquee Tool. Dra ut et utvalg og fyll det med hvitt på et nytt lag.
Gå til Filter> Uklarhet> Gaussisk uskarphet og uskarphet din hvite form. Endre blandingsmodus til Overlegg. Med det er vi alle ferdige! Du lurer kanskje på hvorfor vårt ikon ikke har runde hjørner - det er fordi iPhone gjør det for oss. Her er vårt endelige resultat:
Accentsconagua