Een pictogram tekenen in Photoshop. Hoe vectorwolkpictogrammen te tekenen in Photoshop

In deze les gaan we leren tekenen prachtig icoon Televisie in Adobe Photoshop.

Stap 1.

Creëren nieuw document (Bestand > Nieuw) met getoonde instellingen

Stap 2.

Vul de achtergrond #FFFFFF kleur en breng er vervolgens het volgende op aan Laag-effecten.

Stap 3.

Gebruik met radius 35px LICHAAM, open Laagstijlen en toepassen volgende instellingen.

Voeg ook toe Hartinfarct met laag LICHAAM met de volgende instellingen

Stap 4.

Stap 5.

Gebruik Rechthoek gereedschap afgeronde hoeken(U) met straal 35px en maak een rechthoek van elke kleur. Geef deze laag een naam LICHAAM_2 en pas daarna de volgende effecten op deze laag toe.

Voeg ook toe Hartinfarct te laag LICHAAM_2 met de volgende instellingen.

Daarna toevoegen Innerlijke schaduw te laag LICHAAM_2 met de volgende instellingen.

Stap 6.

Je zou een soortgelijk resultaat moeten krijgen.

Stap 7

LICHAAM. Geef deze laag een naam BASEREN. Gebruik Gereedschap Afgeronde rechthoek (U) met straal 35px

Om dit te doen, selecteert u de laag LICHAAM klik klik met de rechtermuisknop muis en selecteer Kopieer laagstijl en selecteer vervolgens de Basislaag, klik op de rechtermuisknop en selecteer Laagstijl plakken.

Hierna moet u de dikte corrigeren Hartinfarct op 3px in laag BASEREN.

Stap 8

Je zou een soortgelijk resultaat moeten krijgen.

Stap 9

Creëren nieuwe laag en plaats deze onder de laag LICHAAM. Geef deze laag een naam VOET. Gebruik Gereedschap Afgeronde rechthoek (U) met straal 35px en pas er vervolgens de volgende laageffecten op toe.

Solliciteer ook Innerlijke schaduw te laag VOET.

Stap 10

Je zou een soortgelijk resultaat moeten krijgen.

Stap 11

Dupliceer nu de laag VOET en plaats deze zoals weergegeven op de afbeelding.

Stap 12

Maak een nieuwe laag, geef deze een naam GLANZEND en plaats deze bovenop alle lagen, en selecteer vervolgens Penseel (B) en gebruik een grote borstel met zachte randen om één witte vlek te schilderen.

Verander dan Mengmodus op Overlappen met reduceren Transparantie op 50%

Stap 13

Maak een nieuwe laag en geef deze een naam SCHERM en plaats deze bovenop alle lagen.

Gebruik Gereedschap Afgeronde rechthoek (U) met straal 35px om een ​​rechthoek te creëren. Kopieer vervolgens Laagstijl BODY_2 en breng het aan op de laag SCHERM. Pas nu de slagdikte aan 10px in laag SCHERM.

Stap 14

Je zou een soortgelijk resultaat moeten krijgen.

Stap 15

In deze stap gaan we het scherm zelf maken. Maak een nieuwe laag SCHERM_2. Plaats het bovenop de andere lagen. Gebruik Gereedschap Afgeronde rechthoek (U) met straal 35px om een ​​rechthoek te creëren. Solliciteer dan Verloop V Laagstijlen met de volgende instellingen.

Solliciteer dan Innerlijke schaduw te laag SCHERM_2.

Solliciteer dan Innerlijke gloed te laag SCHERM_2.

Dan Schaduw te laag SCHERM_2.

Stap 16

Je zou een soortgelijk resultaat moeten krijgen.

Stap 17

Maak een nieuwe laag en geef deze een naam SCHERM GLANZEND en plaats deze bovenop de anderen. Selecteer vervolgens Pengereedschap (P) en teken een contour zoals weergegeven in de afbeelding. En vul het met wit #FFFFFF. Dan verminderen wij transparantie naar 20%

Stap 18

Maak een nieuwe laag en roep deze aan LICHT PUNT en plaats deze in een laag bovenop de rest. Hierna selecteren wij Penseel (B) En groot formaat penselen met zachte randen, plaats één grote witte vlek in het midden van het scherm.

Stap 19

