10 eenvoudige tips om uw eigen coole pictogrammen te maken met Photoshop

Er zijn een groot aantal gratis icon-sets online, maar als je verder wilt gaan dan puur specifiek gebruik, zijn er ook een aantal problemen verbonden aan hen. Licenties en het gebrek aan branding zijn er slechts twee.

Zelfs als u geen softwareontwikkelaar bent, is het leren van het maken van uw eigen pictogrammen een enorm nuttige vaardigheid. U kunt uw computer een unieke huid geven of uw diensten aanbieden aan de gemeenschap en de bedrijfswereld.

Dit is geen complete handleiding voor het ontwerpen van pictogrammen. We laten u net beginnen met de elementaire basishandelingen: technische details, een ontwerpcontrolelijst en een toolset voor pictogramontwerp.

Icon Technische aspecten

Hieronder vindt u enkele specificaties die u moet kennen met betrekking tot het pictogramformaat, met name beeldresoluties en bestandsindelingen.

Grootte

Het belang van de grootte wordt hieronder verder besproken. Voorlopig houden we ons aan de technische aspecten.

Pictogrammen zijn altijd vierkant. Dit betekent dat een rechthoekig pictogram ofwel uitgerekt of verkleind wordt om het hele canvas te vullen of erin te passen. Hoe dan ook, zeer rechthoekige pictogrammen vallen op een slechte manier op. De volgende pictogramformaten zijn de meest voorkomende in gebruik:

• • • 16 x 16 px * **
    • 24 x 24 px
    • 32 x 32 px * **
    • 48 x 48 px * **
    • 64 x 64 px
    • 96 x 96 px
    • 128 x 128 px **
    • 256 x 256 px **
    • 512 x 512 px **

Windows XP adviseert het gebruik van 16 x 16, 32 x 32 of 48 x 48 resoluties *. Als er geen beschikbaar zijn, wordt het formaat van het pictogram met de grootste resolutie gewijzigd, tot 256 x 256. Met steeds hogere bureaubladresoluties wordt aangeraden altijd grotere resoluties op te nemen. Het Apple ICNS-formaat ondersteunt de formaten 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 en zelfs 512 x 512 **.

Bestandsformaat

Voor Windows is ICO het meest gebruikte bestandsformaat voor de distributie van pictogrammen. De Mac-tegenhanger is ICNS (Apple Icon Image Format).

De Icon Design Checklist

Er is niet één zelfstudie om het perfecte pictogram te ontwerpen, keer op keer. Verschillende thema's en ontwerpen vereisen verschillende benaderingen en de 'huidige trend' bevindt zich in een constante stroom. Hieronder staan ​​drie belangrijke pijlers van icon creation die keer op keer waar zijn gebleken. Als u nieuw bent bij het ontwerpen van pictogrammen, moet u altijd de pictogramchecklist in gedachten houden.

Onmiskenbaar

Boven alles moeten pictogrammen onmiskenbaar zijn. De relatie tot uw toepassing moet voor iedereen duidelijk zijn, in de tijd, cultuur en leeftijdsverschillen. Bestrijd de verleiding om flitsende pictogrammen te maken die geen relevantie hebben, en vasthouden aan een eenvoudig, degelijk en duidelijk ontwerp.

Zie dit niet als een obstakel voor je creativiteit; pictogrammen kunnen mooi en tot nadenken stemmend zijn, maar mogen niet openstaan ​​voor interpretatie (lees: raden aan het eind van de gebruiker).

Uniformiteit

Als u een pictogramset ontwerpt, moet u het ontwerp uniform houden.

Zorg ervoor dat u een gemeenschappelijke thread heeft die deze pictogrammen met elkaar verbindt en de synergie toont met de gebruikers; het geheel moet groter zijn dan de som van de delen.

Grootte

Pictogrammen worden altijd in meerdere formaten gemaakt. Dit beïnvloedt het ontwerp op meer dan één manier.

Om te beginnen moeten pictogrammen er ongeacht de grootte goed uitzien en herkenbaar zijn. Neem het contrast langs de zijkanten weg om gekartelde randen te voorkomen en belangrijke details op te laten vallen zodat de focus behouden blijft bij de kleinste implementatie van het pictogram.

Op technisch niveau worden pictogrammen het best ontworpen met vectoren, afbeeldingen die zijn samengesteld uit eindeloos schaalbare vormen, in plaats van een vaste compositie van pixels. Niettemin, als uw resolutie hoog genoeg is, zullen bitmaps net zo goed werken.

De Icon Design Toolset

Photoshop is een geweldige applicatie om pictogrammen te ontwerpen. U hebt (bijna) alle tools die u nodig hebt om vectorafbeeldingen te maken of bitmaps te bewerken en complexe effecten en arcering toe te passen. Het belangrijkst zullen volgende hulpmiddelen zijn:

Pen gereedschap

Met het gereedschap Pen kunt u schaalbare vectorafbeeldingen maken. U kunt een vorm tekenen door knooppunten te maken en te slepen om de curve van de lijn aan te passen. Het is moeilijker om te gebruiken dan het lijkt, maar waarschijnlijk het beste hulpmiddel bij uitstek. We schreven over de pen tool in het verleden, lees Photoshop Pathing: Hoe Photoshop Pen Tool gebruiken Hoe Photoshop Pen Tool gebruiken Hoe Photoshop Pen Tool gebruiken Meer lezen .

ICO-bestandsindeling plug-in

Deze Photoshop-invoegtoepassing voegt het ICO-bestandsformaat toe aan uw exportinstellingen. De installatiemethode is afhankelijk van uw OS- en Photoshop-versie, dus controleer de website.

Apple Icon Composer

Helaas bestaat zo'n tool niet voor het ICNS-bestandsformaat van Apple. Deze gratis tool zorgt in plaats daarvan voor het probleem. Het wordt geleverd met het Apple Xcode-pakket, dat u kunt downloaden na een (vervelend) aanmeldingsproces. Of u kunt Google gebruiken voor de download.

Hongkiat: 40+ Hand-Picked Icon Design Photoshop-handleidingen

Ontwerpblog Hongkiat.com heeft een lijst samengesteld met meer dan 40 verschillende handleidingen in Photoshop-ontwerp. Deze lijst omvat allerlei soorten pictogrammen en verschillende moeilijkheidsgraden. Blader door de lijst voor inspiratie en extrapoleer de technieken die worden gebruikt om uw eigen ontwerpen te realiseren.

Laagstijlen

De ingebouwde laagstijlen van Photoshop zijn een geweldige manier om de laatste hand te leggen aan uw pictogrammen. Open het laagstijlvenster door te dubbelklikken op een laag of door er met de rechtermuisknop op te klikken in het lagenoverzicht. Gebruik een grijze slag van 1px met een dekking van 40-50% voor de grenzen van uw pictogram en zet uw schaduwen op 110 ° voor de beste resultaten. Probeer geen schaduwen te gebruiken in de omgeving van het pictogram, omdat de meeste besturingssystemen dit al doen.

Heb je nog andere rudimentaire tips over het ontwerpen van iconen? Laat ons weten wat je denkt in de comments hieronder!

Ontdek meer over: Adobe Photoshop.