Share
Wat je gaat creërenTijdens deze tutorial ga ik je door het proces van het maken van geavanceerde webelementstyling in Photoshop, maar zonder één afbeeldingsbestand te gebruiken in je voltooide website. Als we klaar zijn, hebt u één pagina-indeling met alle UI-elementen die u in de voorbeeldafbeelding hierboven ziet, met alleen CSS3, Base64-code en lettertypepictogrammen.
Door een ontwerp met "geen afbeelding" te maken, kunt u uw laadtijd en HTTP-verzoek tot een absoluut minimum beperken, terwijl u tegelijkertijd het hoogst mogelijke niveau van flexibiliteit in uw UI-elementen bereikt. UI-elementen van pure code kunnen snel en eenvoudig worden aangepast via CSS op manieren die statische afbeeldingen niet kunnen zonder handmatig te worden bewerkt en opnieuw geëxporteerd.
Om dit allemaal mogelijk te maken, gebruiken we vier belangrijke bronnen:
* U kunt desgewenst een andere preprocessor gebruiken.
Door deze elementen samen te brengen, is het mogelijk om een puur codeontwerp te maken dat vrijwel identiek is aan de oorspronkelijke PSD:
De PSD
Het pure coderesultaat (bekeken in Firefox)Deze tutorial zal in twee delen worden opgedeeld:
Tijdens dit eerste deel demonstreren we de soorten technieken die u in Photoshop kunt gebruiken bij het maken van een CSS3- en Base64-vriendelijk ontwerp. Hoewel we tegenwoordig veel met pure code kunnen bereiken, kunnen we absoluut niet alles wat u in Photoshop vindt, vertalen. Het is dus belangrijk om de "dos" en "don'ts" in gedachten te hebben wanneer u vertrekt.
Laten we beginnen met een kort overzicht van CSSHat en PNGHat, de Photoshop-plug-ins die we zullen gebruiken om onze CSS3- en Base64-code te genereren.
Met de CSSHat-plug-in geïnstalleerd, kunt u op elke laag in uw Photoshop-document klikken en het venster CSSHat zal onmiddellijk productieklaar-code voor u uitzenden.
CSSHat interpreteert voornamelijk vanuit je laagstijlinstellingen, dus je zou moeten proberen om je gradiënten en randen toe te voegen via laagstijlen in plaats van alle alternatieve methoden van Photoshop.
Accentsconagua
px (Optioneel)font-family, lettertypegrootte, lettertype-gewicht (vet / normaal), lettertype PNGHat kan veel dingen doen. Bekijk hoe u Photoshop-items voor het web kunt exporteren met PNGHat voor een volledig overzicht van de plug-in.
In het geval van deze tutorial gebruiken we deze om Base64-code te genereren die de achtergrondafbeelding van het ontwerp zal vormen. U zult zien hoe dit in de praktijk in de praktijk werkt.
Wanneer een afbeelding wordt geconverteerd naar Base64, krijgt u een tekstreeks die u direct in CSS kunt opnemen. Hoe meer gegevens er in de afbeelding staan, hoe langer de tekenreeks. Daarom is Base64 het meest geschikt voor eenvoudige naast elkaar geplaatste afbeeldingen met weinig kleuren.
Om de bal aan het rollen te krijgen, heb je een paar dingen nodig.
Om te beginnen moet u de CSSHat- en PNGHat-plug-ins hebben geïnstalleerd.
Als je geen kopie van CSSHat kunt kopen, kun je nog steeds meegaan en de ingebouwde "Copy CSS" -functionaliteit van Photoshop gebruiken, die je kunt selecteren in het contextmenu nadat je met de rechtermuisknop op een laag hebt geklikt.
In dit geval moet u echter handmatig ongewenste standaardcode verwijderen voor zaken als absolute positionering, z-index, dimensies en klassenamen. Het kan ook niet overweg met het genereren van meerdere schaduwen en gradiënten, evenals CSSHat, en het kan geen LESS, Sass / SCSS of Stylus-ready code produceren.
Als u PNGHat niet kunt kopen, kunt u uw achtergrondafbeelding handmatig exporteren en vervolgens via een online converter zoals: http://webcodertools.com/imagetobase64converter
Ik raad ten zeerste een derde plug-in aan van Source met de naam Subtle Patterns. Deze plug-in voegt een bibliotheek met honderden patronen toe aan Photoshop, die elk direct kunnen worden toegepast als een patroon-overlay op elke laag.
Als een alternatief voor het gebruik van de Subtiele Patronen-plug-in, kunt u gewoon door de patronen bladeren en ze gratis downloaden.
Notitie: Ik weet wat je je misschien afvraagt - dat is een heleboel dingen van Source, is dit een gesponsorde post? Nee. De waarheid is dat ik het hele assortiment van Source heb gekocht lang voordat ik begon te schrijven voor Tuts + en ik hou van elk van hen vanwege het enorme aantal uren dat ze hebben toegevoegd aan mijn dag. Ik raad deze plug-ins aan omdat ik zo enorm onder de indruk was van mijn eigen ervaring met de hele suite.
We plaatsen enkele pictogrammen in je ontwerp via Font Awesome, dus je moet het lettertype downloaden en op je systeem installeren.
Het lettertype bij uitstek voor onze reguliere tekst is Roboto, dus u moet dat ook installeren. Je kunt het pakken via Google Webfonts.
Maak een nieuw Photoshop-document met een grootte van 1.600 pixels X 2180px. Dubbelklik op de standaardlaag "Achtergrond" om deze te ontgrendelen en sla vervolgens uw PSD op.
In de Subtiele patronen venster, (of website), zoeken naar satijnbinding. Wanneer je het vindt, met jouw Achtergrond geselecteerde laag, klik op de tegel van het patroon om deze automatisch toe te passen als een patroon-overlay.
Je zou nu enkele subtiele grijswaarden verticale lijnen op je canvas moeten zien. We hebben dit patroon geselecteerd als een goede aanpassing voor de conversie naar Base64 omdat het maar heel weinig kleuren gebruikt en slechts 24 bij 12 pixels groot is, wat betekent dat het een relatief kleine codestring zal produceren.
Om de pagina te kaderen maak je een rechthoek bovenaan je canvas, die over de volle breedte loopt en 8px in hoogte. Geef het deze eigenschappen:
Opvulkleur: #dddddd
ondoorzichtigheid: 50%
Laagstijl> Inner Shadow:
normaal # c8c8c8 100% -90 2 4 Laagstijl> Slagschaduw:
normaal #ffffff 100% 90 2 1 Je "top trim" moet er als volgt uitzien:
Door dit menu te maken, zullen we enkele effecten zien die kunnen worden gecreëerd met hellingen, schaduwen en streken. We gaan voor een schoon uitziend menu dat op een inzetfolie zit.
Om te beginnen maken we de inzetwikkelaar die het menu vasthoudt. Maak een op het midden uitgelijnde, afgeronde hoekrechthoek op je canvas op 1200px breed door 61px hoog. Stel de volgende eigenschappen in:
Opvulkleur: # f9f9f9 - houd er rekening mee dat, hoewel er een verloop in deze rechthoek is, we nog steeds een vulkleur als terugval willen instellen.
Eigenschappen> Live Shape Eigenschappen> Hoekradius: 12px
Laagstijl> Inner Shadow:
normaal # 000000 15% 90 1 10 Laagstijl> Verloopoverlay:
#ffffff # f3f3f3 Lineair Laagstijl> Slagschaduw:
normaal #ffffff 100% 90 1 2 Uw menubundel moet er nu als volgt uitzien:
Maak een tweede afgeronde hoekrechthoek boven je menupadraam bij 1190px breed door 50px hoog, met de linkerbovenhoek 5px verder naar rechts en naar beneden dan de linkerbovenhoek van de menubalker. Voeg deze eigenschappen toe:
Opvulkleur: #ffffff
Eigenschappen> Live Shape Eigenschappen> Hoekradius: 10px
Laagstijl> Lijn:
1 buiten # e4e4e4 Laagstijl> Verloopoverlay:
# e5e5e5 #ffffff Lineair Laagstijl> Slagschaduw:
normaal # c1c1c1 100% 90 3 4 Je zou nu moeten hebben:
Maak een nieuwe rechthoek, deze keer om 130 x breed door 51px hoog, direct boven de balk "menuachtergrond". Geef dit deze verloopoverlay:
Laagstijl> Verloopoverlay:
#efefef # e4e4e4 #fcfcfc Lineair Voeg nu een plaatsaanduidingstekst toe: typ het woord "Pagina" en plaats het in het midden van uw menu-items met de volgende instellingen:
Teken> Lettertype: Roboto, normaal
Teken> Tekengrootte: 18px
Teken> Kleur: # 5c5c5c
Laagstijl> Slagschaduw:
normaal #ffffff 100% 90 1 0 Uw menu-item zou er als volgt uit moeten zien:
Maak een duplicaat van de rechthoek en de tekst van je menu-item en verplaats deze naar rechts zodat deze net naast je origineel zit. Bewerk de tekst om "Actueel" te lezen.
Stel de stijlstijleigenschappen van de rechthoek in op:
Laagstijl> Lijn:
1 buiten # e62d4ee4e4e4 Laagstijl> Inner Shadow:
normaal # faabb9 60% 90 3 5 Laagstijl> Verloopoverlay:
# ef3d5d # dc2345 # fc6c86 Lineair Laagstijl> Slagschaduw:
normaal # cc2241 100% 90 1 0 Wijzig vervolgens de instellingen voor tekstkleur en slagschaduw in:
Teken> Kleur: #ffffff
Laagstijl> Slagschaduw:
normaal # b50020 100% 90 1 0 Als je klaar bent met het bovenstaande, maak dan nog wat duplicaten van het originele "menu-item" en plaats deze rechts van het "huidige menu-item". We doen dit om te zien hoe de menu-itemstijlen eruitzien wanneer ze vlak tegen elkaar zitten, om te zorgen dat er voldoende visuele scheiding is tussen het ene item en het volgende item.
Helaas kan Photoshop op geen enkele manier iets als "border-left" instellen, zodat we de linker- of rechterranden niet rechtstreeks in rechthoekige menu-items kunnen plaatsen. We moeten het effect echter nog steeds simuleren, zodat we een scheiding tussen elk item kunnen creëren. Gebruik de lijntool van Photoshop om wat te tekenen 1px brede verticale lijnen tussen de menu-items en stel hun vulkleur in #dddddd
Met al deze elementen op de juiste plaats zou je moeten hebben:
Als u deze lay-out voor een client gebruikt, is dit het gebied waarin u hun belangrijkste interessehaak of call-to-action zou toevoegen. Voeg voor de doeleinden van deze tutorial de volgende vier regels toe, allemaal gecentreerd op de pagina:
Geef de eerste en derde regel de volgende instellingen:
Teken> Lettertype: Roboto, Thin
Teken> Tekengrootte: 48px
Teken> Kleur: # 6b6b6b
Geef vervolgens de tweede en vierde regel deze instellingen:
Teken> Lettertype: Roboto, vet
Teken> Tekengrootte: 80px
Teken> Kleur: # ef3d5d
Uw tekst zou er nu als volgt uit moeten zien:
Maak onder de hoofdtekst een afgeronde hoekrechthoek 1200px breed door 665px hoog. Geef het deze instellingen:
Opvulkleur: #ffffff
Eigenschappen> Live Shape Eigenschappen> Hoekradius: 15px
Laagstijl> Lijn:
1 binnen # d8d8d8 Laagstijl> Slagschaduw:
normaal # c1c1c1 27% 90 3 4 Dan, 60px onder de bovenkant van de paneelachtergrond, maakt u nog een afgeronde hoekrechthoek. Het zou moeten zijn 1230px breed en 70px hoog. Centreer het op het canvas zodat het uitsteekt 15px aan weerszijden van de achtergrond van het paneel. Geef het deze eigenschappen:
Opvulkleur: # ef3d5d
Eigenschappen> Live Shape Eigenschappen> Hoekradius: 10px
Laagstijl> Inner Shadow:
normaal # de2a4a 60% 90 0 5 Laagstijl> Verloopoverlay:
# ef2c4f # dc2345 # fc6c86 Lineair Laagstijl> Slagschaduw:
normaal # cc2241 100% 90 3 0 We hebben al een slagschaduw ingesteld op de rechthoek die we zojuist hebben gemaakt, waardoor het een subtiel 3D-effect krijgt. Maar we willen ook een tweede slagschaduw hebben die eruitziet als een echte schaduw geworpen door een downlight. Omdat we de eigenschap slagschaduw van de bestaande rechthoek al hebben "opgebruikt", moeten we een tweede rechthoek maken om een tweede schaduw toe te passen op.
Dupliceer uw paneelachtergrondrechthoek en sleep deze onder het origineel in uw lagenpaneel en wis vervolgens de bestaande laagstijl. Noem het "panelheadershadow", zodat je de twee lagen gemakkelijk van elkaar kunt onderscheiden. Geef het deze slagschaduw-instellingen:
Laagstijl> Slagschaduw:
normaal # 000000 27% 90 5 3 Rechtstreeks over het midden van de achtergrond van de paneelheader typt u "IN DEZE TUTORIAL:" en geeft u de tekst de volgende instellingen:
Teken> Lettertype: Roboto, normaal
Teken> Tekengrootte: 24px
Teken> Kleur: #ffffff
Laagstijl> Slagschaduw:
normaal # b50020 100% 90 1 0 Voeg ten slotte deze tekstregels toe:
Stel de eerste partij tekst in op:
Teken> Lettertype: Roboto, Thin
Teken> Tekengrootte: 36px
Teken> Kleur: # 6b6b6b
En de tweede partij tekst om:
Teken> Lettertype: Roboto, zwart
Teken> Tekengrootte: 48px
Teken> Kleur: # 6b6b6b
Markeer vervolgens elk van de "+" symbolen en stel hun kleur in op: # ef3d5d
U zou nu een infopaneel moeten hebben dat er zo uitziet:
Dit is waar we Font Awesome gaan gebruiken. We plaatsen het pictogram "fa-down-arrow" en gebruiken dat in plaats van een afbeelding.
De eenvoudigste manier om dit te doen is om de juiste "letter" in je cache te krijgen door naar de Font Awesome cheatsheet te gaan. Zoek het pictogram "fa-down-arrow", markeer vervolgens het kleine voorbeeld van de afbeelding en druk op CTRL / CMD + C
Markeer en kopieer de kleine pijl naar benedenGa terug naar je canvas, plaats een cursor met het tekstgereedschap en plak het teken dat je zojuist hebt gekopieerd. In eerste instantie zie je alleen een grappige kleine rechthoek met een kruis erin, dus verander je instellingen hier in:
Teken> Lettertype: FontAwesome
Teken> Tekengrootte: 200px
Teken> Kleur: # 6b6b6b
Zorg ervoor dat de pijl gecentreerd is op het canvas en stel de laagdekking in op 30%. Je zou nu deze cool uitziende pijl moeten hebben:
Maak een nieuwe afgeronde hoekrechthoek, 420px breed door 105px hoog. De knop gebruikt exact dezelfde laagstijleigenschappen als de "Paneelkopbalachtergrond", dus u kunt eenvoudigweg kopiëren over die laagstijlen. Klik met de rechtermuisknop op de laag van de achtergrond van uw paneelkop en selecteer "Laagstijl kopiëren", klik met de rechtermuisknop op uw nieuwe knoppenlaag en selecteer "Plak laagstijl".
Net als bij de achtergrond van de paneelheader, willen we een tweede rechthoek maken voor deze knop waarop een tweede slagschaduw kan worden toegepast. Dupliceer de laag van je knop en sleep deze onder het origineel in je lagenpalet, en hernoem hem dan "knopschaduw". Kopieer de laagstijl uit de "panelheadershadow" -laag die je eerder hebt gemaakt en plak deze in je nieuwe "knopschaduw" laag.
We gaan een kleine cirkel toevoegen aan de knop die eruit ziet als een kleine depressie, en dan zetten we een naar rechts wijzende witte pijl er bovenop.
Maak een cirkel (ellips) boven de knop bij 47px door 47px. Plaats het zo dat het op gelijke afstand van de boven-, linker- en onderrand van de achtergrond van de knop staat en geef deze overlay de kleurovergang:
Laagstijl> Verloopoverlay:
# f04f6c # e32d4f Lineair Om de juiste wijzende pijl te maken, gaan we FontAwesome opnieuw gebruiken. Ga terug naar de cheatsheet en kopieer deze keer de fa-caret-rechts icoon. Gebruik op het canvas de teksttool om een cursor over de cirkel te plaatsen die u zojuist hebt gemaakt en plak deze in het pictogram / teken Font Awesome. Geef het deze eigenschappen:
Teken> Lettertype: FontAwesome
Teken> Tekengrootte: 36px
Teken> Kleur: #ffffff
Plaats de nieuw gecreëerde witte pijl in het midden van de cirkel waar hij boven staat.
Bovenop de knop, rechts van de cirkel en de pijl, typt u 'Start de zelfstudie' en geeft u de tekst de volgende instellingen:
Teken> Lettertype: Roboto, normaal
Teken> Tekengrootte: 36px
Teken> Kleur: #ffffff
Deze tekst gebruikt dezelfde slagschaduw als de "Paneelkoptekst", dus u kunt de stijl van die tekst kopiëren en op deze laag plakken.
U zou nu een knop moeten hebben die er als volgt uitziet:
We gaan nu het laatste element van het ontwerp toevoegen, een deel aan de onderkant om de ruimte af te sluiten. Wanneer dit element is gecodeerd, gebruiken we afzonderlijke instellingen voor de boven- en onderrand, maar omdat Photoshop dit niet kan vergemakkelijken, gebruiken we opnieuw vormgereedschappen, zodat we de juiste kleuren op hun plaats kunnen krijgen.
Maak onder de startknop een rechthoek met een vulkleur van #dddddd dat is 5px hoog en strekt zich uit over de volledige breedte van de pagina. Dupliceer de nieuwe rechthoek en verplaats deze naar beneden 10px dus er is een 5px opening tussen de twee rechthoeken.
Teken in het midden van je canvas en boven de twee grijze lijnen / rechthoeken een cirkel die dat is 40px door 40px en geef het deze eigenschappen:
Opvulkleur: # f2f2f2
Laagstijl> Lijn:
5 binnen #dddddd Laagstijl> Verloopoverlay:
#dddddd # f2f2f2 Radial Besteed speciale aandacht aan de instellingen voor de verloopoverlay, omdat deze verschillen van de instellingen die we eerder hebben gebruikt. De kleurstops zijn geplaatst op 40% en 45% in plaats van 0% en 100%, en we gebruiken een radiaal verloop in plaats van lineair. Samen met de rand / streek geeft dit het effect van een kleine grijze cirkel omgeven door een grotere.
Je bodembedekking zou er als volgt uit moeten zien:
U zou nu een volledig PSD-ontwerp moeten hebben, 100% klaar voor vertaling in pure CSS3- en Base64-code:
In het volgende deel van deze tutorial:
ik zie je dan!
