Share
In deze zelfstudie van Photoshop leren we hoe we een web 2.0-lay-out kunnen maken. Naarmate we de zelfstudie doornemen, zullen we met zo veel Photoshop-technieken omgaan. Lijkt het een beetje lang? dat komt omdat het erg gedetailleerd is. Ik verzeker u dat u het gemakkelijk zult vinden om te volgen en om het voor elkaar te krijgen, probeer het gewoon!
Om alles op één lijn te houden, gebruiken we 960s Grid System (download het hier) download het bestand "960_grid_24_col.psd" eenmaal gedownload.
We beginnen met het maken van laag op achtergrond, klik met de rechtermuisknop op de laag "Achtergrond" en kies vervolgens Laag van achtergrond. en noem het "bg".
Omdat we zo veel gidsen gebruiken, moeten we onze linialen bekijken. Ga hiervoor naar Beeld> Linialen.
We moeten de ondergrenzen voor het kopgebied instellen, daarom slepen we na 100px een nieuwe horizontale hulplijn. ga naar Beeld> Nieuwe gids, Positie: 100.
Laten we onze kop maken. we beginnen met het maken van een selectie van 1020x100 px. klik vervolgens op Shift + Backspace om het te vullen (met elke kleur net voor nu).
Geef het een verloopoverlay op basis van de volgende afbeelding:
Bel nu deze laag: "header_bg".
Schrijf de titel van uw website met deze instellingen:
Voeg nu een verloopoverlay toe aan uw tekst met de volgende instellingen:
De titel van uw website afstemmen op de achtergrond van de koptekst; Selecteer je titellaag en "header_bg" laag en klik vervolgens op Uitlijnen van verticale centra.
Schrijf uw navigatietekst met deze instellingen:
Maak een afgeronde rechthoek die een zwevende link vertegenwoordigt. het zou ongeveer 65x35px grootte moeten zijn - 5px radius, (vul het nu met elke kleur).
Geef het een lijn- en verloopoverlay volgens de volgende afbeelding:
Voordat we naar de volgende stap gaan, zorg er dan voor dat je je lagen overzichtelijk houdt, zo ziet de mijn eruit!
Het is tijd om het gebied met aanbevolen ontwerpen te maken. we beginnen met het instellen van onze ondergrenzen door een nieuwe horizontale gids toe te voegen na 430px.
Maak een selectie van 1020x430 px als achtergrond voor het gebied met aanbevolen ontwerpen. en vul het met elke kleur.
Geef het een Gradient Overlay met de volgende instellingen:
Laten we nu het glazuureffect creëren! maak een selectie van 1020x120 px, vul deze met elke gewenste kleur.
En voeg vervolgens een verloopoverlay toe. gebruik de afbeelding hieronder voor referentie.
Verlaag nu de laagdekking naar 40%
Laten we wat extra's toevoegen! met de Single Row Marquee Tool maak je een 1px selectie en lijn je het uit zoals het volgende:
Zet je voorgrondkleur op # acd86e en klik dan op Shift + Backspace om hem te vullen; zorg ervoor dat je voorgrondkleur gebruikt als vullingsoptie.
Ik garandeer je dat je perfecte pixeldetails hebt
We zijn klaar met het maken van de achtergrondelementen. dus zorg ervoor dat je ze ideale namen geeft, organiseer ze en groepeer ze samen.
Laten we nauwkeuriger zijn! sleep twee nieuwe hulplijnen volgens de volgende afbeelding
Schrijf enkele gastvrije woorden met deze instellingen:
Ik heb persoonlijk geschreven: "Dit is ons gloednieuwe werk Oeps welkom!" ;) maar we moeten het woord "Welkom!" op de een of andere manier. dus eigenlijk geven we het een Gradient Overlay. vervolg met de afbeelding
Versleep nu twee nieuwe horizontale hulplijnen volgens de volgende afbeelding
Voordat we deze stap vaarwel zeggen, moet je ervoor zorgen dat je je tekstlagen ordent.
Begin met het maken van een selectie van 250x150 px (vul deze met elke kleur), dit zal onze beeldhouder zijn.
Noem deze laag "pic_holder" en probeer het uit te lijnen zoals de afbeelding hierboven.
En geef het een slag
Laten we een afbeelding van een aanbevolen ontwerp toevoegen, ga hiervoor naar Bestand> Plaatsen en selecteer een afbeelding. noem zijn laag "pic", en zorg ervoor dat het recht boven de laag "pic_holder" staat.
Klik met de rechtermuisknop op de laag "pic" en kies Create Clipping Mask.
Om onze schaduw te maken, beginnen we met het dupliceren van de twee lagen "pic" en "pic_holder".
Terwijl de twee gedupliceerde lagen geselecteerd zijn, ga je naar Bewerken> Vrije transformatie en pas je de hoogte aan naar: -100.0%
Terwijl we de twee gedupliceerde lagen nog steeds selecteren, klikt u er met de rechtermuisknop op en kiest u Convert to Smart Object; noem deze laag "schaduw". en zorg ervoor dat je het onderaan plaatst.
Selecteer de laag "schaduw" en klik vervolgens op Laagmasker toevoegen (onderaan het lagenpaneel)
Kies het gereedschap Verloop (G) en sleep met een zwart-wit lineair verloop van beneden naar boven.
Je zou zoiets moeten hebben!
We moeten een beschrijving toevoegen aan onze afbeelding. dus we maken een selectie van 240x25px en vullen het met deze kleurwaarde: # 1a1919, dit zal werken als achtergrondbeschrijving.
Schrijf een beschrijving met deze karakterinstellingen:
Zorg ervoor dat uw document netjes blijft!
Maak nog een kopie van de afgebeelde ontwerpafbeelding en lijn deze naar rechts uit.
We maken de middelste afbeelding een beetje groter, dus maak een selectie van 340 x 200 pixels, lijn deze uit zoals hieronder en vul deze met elke gewenste kleur.
We zullen het ook een slag geven. gebruik de volgende afbeelding voor referentie
En hier is wat we hebben!
Zorg ervoor dat je je lagen ordent en groepeert. Ik heb persoonlijk drie afzonderlijke groepen gemaakt. hier zien ze eruit
Laten we onze schuifknop maken! we beginnen met het creëren van een ellips van 50x50px met behulp van de Elliptical Marquee Tool (M) en vullen het met elke kleur.
Geef het nu een aantal laagstijlen volgens de volgende afbeelding
Maak met het aangepaste vormgereedschap (U) een pijl en geef deze de volgende laagstijlen
Je zou zoiets moeten hebben
Vergeet niet om uw knop uit te lijnen volgens de volgende afbeelding
Maak nog een kopie van de pijl en lijn deze naar rechts uit
Laten we werken aan het inhoudsgebied. begin met het maken van een selectie van 1020x815 px
Klik op Shift + Backspace om je selectie met deze kleur te vullen: # e8e8e8
Met het gereedschap Een rij selectiekader (M) maakt u een selectie van 1 px, plaatst u deze als de volgende afbeelding en vult u deze met wit (#ffffff).
Nu heb je perfecte pixeldetails!
We moeten de bovengrenzen instellen voor ons inhoudsgebied. daarom gaan we na 50px een nieuwe horizontale gids slepen.
Download deze Icon set: Basic Set - Pixel Mixer en plaats als volgt.
Versleep een nieuwe horizontale gids onder aan het pictogram, laat 20px staan en sleep een nieuwe.
Schrijf nu een kop met deze instellingen:
Sleep nog twee andere hulplijnen volgens de volgende afbeelding
Schrijf wat tekst met deze instellingen:
Versleep meer drie hulplijnen volgens de volgende afbeelding
Het is tijd om onze knop "Lees meer" te maken. Maak met de Afgeronde Rechthoek-tool (U) een rechthoek met een straal van 100x30px en 5px. en vul het voor nu met elke kleur.
Geef deze rechthoek enkele laagstijlen. gebruik de afbeelding hieronder voor referentie.
Maak met de Ellipse Tool (U) een ellips van 15x15px en vul deze met deze kleurwaarde: # 4d4d4d.
Om het correct uit te lijnen, selecteert u de laag en de laag van de rechthoek en klikt u vervolgens op Verticale centra uitlijnen terwijl beide lagen geselecteerd zijn.
Type "+", vul het met wit (#ffffff) en plaats het als volgt
Schrijf het woord "lees meer" met de volgende tekeninstellingen:
Geef het een slagschaduw. gebruik de afbeelding hieronder voor referentie
Als u een verticale scheidingslijn wilt maken, maakt u met het lijntool (U) twee verticale lijnen naast elkaar. en vul ze met deze waarden: #ffffff - # b3b3b3.
Lijn uw lijn uit zoals de volgende afbeelding
Vergeet niet om je lagen te ordenen. kijk naar de mijne!
Maak drie kopieën van wat we in de vorige twee stappen hebben gemaakt. en heb zoiets als dit!
Laten we onze separator maken.
Sleep een nieuwe horizontale gids na 50px
Maak met de Elliptical Marquee Tool (M) een selectie zoals hieronder.
Zet je voorgrondkleur op zwart (# 000000) en klik vervolgens op Shift + Backspace om je selectie te vullen. noem deze laag "separator_bg".
Om het wazig te maken, ga je naar Filter> Blur> Gaussian Blur - radius: 3px.
Terwijl u de laag "separator_bg" selecteert, maakt u een selectie zoals hieronder en drukt u op delete.
Klik op het pictogram Laagmasker toevoegen. en stel je verloopeditor in op zwart, wit, zwart.
Sleep met het gereedschap Verloop (G) met een lineair verloop volgens de volgende afbeelding.
Verklein de laagdekking tot 50%
Maak met het lijngereedschap (U) twee horizontale lijnen bovenop elkaar en plaats ze recht boven het scheidingsteken.
Vul ze met # b3b3b3 - #ffffff en voeg hetzelfde laagmasker eraan toe.
We gaan aan onze lagere inhoud werken door een nieuwe gids na 50px te slepen.
Voeg een titel toe met deze karakterinstellingen:
Versleep twee nieuwe horizontale hulplijnen volgens de volgende afbeelding.
Schrijf wat tekst met deze karakterinstellingen:
Sleep een nieuwe gids na 160px als een onderrand voor het inhoudsgebied.
Schrijf een andere titel en tekst met dezelfde tekeninstellingen die we in de vorige stap hebben gebruikt.
Typ een aanhalingsteken op uw toetsenbord met deze tekeninstellingen:
En verminder de dekking van de laag tot 50%
Schrijf een wijs woord of citaat van jezelf met deze karakterinstellingen:
Als u een verticale scheidingslijn wilt maken, maakt u twee verticale lijnen naast elkaar en vult u deze waarden in: #ffffff - # b3b3b3.
Zorg ervoor dat je je laag georganiseerd houdt, zo heb ik ze georganiseerd.
Schrijf nog een andere titel, zoals de titels aan de linkerkant (probeer iets te schrijven dat het team vertegenwoordigt, bijvoorbeeld ik heb 'Ons team' geschreven).
Gebruik het gereedschap Rechthoek (U) om een rechthoek van 90x90px te maken en vul deze met elke gewenste kleur. noem deze laag "photo1_holder"
Dit werkt als een houder voor een foto van een teamlid. Geef het nu een slag. Gebruik de afbeelding hieronder voor referentie.
Plaats een foto van een lid en noem de laag "foto1". Zorg ervoor dat de laag "photo1" zich net boven de laag "photo1_holder" bevindt. klik vervolgens met de rechtermuisknop op de laag "photo1" en kies Maak knipmasker. Je moet iets bedenken als hieronder!
Schrijf wat tekst over het lid, met behulp van deze karakterinstellingen:
We maken de social media-pictogrammen zelf! laten we beginnen met Twitter, typ "t" -letter met deze karakterinstellingen:
Geef het dan een slag volgens de volgende afbeelding.
Laten we de LinkedIn-een maken! Typ 'in' woord met deze tekeninstellingen:
Facebook !? Typ "f" letter met deze karakterinstellingen:
Maak nog een kopie van de ledenfoto. tijdens het selecteren van de fotolaag, ga naar Laag> Nieuwe aanpassingslaag> Zwart-wit.
Zorg ervoor dat u "Gebruik vorige laag om knipmasker aan te maken" aanvinkt
Typ dezelfde tekst, sociale media letters die we eerder hebben geschreven, gebruik dezelfde karakterinstellingen, maar geef ze al deze kleurwaarde: # 505150.
Het lid ziet er dus duidelijk grijs uit als het niet zweeft!
Maak twee kopieën en lijn ze op deze manier uit
Om ervoor te zorgen dat ze goed uitgelijnd zijn, maak je vier afzonderlijke groepen die elk de inhoud van een lid bevatten en klik je op Linkse randen distribueren in de bedieningsbalk terwijl de vier groepen geselecteerd zijn.
Ik heb mijn lagen georganiseerd, jij?
Voordat we gaan werken aan het gebied met links naar sociale media, moeten we een aantal grenzen instellen. Daarom slepen we twee nieuwe hulplijnen volgens de onderstaande afbeelding!
Maak een selectie van ongeveer 940x70px en lijn het uit zoals de afbeelding hieronder.
Vul het met elke kleur en geef het een Verloopoverlay. gebruik de afbeelding hieronder voor referentie.
Maak een rechthoek van 70x45px. gebruik de onderstaande afbeelding om het uit te lijnen en het een aantal laagstijlen te geven. noem deze laag "tw_bg"
Verberg de laag "tw_bg" om vrij te werken.
Maak nog een rechthoek van 10x43px en ga naar Bewerken> Transformeer paden> Schuintrekken. pas deze opties aan in de bedieningsbalk:
Noem deze laag "effect" en maak de "tw_bg" laag weer zichtbaar.
Kopieer de laagstijl van de "tw_bg" laag en plak deze in de laag "effect".
Schrijf een "t" -letter met deze karakterinstellingen:
Geef het ook enkele laagstijlen volgens de volgende afbeelding.
Herhaal stap 20 om een ander scheidingsteken te maken of het te kopiëren. plaats het dan op deze manier:
We moeten het rechterdeel van de rechthoek doorsnijden, nietwaar ?! om dat te doen selecteert u de laag "tw_bg" en klikt u op Laagmasker toevoegen.
Maak een selectie over het rechterdeel (dat we moeten knippen) van de rechthoek, zet je voorgrondkleur op zwart (# 000000) en klik dan op Shift + Backspace om het te vullen.
Schrijf wat tekst - wat eigenlijk een Tweet zou moeten zijn - met deze karakterinstellingen:
Als u de tekst goed wilt uitlijnen, klikt u terwijl u de tekstlaag en de groene balkenlaag hebt geselecteerd op Uitlijnen van verticale centra.
Herhaal stap 27 om iets te maken zoals in de onderstaande afbeelding. Maak ook een rechthoek, vul deze met # 334814 en verminder de laagdekking naar 40%.
Geef de grote rechthoek enkele laagstijlen volgens de volgende afbeelding
Vul nu de scheve rechthoek met een donkerdere kleur van deze waarde: # 2a6788
Schrijf een "t" -letter met deze karakterinstellingen:
En geef het een slag. gebruik de afbeelding hieronder voor referentie
Zorg ervoor dat je je lagen ordent en ze samenvoegt.
Maak nog een kopie van het Twitter-pictogram, verander de kleuroverlay (voor de grote rechthoek) in: # 0080ab en vul de schuine rechthoek met deze kleurwaarde: # 00526d.
Schrijf het woord 'in' met deze tekeninstellingen:
Maak een derde exemplaar van het Twitter- of LinkedIn-pictogram, verander de kleuroverlay (voor de grote rechthoek) in: # 395796 en vaag de schuine rechthoek op met deze kleurwaarde: # 263e6f.
Schrijf een "f" -letter met deze karakterinstellingen:
Maak een laatste kopie, verander de kleuroverlay (voor de grote rechthoek) in: # e8e8e8 en vul de schuine rechthoek met deze kleurwaarde: #cdcdcd.
Schrijf het woord "fr" met deze karakterinstellingen:
Plaats elk van de pictogrammen in een afzonderlijke groep en klik tijdens selectie op Vier om de linkerranden te distribueren .
Blijf het doen! alleen het voetje links. Maak een selectie van 1020x460 px en vul deze voor nu met elke gewenste kleur.
Pas er een verloopoverlay op toe. gebruik de afbeelding hieronder voor referentie.
Je zou een mooie schaduw moeten hebben!
maak met de Single Row Marquee Tool (M) een 1px selectie en vul deze met wit (#ffffff).
Versleep twee nieuwe horizontale hulplijnen volgens de volgende afbeelding.
Schrijf een titel met deze karakterinstellingen:
Schrijf een ondertitel met deze karakterinstellingen:
Gebruik het lijngereedschap (U) om twee horizontale lijnen boven elkaar te maken en vul ze met deze kleurwaarden: # 151515 - # 2f2f2f.
Lijn het op deze manier uit.
Versleep twee nieuwe horizontale hulplijnen volgens de volgende afbeelding.
Maak met het gereedschap Rechthoekige rand (U) twee rechthoeken van 210x25px - 5px radius, vul ze met: # 141313 en geef ze een innerlijke schaduw.
Schrijf wat tekst in de twee rechthoeken met deze tekeninstellingen:
Maak een andere rechthoek zoals hierboven, maar deze keer is de hoogte: 110 px. Schrijf ook wat tekst erin met dezelfde tekeninstellingen hierboven.
Maak een kopie van de knop die we in stap 17 hebben gemaakt en lijn deze uit zoals de volgende afbeelding
Schrijf een andere titel zoals die aan de linkerkant.
Schrijf wat tekst. gebruik de afbeelding hieronder voor referentie.
Maak twee kopieën van wat je hebt gedaan.
Vul het rechterdeel met een derde titel en wat tekst.
Nu zou je voettekst er zo uit moeten zien.
Accentsconagua