Share
Het begrijpen van het fundamentele proces van het maken van een pictogram in Photoshop kan een waardevolle vaardigheid worden om te leren. Vandaag gaan we een chalkboard-icoon maken geïnspireerd op de Icon Resource-website van Sebastiaan de With, die toestemming heeft gegeven om een tutorial te maken die is geïnspireerd door zijn werk. In deze tutorial leer je enkele belangrijke concepten en hoe je met sommige apps van derden kunt werken.
Maak een nieuw document met de onderstaande instellingen. Je kunt je achtergrond vullen met elke kleur, maar ik werk het liefst met een transparant canvas. Het is aan jou.
Maak een nieuwe laagmap en noem deze "Frame". Maak binnen een nieuwe laag en noem deze "Wood". Selecteer het gereedschap Rechthoek (U) en teken een rechthoekige vorm zoals hieronder wordt weergegeven.
Open de overvloeiopties van de laag "Hout" en pas de volgende stijlen toe: Inner Shadow, Inner Glow en Gradient Overlay met de hieronder getoonde instellingen. Als je klaar bent krijg je een geel-oranje rechthoek zoals die in de laatste afbeelding.
Maak een nieuwe laag en noem deze "Wood Texture". Vul deze laag met zwart en ga naar filter> ruis> ruis toevoegen en stel de onderstaande opties in. Als dezelfde laag is geselecteerd, ga je naar filter> vervagen> Gaussiaanse vervaging en typ je de instellingen hieronder in de tweede afbeelding. Ga vervolgens met dezelfde geselecteerde laag naar afbeelding> aanpassingen> niveaus (of druk op cmd + L voor Mac of ctrl + L voor vensters) en typ de instellingen van de derde afbeelding. Als uiteindelijk dezelfde laag geselecteerd is, druk je op cmd en klik je in de "Wood" -laag om een selectie te maken, ga je naar> inverse en druk je op backspace om de extra laag te verwijderen en overeenkomen met de rechthoekige vorm van de "Wood" -laag. Wijzig de overvloeimodus in "Zacht licht" en verminder de dekking tot 30%. Het beeld tot nu toe moet er als volgt uitzien.
Dupliceer de "Wood Texture Layer" twee keer en hernoem ze in "Wood Texture 1" en "Wood Texture 2". In de "Houtstructuur 1" Wijzig de overvloeimodus in Overlay en verminder de dekking tot 10%, en in "Wood Texture 2" Zet de mengmodus op "Zacht licht" en verminder de dekking tot 15%. Op dit punt zou je zoiets als dit moeten zien:
Maak een nieuwe laag en noem het "bord". Met de nieuwe laag geselecteerde hold shift en klik op de "Wood" -laag, dit maakt een selectie. Ga naar> wijzigen> contract selecteren en voer in het dialoogvenster 60 px in en klik op OK. Vul de selectie met zwart. Op dit moment zou je de 'Wood'-laag moeten hebben met de oranje rechthoek en de' groene 'laag met een kleinere zwarte rechthoek. Open de overvloeiopties van de "Groene" laag en pas de volgende stijlen toe:
Maak een nieuwe laag en noem deze "Bord Grunge", je hebt een grunge penseelset nodig. Ik gebruikte het Grunge Corner-penseelpakket voor middernacht. Zet de voorgrondkleur op zwart en selecteer een hoekpenseel en maak wat grunge-effecten. Zet de overvloeimodus op Normaal en verminder de dekking tot 10%. Hopelijk heb je zoiets bedacht als de afbeelding hieronder:
Maak een nieuwe laag en noem deze "Oud Effect". Zorg ervoor dat de voorgrondkleur zwart is en selecteer een krijtpenseel (deze penselen worden standaard meegeleverd in Photoshop). Zet het op 100px, teken een aantal lijnen om een oud effect te maken en verminder de dekkingslaag tot 10%. Op dit punt zou u iets moeten hebben als:
Maak een nieuwe laag en noem deze "Schaduwen". Met de geselecteerde schaduwlaag drukt u op cmd en klikt u op de bordlaag om een selectie van die grootte te maken, vult u de nieuwe selectie in met zwart. Ga nu naar je lagenpalet en maak een nieuw laagmasker, selecteer een grote zachte borstel (ongeveer 600 px) en met zwart als je voorgrondkleur en de borsteldekking van 50% begin met het tekenen van een cirkel in het midden van de laag. Je zult zien dat de zwarte kleur begint te vervagen; als je tevreden bent met het resultaat, verminder je de laagdekking tot 50%. Je creatie moet er ongeveer zo uitzien:
Hier zou je je creativiteit moeten activeren. Maak een nieuwe laag en noem deze "Inhoud". Teken wat je wilt hier; voor het doel van deze tutorial heb ik al een peiling-illustratie klaarliggen. Zorg ervoor dat alles wat je in deze laag tekent of schrijft, wit is. Wanneer u klaar bent, vermindert u de laagdekking naar 70%. Hier zijn enkele voorbeelden van wat u in dit gedeelte zou kunnen doen:
Nu gaan we de inhoudstekening grunge. Voeg aan je inhoudlaag een laagmasker toe zoals we in stap 8 met de schaduwen deden. Selecteer een grungepenseel, ik gebruikte functiepenseelset: 33 Subtiele grunge-texturen en effecten, je zou ook de standaard krijtborstels kunnen gebruiken. Zet de voorgrondkleur op zwart en voeg wat grunge-effecten toe aan je laag Content, totdat je voelt dat het er goed uitziet. Op dit punt lijkt je afbeelding hopelijk verwant aan:
Nu gaan we de houtverbindingen doen. Met het gereedschap Rechthoek (U). Teken een verticale rechthoek van 2 px; zorg ervoor dat uw hoogte hetzelfde is van uw houten frame. Pas de volgende laagstijl toe op je vorm. Plaats vervolgens elke lijn in elk van de hoeken van het frame. Selecteer de 4 lagen en voeg ze samen (cmd + E). Noem deze laag "Lijnen" en verplaats deze onder de laag "Houtstructuur".
Selecteer al je lagen en kopieer ze door met de rechtermuisknop te klikken en dubbele lagen te selecteren. Voeg je nieuwe gedupliceerde lagen samen en druk driemaal op cmd + J of ctrl + J om je nieuwe samengevoegde laag te dupliceren. Je kunt de originele lagen in een map plaatsen, omdat we ze moeten verbergen en met de nieuwe moeten werken. Doe niets aan de bovenste laag, want we gaan met de andere twee exemplaren werken om de schaduwen te maken. Voeg een Gaussiaanse vervaging (filter> vervaging> Gaussiaanse vervaging) van 5,0 px toe aan beide lagen. Verplaats een van de wazige lagen 3 px naar beneden. Dit is een beetje hoe uw pictogram er nu uitziet:
In deze stap moet je je drie lagen samenvoegen en op cmd + t of ctrl + t klikken om het gereedschap Vrije transformatie te openen en 9 graden tegen de klok in te draaien. Pas tot slot je formaat aan je afbeelding aan zodat deze in je canvas past.
We zijn klaar met ons pictogram en nu gaan we leren hoe we het moeten voorbereiden en exporteren. Je hebt twee keuzes, we kunnen de IconBuilder gebruiken van de Iconfactory, een Photoshop-invoegtoepassing waarmee je je eigen pictogrammen in verschillende formaten kunt maken en opslaan. Het kost $ 79, met een gratis proefversie, dus als je echt wilt leren hoe je het moet doen, kun je de proefversie downloaden en ermee werken. De andere keuze is met een app genaamd IMG2ICNS van Shiny Frog. Net als IconBuilder heeft IMG2ICNS een freeware-versie die u kunt gebruiken terwijl u beslist of u het wilt kopen of niet. Deze kost slechts $ 12,90 voor de Pro-versie, wat erg goedkoop is! Dus als u geïnteresseerd bent in het ontwerpen van pictogrammen, kunt u overwegen om deze applicatie te kopen, want het is echt een goede deal.
Download de IconBuilder van de Iconfactory-webpagina die u in de laatste stap hebt gekregen. U moet het installeren, het is heel gemakkelijk, volg gewoon de instructies. Open de map "IconBuilder Essentials" en u ziet verschillende mappen en een aantal zelfstudies en handleidingen; we gaan zoeken in de map "IconBuilder Grid Files" en ik ga het "Expanded.psd" bestand openen.
Ga naar je pictogrambestand en kopieer je pictogramafbeelding door op cmd + A (ctrl + A) en cmd + C (ctrl + C) te drukken. Ga nu naar het bestand "Expanded.psd" en druk op cmd + V of ctrl + V om de selectie te plakken. Verberg de blauwe pictogrammenlaag en wijzig met het gereedschap Vrije transformatie (cmd + T of ctrl + T) het formaat van je pictogram zodat het in het grote vierkant past (512x512)
Herhaal de laatste stap met de vakken 256, 128, 48, 32, 16.
Voeg alle lagen samen en ga naar Filter> Iconfactory> Iconbuilder. Een nieuw venster zal openen. Zorg ervoor dat de initiële instellingen "Uitgebreid" zijn, zoals de afbeelding hieronder:
Klik op de linkerpijl en de pictogrammen passen in de linkerkaders. Klik op "Opslaan" en stel de volgende parameters in. Vink de map aan waar je eerder je pictogram hebt opgeslagen en je zult een nieuwe map zien met de naam "Board" en daar staan je nieuwe iconen, klaar voor gebruik in Mac en Windows, ook heb je een PNG-kopie van elke maat.
Nu dat we klaar zijn met de IconBuilder, volgt u deze stappen als u een eenvoudiger manier wilt om uw pictogrammen te maken. We gaan IMG2ICNS gebruiken.
Ga naar je hoofdpictogrambestand en kopieer de afbeelding. Open een nieuw document in Photoshop van 512x512 en plak uw pictogram, verklein het formaat van de afbeelding met behulp van het gereedschap Vrije transformatie (cmd + T of ctrl + T) zodat het in uw canvas past. Sla uw pictogram op in PNG-indeling. Open IMG2ICNS en sleep uw bestand. Selecteer nu de optie "ICNS" en sla het nieuwe pictogram op in elke map die u wilt.
Dit is hoe uw pictogram er in de vinder uitziet.
Dat is alles, nu heb je een nieuw pictogram. Als je een Mac-gebruiker bent, raad ik je ten zeerste aan om Candybar by Panic te kopen om al je pictogrammen te beheren.
Ik wil Sebastiaan de With speciaal bedanken voor het toestaan van het schrijven van deze tutorial geïnspireerd door een van zijn iconen.
Accentsconagua