In deze stap ga je knoppen maken. Nemen Ellipsgereedschap (U) en maak een cirkel en plaats deze ongeveer zoals op de afbeelding, geef deze laag een naam KNOP.

Ga nu terug naar de laag LICHAAM_2 en kopieer het Laagstijl door er met de rechtermuisknop op te klikken en te selecteren Kopieer laagstijl. Pas daarna de gekopieerde stijl op de laag toe KNOP.

Stap 20.

Hierna solliciteren wij Laagstijl zoals weergegeven in de afbeelding, naar onze kopie van de cirkel.

Dan voegen wij toe Schaduw.

Stap 21

Je zou een soortgelijk resultaat moeten krijgen.

Stap 22

We herhalen de eerste stappen en passen ons toe Laagstijlen naar een rechthoek, maar wijzig de instellingen enigszins Schaduwen.

Stap 23

Je zou een soortgelijk resultaat moeten krijgen.

Stap 24

We dupliceren de laag KNOP plaats hem onder de eerste knop en draai hem dan een beetje. Wij redigeren ook Laagstijl Verloop tweede knop.

Stap 25

Nu zijn onze knoppen klaar.

Het resultaat zou moeten zijn zoals op de foto.

Stap 26

Laten we een luidspreker maken. We moeten een rechthoek met afgeronde hoeken onder de knoppen maken, zoals op de afbeelding. Laten we deze laag noemen SPREKER.

Stap 27

Laten we nu opengaan Laagstijl en pas de volgende instellingen toe.

Van toepassing Innerlijke schaduw te laag SPREKER.

Laten we toevoegen Hartinfarct te laag SPREKER.

Dit is wat we zouden moeten krijgen:

De iconen zijn belangrijk onderdeel interactief en webdesign. Hoewel pictogrammen klein zijn, kunnen ze erg moeilijk te maken zijn. In de tutorial van vandaag laten we zien hoe je een mappictogram kunt maken met behulp van verschillende vormen en reflexen in Photoshop. Laten we beginnen!

Stap 1 - Nieuw bestand / pentechniek
Open Photoshop en maak een nieuw document (Ctrl + N). Gebruik de volgende instellingen:
Resolutie: 72 dpi
Kleurmodus: RGB-kleur
Afmetingen: 600 × 600 pixels

Maak de volgende vorm met behulp van het gereedschap PenHulpmiddel(P) (Veer). Kleur: #3da1e2

Stap 2 - Vormen maken met de pen
Tekenen rug mappen gebruiken Pen-gereedschap (Pen) met dezelfde tekentechniek. Teken vervolgens een streep zoals weergegeven in de afbeelding.
Kleur: #003658 #3da1e2 #08517e

Stap 3 - Maak de vorm af
Als u klaar bent met het tekenen van de map, moet u een stuk papier en een pijl toevoegen, zoals weergegeven in de afbeelding. Je zou nu 5 lagen moeten hebben. Elk formulier staat aan aparte laag. Geef elke laag een naam.
Kleur: #ffffff #32e732

Stap 4 - Kleureffecten toevoegen
Voeg de volgende laagstijlen toe aan de voorkant van de map. Verlaag de dekking naar 90%.

Voeg de volgende laagstijlen toe voor het papier. Verlaag de laagdekking tot ongeveer 90-95%.

Voeg de volgende laagstijlen toe voor de streep.

Voeg de volgende laagstijlen toe aan de achterkant van de map.

Voeg de volgende laagstijlen toe voor de pijl.

Nu ziet uw pictogram er zo uit.

Stap 5 - Reflexen toevoegen
Toevoegen nieuwe groep zogenaamde ‘reflexen’. Gebruik Pen-gereedschap(Pen) om de reflectie te tekenen zoals weergegeven in de afbeelding. Zorg ervoor dat u alleen de omtrek tekent en niet de vorm. Nadat u het pad hebt gesloten, klikt u met de rechtermuisknop op de werkruimte en selecteert u selectie maken(Maak een selectie) (doezelen 0). Neem een ​​grote kwast (diameter ongeveer 470, hardheid 0) en schilder erover rechterkant selectie, zoals op de afbeelding, om een ​​witte reflectie te creëren. Wijzig de overvloeimodus naar Overlay(Overlay) en verlaag de dekking naar 63%.

