Share
In deze quicktip-zelfstudie maken we een leuk, klein, stijlvol iPhone-pictogram voor de make-believe toepassing "Bankapp" die deel uitmaakte van een recent gepubliceerde handleiding over het gebruikersinterfaceontwerp hier op Mobiletuts+.
We gaan ons pictogram ontwerpen voor het Retina-display van de iPhone 4, waarvoor we het pictogram moeten ontwerpen met een veel hogere resolutie van 114x114 pixels met 320dpi (dots per inch). Hierdoor zal het pictogram glashelder verschijnen op het netvlies-display. Dit pictogram is meestal het pictogram dat op het startscherm van een iPhone wordt weergegeven. Er zijn echter andere pictogrammen waar je aan moet denken (hoewel we ze niet zullen behandelen in deze snelle tip), zoals het pictogram dat je in iTunes ziet (wat veel groter kan zijn als het in de coverweergave wordt bekeken) en kleinere pictogrammen zoals die op je iPhone wanneer je zoekt.
Open Photoshop en ga naar Start> Nieuw en maak uw bestand aan. Je kunt mijn instellingen hieronder bekijken.
We willen natuurlijk hetzelfde kleurenschema behouden als datgene dat werd gebruikt in de originele UI-zelfstudie, dus groene kleuren variërend van # 7DA000 tot # 9CCB01. Open het venster Overvloeimogelijkheden voor uw reeds bestaande achtergrondlaag in Photoshop door met de rechtermuisknop op de laag te klikken en Overvloeimogelijkheden te selecteren. Pas een verloop toe op je laag met de HEX-codes die ik zojuist heb genoemd.
Maak een nieuwe laag en vul deze met puur wit. Ga naar Filter> Ruis> Ruis toevoegen en voeg ongeveer 25% ruis toe. Wijzig de overvloeimodus van lagen naar Vermenigvuldigen en verlaag de dekking van de laag tot ergens rond de 20% -markering.
Maak een nieuwe laag en noem deze "Hoogtepunten". Selecteer een zachte penseelgrootte van ongeveer 65 px en teken een klein gebied met witte lijnen op uw pictogram.
Ga naar Filter> Blur> Gaussian Blur en vervaag je witte vorm met ongeveer 25%.
Wijzig de overvloeimodus van lagen in Zacht licht en verminder de dekking tot ongeveer 20%.
Herhaal hetzelfde proces maar met een zwarte penseel aan de onderkant van uw pictogram.
Voor ons pictogram om onze "Bankapp" -toepassing te vertegenwoordigen, gebruiken we gewoon de letters "Ba", die staan voor "bank" en "app". Selecteer het tekstgereedschap en maak een selectie op uw pictogram. Typ "Ba". Ik heb een mooi lettertype gebruikt met de naam Blue Highway.
Klik met de rechtermuisknop op uw tekstlaag en selecteer Mengopties. Pas een slagschaduw toe op uw tekst met behulp van de instellingen in de volgende schermafbeelding. Dit zorgt voor een scherpe maar subtiele schaduw.
Selecteer het gereedschap Afgeronde rechthoek. Stel de straal van de hoeken in op 20px en sleep de vorm terwijl je de Shift-toets vasthoudt. Lijn het uit naar het midden van je canvas en plaats het onder je tekstlaag.
Klik met de rechtermuisknop op de laag en selecteer Laag raster maken. Klik nogmaals met de rechtermuisknop en selecteer vervolgens Overvloeimogelijkheden. Een verloopoverlay toepassen van # 475E00 tot # 688500.
Breng een innerlijke schaduw aan (om het te laten lijken alsof de vorm is gegraveerd) en een slagschaduw (om de onderkant van onze vorm een mooie enkele witte pixellijn te geven) met behulp van de instellingen die te zien zijn in onderstaande screenshots.
Dupliceer de laag. Klik met de rechtermuisknop en selecteer Laagstijlen wissen. Vul de laag met wit en ga vervolgens naar Filter> Ruis> Ruis toevoegen. Voeg ongeveer 25% toe.
Wijzig de overvloeimodus van lagen naar Vermenigvuldigen en verminder de dekking tot ongeveer 25%.
Verlaag de dekking van tekstlagen tot ongeveer 90%. Dit maakt geen groot verschil, maar laat gewoon dat kleine beetje subtiele ruis doorschijnen.
Selecteer het Elleptical Marquee Tool. Sleep een selectie en vul deze met wit op een nieuwe laag.
Ga naar Filter> Blur> Gaussian Blur en vervaag je witte vorm. Wijzig de overvloeimodus in Overlay. Daarmee zijn we klaar! U vraagt zich misschien af waarom ons pictogram geen ronde hoeken heeft - dat komt omdat de iPhone dit voor ons doet. Dit is ons eindresultaat:
Accentsconagua