Så här gör du en Google Plus-ikon i Photoshop

Hej Photoshop fans! Med all buzz som pågår nyligen om Google Plus så var det ingen att undvika att göra en relaterad Photoshop-handledning om det också. Även om det kan tyckas enkelt är den enkla utseendet g + ikonen faktiskt lite svårt att perfekt replikera, men det kommer säkert inte att stoppa oss. Förbered dig på att dyka in i några mer avancerade Photoshop!

Steg 1 - Ikonstorlek

För den här kommer vi att gå till en större ikon - 256 X 256px. Du kan också försöka skapa en 128 x 128 px eller en 512 x 512 px ikon, men en vanlig ikon ska göra jobbet.

Steg 2 - Ställa in dina guider

För denna handledning måste vi vara extremt noggranna, så låt oss sätta upp några guider som hjälper oss på vägen. För att skapa en ny guide, gå till Visa, Ny guide .

Du måste repetera det här steget flera gånger för att göra följande guider (kom ihåg, vi arbetar i pixlar, så glöm inte att ändra cm i positionsrutan till en px ):

Horisontella guider: 0px, 40px, 256px

Vertikala guider: 0px, 64px, 128px, 192px, 256px

(Nedan - exempel för den andra horisontella guiden)

När du är klar kan din duk se ut så här:

Steg 3 - Förstora din duk

Vi vill ha Google Plus-logotypen på en jämn vit till grå bakgrund i typisk Google-stil. Klicka på Bild, Kanfastryck och ställ in duken till en tapetliknande upplösning. För detta gick vi med 720p (1280 × 720).

Hämta nu gradientverktyget och skapa en radiell gradient som bleknar från vit till ljusgrå . Något liknande det här:

Steg 4 - Skapa formen

Skapa ett nytt lager . Gå nu till formverktygen och välj det runda rektangelverktyget. Byt dess radie till 20 px och dess färg till en mörkgrå (343434) . Använd nu de guider som vi gjorde tidigare, dra ut den rundade formen och se till att den passar snyggt i sina gränser.

Steg 5 - Top del av logotypen

Först och främst, Rasterize ditt lager med r -klicka, Rasterize . Använd nu den högra delen av logotypen ( mellan första och andra horisontella guiderna ) med högerklickning och välj Layer Via Cut . Separera nu det nya skiktet i fyra mindre lager - var och en för varje övre del: Så här ser det ut om jag aktiverar och inaktiverar varje lager en efter en:

Snabbtips - du kan byta namn på dina lager och ge dem namn som topp 1, topp 2 och så vidare. Det kommer inte bara att göra saker renare, men kommer också att göra saker lättare. Du kan till och med försöka sätta de bästa delarna i sin egen lagergrupp .

Steg 5 - Bottom Visuals

Välj ditt lager som innehåller den nedre delen av bilden ... (den här):

... och högerklicka på Välj blandningsalternativ . Härifrån vill du lägga till en del Bevel and Emboss ...

... och en övertoningsöverläggning (bleknar från 1d1d1d till 292929) .

Din bild ska efteråt få en ändring som liknar detta:

Steg 6 - Top Part Visuals

Först, se till att du aktiverar din övre vänstra ikon bit. Nu, igen, öppna lagrets Blanding Options och ge den lite inre skugga ...

... liksom lite färgöverlagring.

Här är vad din bild ska se ut före och efter ändringarna:

Upprepa det här steget för varje nytt lager och ställ in dess överlagringsfärg:

1: a stycket: Röd - f23a3f

2: a stycket: Blå - 5988f5

3: e stycket: Green - 5fb816

4: e stycket: Gul - ffc000

Steg 7 - Lägga till en liten glans

Skapa ett nytt lager och placera det över alla andra lager. Använd nu ett Gradient Tool för att skapa en Radial Gradient fading från vit till öppenhet inuti ikonens område. Sätt sedan lagens opacitet till 30% och blandningsläge till överlagring . Ändringarna är knappt märkbara, men fortfarande ganska viktiga. Här är en snabb före / efter:

Steg 8 - Den Allsmäktige g +

Ta en snabb skärmbild av Googles logotyp från Google.com. Klistra sedan in bilden direkt i Photoshop ( dess lager går mellan överlagringsgraden och resten av bilden ) och ta bort allt annat än små bokstaven "g" .

Nu kan du använda alla verktyg du föredrar att ta bort bakgrunden från den lilla "g" och kan även använda Refine Edge för att släta ut det lite. Ctrl + Klicka sedan på miniatyrbilden och sedan, med en rektangulär markering i handen , högerklicka och välj Fyll . Använd Vit på 100% och Normal och du bör komma till det här:

Nu för plus. Tja, inget att diskutera här, verkligen. Ta bara ett typverktyg och hitta ett teckensnitt som har en fin mager "+" som liknar den ursprungliga logotypen och får den i bilden. När du är klar ska du ha det här:

Steg 9 - The Grand Finally!

Ett steg kvar väntar! Gå till Visa> Ta bort guider för att bli av med guiderna, eftersom vi inte längre behöver dem och då kommer din bild att vara komplett. (Åh, och glöm inte att knacka ut en snabb Ctrl + Shift + S - du skulle inte vilja förlora allt det hårda arbetet, skulle du?)

Steg 10 - Njut av!

Äntligen klar! Men vänta, varför stanna här? Vem vet vilka andra coola logotyper som kunde komma ut ur denna mall! Fortsätt och prova din kreativitet och se vad du gör med.