Stap 6 - Randen
Maak een nieuwe groep met de naam "Randen", maak er een nieuwe laag in (Ctrl + Shift + N of klik op het pictogram Nieuwe laag maken). Door hoogtepunten aan de randen toe te voegen, krijgt het pictogram een ​​3D-effect. Gebruik Pen-gereedschap(Pen) om streeklijnen rond de hoeken en alle marges van de map, het papier en de pijlen te maken. Klik vervolgens met de rechtermuisknop op de werkruimte en selecteer Slag pad(Hartinfarct) - Borstel(Borstel). De penseelinstellingen moeten vooraf worden gewijzigd, masterdiameter 8 pixels en hardheid 0.

Stap7 - Schaduwen
Maak een nieuwe laag (Ctrl + Shift + N) voor de schaduwen en plaats deze in een nieuwe groep (Ctrl + G). Maak een selectie zoals je deed in stap 5 om de reflecties te maken. Vul de selectie met zwart en vervaag vervolgens de marges met het gereedschap Gereedschap Vervagen(Vervagen). Als de schaduwen er te donker uitzien, verlaag dan de laagdekking tot 40%.

Stap 8 - Tekst toevoegen
Voeg tekst toe met elk gewenst lettertype. Ik heb gekozen voor "Bureau FB". Lettergrootte: 40, laagdekking: 75%.

Stap 9 - Laatste toevoeging van reflecties en schaduwen
Voeg nog een paar reflecties toe aan het papier met dezelfde methoden als in stap 5.

Schaduw toevoegen met Ellips gereedschap(E) (Ellips). Teken een ellips zoals weergegeven in de afbeelding en voeg er enkele toe Filteren -Vervagen-Bewegingsonscherpte(Filter - Vervagen - Bewegingsonscherpte). Verlaag de dekking naar wens.

Laatste bezichtiging
Ik hoop dat je deze tutorial leuk vond. Ik heb er wat toegevoegd extra pictogrammen, die ik met dezelfde methoden heb gemaakt.

Houd er echter rekening mee dat beide formaten niet door IE worden ondersteund en daarin niet zullen werken.

Favicon in meerdere maten
Naast de gebruikelijke favicon van 16x16 pixels, die worden gebruikt voor het ontwerp adresbalk, er is een verscheidenheid ervan met afmetingen van 32x32 pixels en 48x48 pixels. Deze pictogrammen komen veel voor in Windows-omgeving. Als u bijvoorbeeld een snelkoppeling naar een webpagina op uw bureaublad wilt plaatsen, probeert Windows automatisch het favicon als afbeelding voor de snelkoppeling te gebruiken. Maar het standaardformaat (16x16 pixels) zal sindsdien niet voldoende zijn voor een weergave van hoge kwaliteit standaard maat snelkoppeling in Windows-omgeving is 48x48 pixels - dit betekent dat de snelkoppeling wordt uitgerekt tot de vereiste grootte en lelijk en bijna onleesbaar wordt.

Er is echter een manier om deze tekortkoming te corrigeren. Nuttige eigenschap.ico-bestanden is dat ze veel variaties van hetzelfde pictogram kunnen bevatten verschillende maten en kleurdiepte (zoals het vermogen van GIF-bestanden om veel frames te bevatten). Als u daarom een ​​afbeelding in favicon.ico in verschillende formaten en met verschillende kleurdiepten plaatst, kan Windows automatisch de meest geschikte parameters selecteren om op de snelkoppeling toe te passen. De meest voorkomende labelformaten die kunnen worden gebruikt, zijn 16x16, 24x24, 32x32 en 48x48 pixels.

Het maken van een pictogram met meerdere formaten is niet veel moeilijker dan het maken van een gewone favicon van 16x16 pixels. Vereiste plug-in we kunnen alles op dezelfde Telegraphics-website vinden, waarmee u meerdere pictogrammen in één .ico-bestand kunt plaatsen. In principe is dit niet eens een plug-in, maar apart programma, die zowel in Windows (via opdrachtregel), en op MacOS (via slepen en neerzetten). Dit programma heeft ook analogen, zoals: Sib Icon Studio (www.sibcode.com/icon-studio) en Any to Icon Convertor (www.aha-soft.com/anytoicon).

Wat de kleurdiepte betreft, is het je misschien opgevallen dat sommige pictogrammen enkele gekartelde randen hebben, terwijl andere de randen gladder maken en er heel mooi uitzien. Dit is mogelijk dankzij de 32-bits kleurdiepte, die echte transparantie weergeeft, net als Photoshop. U kunt een 32-bits versie van het pictogram maken, samen met een 24-bits (16 miljoen kleuren, met ondersteuning voor transparantie zoals in GIF-bestanden), een 16-bits (256 kleuren) en zelfs een 8-, 4-, of 2-bit versie, en plaats ze allemaal in één ico-bestand.

Als je er dus zeker van wilt zijn dat jouw favicon er in zijn geheel prachtig uit zal zien mogelijke gevallen– het is beter om het in meerdere versies tegelijk te doen. Bijvoorbeeld:

16x16, 16-bits (256) kleuren
16×16, 32-bits kleuren
32x32, 16-bits (256) kleuren
32×32, 32-bits kleuren
48x48, 16-bits (256) kleuren
48×48, 32-bits kleuren

Maar laat je niet te veel meeslepen en creëer veel opties, want bij elke toevoeging wordt favicon.ico groter, wat een negatief effect kan hebben op het laden ervan.

Het oplossen van mogelijke problemen
Veelvoorkomende problemen
Als na de bovenstaande stappen uw “favicon” nog steeds niet verschijnt, probeer dan uw pagina meerdere keren te vernieuwen (ongeveer 5) of de browsercache te wissen, of “??) in te voeren - deze actie zal de browser doen denken dat de pagina nieuw is en is niet aan de cache toegevoegd.

Een andere manier om dit probleem op te lossen is door een directe link naar uw “favicon” te volgen (bijvoorbeeld: http://site/favicon.ico), waarna de browser (IE) het pictogram onmiddellijk zal weergeven en onthouden.

Browsercompatibiliteitsproblemen
Microsoft IE 6 (en 7, 8 en 9) geeft de favicon mogelijk pas weer als uw paginalink aan favorieten is toegevoegd. Probeer het in dat geval volgende optie– ingedrukt houden linker sleutel muis op het weergegeven “favicon” (meestal standaard icoon IE), “schud” het dan en laat het los. Met deze acties wordt de pagina opnieuw geladen en wordt het pictogram bijgewerkt. Een andere manier om dit probleem op te lossen is door de volgende code toe te voegen aan het “” gedeelte van de pagina’s waar u uw “favicon” wilt laten verschijnen:

Safari voor Mac geeft het bijgewerkte favicon pas weer als de browsercache is gewist. Het klikken op de menuknop “Cache leegmaken” zal het probleem echter niet oplossen, aangezien “Safari” pictogrammen opslaat aparte map. Om de pictogramcachemap te wissen, gaat u naar het menu "Bewerken> Safari opnieuw instellen" en vinkt u het vakje "Alle websitepictogrammen verwijderen" aan. Een alternatieve (handmatige) manier is om de inhoud te verwijderen volgende map: “Gebruiker>Bibliotheek>Safari>Pictogrammen”. Voor de Windows-versie van “Safari” is het pad iets anders: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, in deze map moet je het bestand “WebpageIcons.db” verwijderen . Ik wil u eraan herinneren dat de map "Lokale instellingen" en de submappen ervan standaard verborgen zijn, wat betekent dat u, om ze te bereiken, de weergave moet configureren verborgen bestanden En Windows-mappen. Na het verwijderen van bovenstaande bestanden dient u “Safari” opnieuw op te starten (in sommige gevallen dient u ook uw computer opnieuw op te starten).

Om een ​​soortgelijk probleem op te lossen in “ Mozilla FireFox' U moet uw browsercache wissen en het programma opnieuw opstarten.

Een dergelijk probleem bestaat niet in de Opera-browser, dus na het bijwerken van uw pictogram is dit voldoende eenvoudige update pagina's (mogelijk meerdere keren).

Een ander probleem in Windows is het bijwerken van pictogrammen voor internetpagina's (bijvoorbeeld bij het plaatsen van een paginapictogram op het bureaublad). Voor gedwongen update gewijzigde pictogrammen, moet u de volgende stappen uitvoeren:
1. Klik met de rechtermuisknop op het bureaublad;
2. Selecteer het menu-item “Eigenschappen” (voor “Windows XP”) of “Personaliseren” (voor “ Windows Vista” of “Windows 7”) en ga naar het tabblad “Eigenschappen voor Beeldscherm”;
3. Wijzig de kleurweergavekwaliteit van 32-bits naar 16-bits en klik op de knop “OK” of “Toepassen”;
4. Wijzig de kleurkwaliteit terug naar 32-bit en klik op “OK” of “Toepassen”.

Problemen met de plug-in "Photoshop" voor het werken met pictogrammen
Het Windows Icon (ICO)-formaat is niet beschikbaar als:
1. Je hebt de plug-in verkeerd geïnstalleerd;
2. U heeft verkeerd bepaald welke plug-inversie geschikt is voor uw besturingssysteem;
3. De werkruimte in Photoshop is niet gemaakt in de 1-, 4-, 8-bits geïndexeerde of 24-bits RGB-modi.

Bovendien moet u na het installeren van de plug-in Photoshop zelf opnieuw opstarten om de wijzigingen door te voeren.

Plat design is een relatief nieuwe trend. Maar nu iOS en Windows deze ontwerpstructuur vandaag de dag actief overnemen, zal dat niet zo snel het geval zijn. En de meeste (zo niet alle) sites op internet zullen het gaan gebruiken.

Waarom begint u niet nu met het veranderen van het ontwerpconcept van uw website? U kunt beginnen met het opnieuw opbouwen van de bron met de vectorpictogrammen die in de platte interface worden gebruikt.

Er zijn veel afbeeldingen die kunnen worden "gladgestreken". U kunt beginnen met een logo of met navigatiepictogrammen.
Wij maken navigatiepictogrammen voor uw website of blog. In dit artikel gebruik ik Adobe Photoshop CS6. Dus maak je klaar, we staan ​​op het punt om platte UI-elementen te gaan maken.

Wat zullen we creëren:

Photoshop openen. Creëren nieuw bestand met behulp van een fotovoorinstelling (1 0 bij 8 inch, 300 dpi, transparante achtergrond, RGB-kleur).

Met behulp van de " Rechthoek met afgeronde hoeken"Maak een nieuwe vorm met afmetingen 1736 px bij 1736 px, straal - 83 px, kleur - #82d8b5. Of u kunt uw eigen kleur gebruiken. Gebruik in een vectorwebsitepictogram kleuren in overeenstemming met kleurenschema jouw hulpbron.

Teken met het gereedschap Pen iets zoals in de onderstaande afbeelding wordt weergegeven. Gebruik kleur #a30d00. Dit wordt het dak voor het pictogram " Startpagina «.

Teken met het gereedschap Pen een rechthoekige vorm, zoals weergegeven in de onderstaande afbeelding. Gebruik de kleur #ffffff . Met behulp van de " Rechthoekig gebied»teken een klein vierkantje, kleur #3498db.

Gebruik vervolgens de " Rechthoekig gebied» teken een vorm van 248 bij 396 pixels, vulkleur - #fcab3a.

We hebben al een vectorpictogram gemaakt " Startpagina", maar ik wil een lange schaduw toevoegen. Dus laten we doorgaan.

Teken een vorm met het gereedschap Pen met de vulkleur #000000. Begin aan de rechterrand van het dak. Op de rand waar rood-witte en rode tinten elkaar kruisen. Verleng de tekening naar de buitenkant van het selectiekader met afgeronde hoeken en voltooi de figuur aan de linkerkant onderste rand Huizen.

Draai de schaduw in de tegenovergestelde richting. Rasteriseer de schaduwlaag. Door gebruik te maken van " Toverstaf » selecteer de volledige laag met afgeronde selectiekaders en keer de selectie om ( je kunt een combinatie gebruiken Ctrl-toetsen+Shift+I). Bij actieve selectie ( aangegeven door een knipperende lijn) selecteer de schaduwlaag en klik op verwijderen.

Ons vectoritempictogram is klaar. Om het op te slaan, ga naar Bestand > Opslaan voor web (toetscombinatie Ctrl + Shift + Alt + S). Sla de afbeelding op in PNG-24-indeling, terwijl u het vakje voor de optie "Transparantie" aanvinkt. We slaan alles op in PNG-24-indeling, omdat het transparante pixels ondersteunt.

1. Open Photoshop en herhaal stap één en twee van het vorige gedeelte;
2. Teken een afgeronde rechthoek met een afmeting van 929 bij 929 px en een straal van 38 px. Ik heb de kleur #f5ea74 gebruikt om het pictogram op een sticker te laten lijken;
3. Teken een lijn van 1 px breed met de kleur #5d5608 bovenaan de sticker;
4. Teken lijnen van 15 px breed. Let op de inkepingen. Ik heb ze iets breder gemaakt om het vectorpictogram van het item een ​​minimalistisch gevoel te geven. Compactheid wel onderscheidend kenmerk plat ontwerp;
5. Teken een rechthoek die de afbeelding op de sticker symboliseert;
6. Teken een schaduw zoals we deden voor het pictogram " Startpagina«;
7. Bewaar de afbeelding!

En dit zijn de vectorpictogrammen 'Over jezelf' en ' Neem contact met mij op«:

Download het hele pakket

Ik hoop dat u na het lezen van dit artikel begint met het vernieuwen van uw website. Dit is een heel moeilijk proces, maar verandering is onvermijdelijk, dus hoe eerder je begint, hoe beter. Bovendien is het platte ontwerp niet alleen mooi, maar ook praktisch. Zo profiteert u dubbel van de voordelen.

Ik wil u eraan herinneren dat dit gewoon zo is algemene begeleiding. Je kunt ermee experimenteren en erop voortbouwen.

Vertaling van het artikel " Hoe u platte pictogrammen maakt in Photoshop» werd voorbereid door het vriendelijke projectteam

04.07.2016 27.01.2018

In deze tutorial leer je hoe je platte sociale media-iconen kunt maken.

Wat je gaat creëren:

Creëren platte pictogrammen We beginnen met de achtergrond, voegen vervolgens effecten toe aan de pictogrammen om ze originaliteit te geven en tekenen vervolgens lange schaduwen. Als u deze zelfstudie wilt herhalen, heeft u Photoshop CS3 of hoger nodig.

Bronnen:

• Lettertype 1 - http://fontawesome.io/cheatsheet/
• Lettertype 2 - http://fontawesome.io/

Stap 1

Maak een nieuw bestand (Ctrl+N) maat 500 × 400 pixels.

Maak een nieuwe groep (CTRL+G) en noem het "Achtergrond".

Stap 2

Vul de achtergrond in kleur # e7e9ea door te gebruiken Emmer gereedschap.

Stap 3

Om meer effecten aan de achtergrond toe te voegen, voegen we een verloop toe. Klik op het pictogram Aanpassingslaag en selecteer Verloop (Verloop), gebruik de volgende instellingen:

Modus voor overvloeien van lagen Zacht licht (Zacht Licht) | Dekking: 25%

Stap 4

Maak een nieuwe groep en noem deze "symbolen".

Stap 5

Voordat we beginnen, moeten we het menu instellen Heersers En Rasters (Linialen en rasters). Ga naar menu Weergavelinialen (Weergave- Heersers) En Bekijk-Toon-rasters (Weergave— Show— Rasters) . Hier zijn mijn instellingen voor Linialen en rasters(ze kunnen worden geopend door naar te gaan Bewerken-voorkeuren:

Om te creëren Richtlijn, u hoeft er alleen maar op te klikken en het van de liniaal te slepen. Om een ​​verticale hulplijn te maken, sleept u vanaf de verticale liniaal en omgekeerd. Dit is hoe ik het canvas heb verdeeld (elk pictogram is gelijk aan 50 × 50 pixels en de afstand tussen elk pictogram 25 pixels):

Stap 6

In deze tutorial werken we met het Awesome-lettertype, u kunt aangepaste pictogrammen voor uw website toevoegen. Meestal gebeurt dit door plaatsing CSS-lettertype naar uw site, maar omdat we met Photoshop werken, moeten we elk pictogram dat u wilt gebruiken van het spiekbriefje kopiëren. Ga naar de pagina en selecteer het pictogram dat u wilt tekenen. Ik heb pictogrammen gebruikt voor het volgende ( sociale media) sites: Twitter; Facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Afwijkende Kunst; Pinterest; Skypen; Voer.

Stap 7

Zodra u het pictogram heeft gevonden dat u wilt gebruiken, kopieert u het ( Selecteer het en klik met de rechtermuisknop op Kopiëren)

Ga vervolgens terug naar Photoshop en selecteer Tekstgereedschap (TekstHulpmiddel) op de werkbalk. Wijzig de lettertype-instellingen zoals weergegeven in de afbeelding:

Plak nu het pictogram dat u zojuist hebt gekopieerd. ( Klik met de rechtermuisknop en plak)

Stap 8

Herhaal de vorige stap totdat u alle pictogrammen heeft ingevoegd die u wilt gebruiken.

Stap 9

Maak een nieuwe groep en hernoem deze “icon bg”, plaats de groep onder de groep “symbolen”.

Stap 10

Maak een nieuwe laag en plaats deze in de groep die in de vorige stap is gemaakt. Ik heb de laag hernoemd naar "icon bg".

Stap 11

Het hulpmiddel gebruiken Rechthoek met afgeronde hoeken (RechthoekigGereedschap Cirkelvorm)(bevindt zich in de onderstaande werkbalk Tekstgereedschap) Ik heb de achtergrond van de pictogrammen gemaakt,

Hier zijn alle kleuren die ik heb gebruikt:
Twitter: # 6bd1f4;
Facebook: # 5a93cb;
Tumblr: # 3c6a9c;
Google+:# e44940;
Instagram: # 9bd29d;
YouTube: # f4504c;
Twitch: # a96db6;
Dropbox: # 81d5ed;
Afwijking:# 6e8e61;
Pinterest:# f25f5f;
Skype:# 67d5f4;
Voer:# e9951d;

U kunt deze kleuren gebruiken, of u kunt naar eigen inzicht kleuren gebruiken - op deze manier krijgt het werk originaliteit.

Als je het uiterlijk van afgeronde rechthoeken niet mooi vindt, kun je een andere vorm kiezen, zoals een vierkant of een cirkel. Om een ​​perfecte cirkel of vierkant te maken, vergeet niet vast te houden SHIFT-toets op het moment van hun creatie.

Stap 12

Als u tevreden bent met het resultaat op in dit stadium, je kunt verder gaan, maar als je wat leven aan de pictogrammen wilt toevoegen, laten we doorgaan met de verbeteringen. Laten we beginnen met laagstijl Schaduw (slagschaduw). Open de groep "symbolen", selecteer een van de pictogrammen en klik op het pictogram FX-Schaduw (Fx-slagschaduw)

Stap 13

Herhaal de vorige stap met de overige pictogrammen. Om uw werk veel gemakkelijker te maken, klikt u op klik met de rechtermuisknop op de laag - Kopieer stijl staand (-Copy Laagstijl) . Selecteer vervolgens de resterende pictogramlagen en klik erop klik met de rechtermuisknop en plak laagstijl.

Stap 14

Laten we nu toevoegen innerlijke schaduw naar de achtergrond van elk pictogram. Open de groep “icons bg”, selecteer de laag met het pictogram, klik op het pictogram FX-Innerlijke schaduw (Fx-InnerSchaduw) . Gebruik de volgende opties:

Stap 15

Maak een nieuwe laag en noem deze "Glanseffect". Verander de voorgrondkleur naar # ffffff; en met de hulp Rechthoekig selectiekader maak verschillende rechthoeken, de helft kleiner formaat iconen (ca. 50x25 pixels). Doe dit voor alle pictogrammen.

Verander dan overvloeimodus naar Zacht licht, verminderen Dekking laag op 20% , A vullen naar 80% .

Stap 16

Schakel de zichtbaarheid van de laag "Glanseffect" uit. Maak een nieuwe laag en noem deze "Long Shadow". Deze stap is iets ingewikkelder vergeleken met de rest van de effecten. Plaats een nieuwe laag onder de laag "Glanseffect".

Stap 17

Nemen Veelhoekige lasso-tool en begin met het maken van een rechthoekige schaduw door alleen de rand van het pictogram rechtsonder aan te raken, maak vervolgens een diagonale lijn totdat deze de rechteronderrand van de achtergrond van het pictogram bereikt, maak een rechte lijn totdat deze het midden van de achtergrond bereikt en verbind vervolgens de lijnen. In de afbeelding kun je duidelijker zien hoe je een lange schaduw tekent.

Stap 18

Laatste stap! Verminderen Dekking schaduwlaag aan 10% , En vullen (Fill) naar 0% .

Klik nu op het Fx-pictogram en selecteer Overlaykleuren (KleurOverlay). Gebruik de volgende opties:

Selecteer nu Overlayverloop (VerloopOverlay) en gebruik deze instellingen:

Eindresultaten: