Share
Onscherpe achtergrondafbeeldingen zijn op dit moment een hot trend in webdesign en kunnen diepte en interesse toevoegen aan elk websiteontwerp. In deze tutorial zal ik je door alle stappen leiden om een opvallende visuele hero-eenheid te maken (lees: je belangrijkste marketingboodschap), perfect voor een diavoorstelling of bannerregio van je volgende website.
In deze tutorial zullen we ons concentreren op het gebruik van niet-destructieve, bewerkbare en schaalbare photoshop-technieken waar we maar kunnen, inclusief slimme filters, maskering en vectorvormen. Hoewel het een beetje meer werk kan zijn, is het de moeite waard om ervoor te zorgen dat uw eindproduct volledig kan worden bewerkt om te reageren op toekomstige wijzigingen..
Klaar om in te springen? Start Photoshop en laten we aan de slag gaan.
We zullen een aantal bronnen gebruiken die niet zijn opgenomen in de bronbestanden.
Notitie: Photoshop CS6 is gebruikt om deze zelfstudie te maken, maar het is niet nodig om het eindresultaat te bereiken, u kunt zonder problemen eerdere versies gebruiken.
Ik zit ook in een Windows-besturingssysteem, dus ik blijf bij Ctrl en Alt om sneltoetsen te beschrijven. Op een Mac, Ctrl → Command en Alt → Option.
Laten we beginnen met het opzetten van een nieuw document en het instellen van ons wereldwijde licht voor alle laageffecten.
Stel het Globale Licht in op een hoek van 90 ° en een hoogte van 45 ° (Laag → Laagstijl → Globaal Licht).
Notitie: Bij het ontwerp van de gebruikersinterface zult u merken dat het Globale Licht vaak op 90 ° is ingesteld, dus het wijzigen van de algemene instellingen voordat u begint met een nieuw UI-project, is een goede gewoonte om in te stappen!
Maak een nieuw document met afmetingen van 960px x 568px (een 16: 9-verhouding) en achtergrondinhoud van transparant.
Vervolgens zullen we onze achtergrondafbeelding importeren en de grootte ervan aanpassen aan het nieuwe document.
Open de afbeelding van het stadhuis in Toronto in een nieuw document en verander de afbeeldingsgrootte in 960px x 720px (Afbeelding → Beeldformaat).
Selecteer de volledige afbeelding (Ctrl + A), en kopieer het naar het klembord (Ctrl + C). Keer terug naar ons nieuwe document en plak de afbeelding in een nieuwe laag (Ctrl + V).
Gebruik de verplaatsingstool (V), sleep de afbeelding omhoog om de onderkant van de afbeelding uit te lijnen met de onderkant van het document.
Noem deze laag 'stadhuis'
Dupliceer de laag 'stadhuis' door met de rechtermuisknop op de laag in het lagenpaneel te klikken en te selecteren 'Duplicate Layer'. Hernoem deze nieuwe laag 'stadhuis vervagen'
Vervolgens voegen we een slim filter toe aan de laag. Om dit te doen, moeten we de 'City Hall blur'-laag omzetten in een slim object.
Klik met de rechtermuisknop op de 'city hall blur' laag en selecteer 'Converteren naar slim object' van het menu.
Laten we een Gaussiaanse vervaging toevoegen aan onze achtergrondafbeelding om het te geven dat 'door de koffiewinkelperiode' eruit ziet: (Filter → Vervagen → Gaussiaans vervagen). Geef het een straal van 14.0 pixels.
Notitie: Dit is de eerste van onze niet-destructieve technieken die we vandaag zullen gebruiken. Je merkt op de afbeelding hierboven dat de Gaussian Blur is toegevoegd als een 'Smart Filter' en niet wordt toegepast op de afbeelding zelf. Dat betekent dat we de instellingen kunnen wijzigen, extra slimme filters kunnen toevoegen of het effect helemaal kunnen verwijderen - alles zonder de originele afbeelding te beschadigen.
Een ander ding om op te merken is dat als je de zichtbaarheid van de laag 'stadhuis' wijzigt, er wat transparantie doorschijnt aan de rand van het beeld vanwege het vervagingseffect op de laag 'stadhuisonduidelijk beeld'. Het zichtbaar laten van de 'stadhuis'-laag maakt de randen mooi glad.
Zoals het is, is het beeld een beetje donker. Laten we dingen opfrissen en het een luminescent gevoel geven door een nieuwe aanpassingslaag voor curven toe te voegen (Laag → Nieuwe aanpassingslaag → Curven) en sleep de middelste hendel omhoog en iets naar links, zoals hierboven weergegeven.
Fantastisch werk - dat is de achtergrond helemaal af. Laten we een moment nemen om deze lagen naar een nieuwe groep te verplaatsen (Ctrl + G) genaamd "Achtergrond" om het Photoshop-document mooi en netjes te houden.
Maak een nieuwe laag met de naam 'onderste glaspaneel' en gebruik het selectiekader (M) om een rechthoekige selectie te maken van 960 px breed en 120 px hoog. Vul de selectie met wit (#ffffff) (Ctrl + Bkspace).
Dubbelklik op de laag om de laageffecten te openen en pas de volgende instellingen toe:
Zet in Blending Options de dekking op 27% en vul de dekking op 0%
Zet een inside 1px-streek, kleur #cecece.
Stel een witte (#ffffff) innerlijke schaduw in met een mengmodus ingesteld op Lineair ontwijken (toevoegen) en een dekking van 15%. Stel de afstand in op 1px en de grootte op 6px.
Stel een lineaire overgang van 90 ° in met een bereik van # 787878 bij 0% tot #ebebeb bij 100%. Wijzig de overvloeimodus in Luminosity en zet de dekking op 55%.
Het glazen paneel ziet er goed uit, maar we moeten een gedeelte van de bovenkant wegnemen om plaats te maken voor onze call-to-action-knop. Om dit te doen, zullen we een vectormasker gebruiken - een andere niet-destructieve en bewerkbare photoshoptechniek.
Open het padvenster (Venster → Paden) en klik op de 'Maak een nieuw pad' pictogram onderaan het paneel.
Hernoem het nieuwe pad 'paneelmasker'.
Het vormgereedschap gebruiken (U) ingesteld op Pad, maak een rechthoek van 960 px x 120 px aan de onderkant van het document, over onze laag met onderste glaspaneel.
Stel het vormgereedschap nu in op 'Voorvorm aftrekken' en teken een afgeronde rechthoek 420px x 100px met een straal van 50px.
Zodra u de twee paden hebt, selecteert u ze beide met de tool voor directe selectie (EEN) en houd Shift vast terwijl je op elk pad klikt. Gebruik het uitlijningshulpmiddel om de horizontale centra uit te lijnen en duw de afgeronde rechthoek op zijn plaats zodat de verticale middelpunten samenkomen met de bovenrand van de rechthoek, zoals hierboven weergegeven.
Zorg ervoor dat de laag 'onderste glaspaneel' is geselecteerd in het deelvenster Lagen en ons pad voor het 'paneelmasker' is geselecteerd in het deelvenster Paden.
Klik onder aan het padenvenster op 'Maak nieuw masker' pictogram eenmaal om een laagmasker te maken en klik er vervolgens opnieuw op om een vectormasker te maken dat een scoop uit ons onderste glaspaneel haalt. Je lagenpaneel zou er uit moeten zien als de afbeelding hierboven.
Notitie: Omdat we de tijd hebben genomen om vectorpaden te gebruiken om ons masker te maken in plaats van een rasterafbeelding te gebruiken, hebben we onszelf de mogelijkheid gegeven om ons masker op elk moment te wijzigen, te bewerken, toe te voegen en te schalen zonder kwaliteitsverlies in welk stadium dan ook.
Als alles volgens plan verloopt, moet je work-in-progress er ongeveer zo uitzien als de afbeelding hierboven.
Vervolgens maken we een achtergrond voor onze knop.
Maak een nieuwe laag (Ctrl + Shift + N) en noem het 'knoopachtergrond'. Gebruik het vormgereedschap ingesteld op 'Vorm' en maak een afgeronde rechthoek 410px x 90px met een hoekradius van 45px. Stel de vulling in op #ffffff.
Centreer de vorm in het midden van de 'schep' - laat 6 px tussen de onderkant van de vorm en de bovenrand van het 'onderste glazen paneel'.
Open het deelvenster met laageffecten voor de laag met achtergrondknoppen en stel de volgende laagstijlen in:
Stel in Blending-opties de dekking in op 20%, de overvloeimodus op Normaal en de vuldekking op 30%.
Stel de binnenschaduw in op een lineaire overvloeimodus (# 000000) met een dekking van 9%. Stel de afstand in op 1px en de grootte op 0px.
Stel een slagschaduw in met een mengmodus van Lineair ontwijken (Toevoegen), (#ffffff) en de dekking op 34%. Stel de afstand in op 1px en de grootte op 0px.
Vervolgens gaan we aan de knop zelf werken.
Maak een nieuwe laag met de naam 'hoofdknop'. Teken een afgeronde rechthoek met het vormgereedschap ingesteld op 'Vorm' 390 px breed bij 70 px hoog en een hoekradius van 35 px. Stel de vulling in op # 007dba.
Lijn de verticale en horizontale middelpunten van de lagen 'hoofdknoppen' en 'knoopachtergrond' uit.
Open het paneel met lageneffecten en pas de volgende instellingen toe:
Stel een 1px binnenlijnslag in met een overvloeimodus en een 90 ° lineair verloop dat loopt van # 000000 op 0% tot #ffffff op 100%
Stel een Inner Shadow (#ffffff) in met een mengmodus van Lineair ontwijken (Add) en een dekking van 7%. Stel de afstand in op 2px en de grootte op 1px.
Voeg een #ffffff-kleur toe Overmatig ingesteld op een lineaire ontwijkmodus (toevoegen) Mengmodus en kies de dekking naar 13%.
Stel de verloopoverlay in met een overvloeimodus van lineair branden, een dekking van 24% en een lineair verloop van 90 ° met # 000000 bij 0% en #ffffff bij 100%.
Stel de slagschaduw in met een mengmodus van vermenigvuldigen, een dekking van 30%, # 000000 en stel de afstand in op 2px en de grootte op 4px.
Notitie: Het is je misschien opgevallen dat we de overlay met kleurovergangen niet hebben ingesteld als donkerblauw tot lichtblauw (wat zou hebben geresulteerd in een vergelijkbaar effect). De reden voor het gebruik van een vorm en de zwart-wit lineaire branderovergang is dat we de kleur van de knop nu heel gemakkelijk kunnen veranderen door de vulling te veranderen. Probeer het nu en experimenteer met het veranderen van de vulling naar een andere kleur.
Om textuur aan de knop toe te voegen, voegen we een ruis-overlay toe.
Maak een nieuwe laag en noem deze 'ruis'.
Selecteer het volledige document (Ctrl + A) en vul de achtergrond met #ffffff (Ctrl + Bkspace).
Zorg ervoor dat je voorgrond is ingesteld op zwart en je voorgrond is ingesteld op wit (D), voeg 200% uniforme ruis toe, zorg ervoor dat het selectievakje 'Monochromatisch' is aangevinkt (Filter → Ruis → Ruis toevoegen ...).
Selecteer de laag 'Ruis' en stel deze in als knipmasker (Laag → Creëer knipmasker), die het geluid beperkt tot de vorm van de knop.
Zet de mengmodus van het knipmasker op vermenigvuldigen en de dekking op 5%.
De volgende stap is om een kleine markering aan de bovenkant van de knop toe te voegen (het zijn de kleine dingen die tellen).
Dupliceer de 'button main'-laag en sleep deze over het ruisknipmasker. Stel de vulling in op 0%.
Klik met de rechtermuisknop op de nieuwe 'markeerlaag' en wis de laagstijlen door te selecteren 'Clear Layer Style'.
Open het paneel met lageneffecten en pas de volgende instellingen toe:
Vink op het scherm Mengopties het selectievakje "Laagmasker effecten verbergen" aan.
Stel een 2px binnenlijnslag in op 0% dekking.
Notitie: Hierdoor wordt de volgende laagstijl effectief ingevoegd vanaf de rand van de knop.
Stel een binnenste schaduw in met een lineaire ontwijkingsmodus (toevoegen) Mengmodus, zet op 18% dekking en gebruik #ffffff.
Stel de afstand in op 4px en de grootte op 4px.
Selecteer de laag 'Markeren' en voeg een nieuw masker toe (Laag → Laagmasker → Alles onthullen).
Teken met het verloopgereedschap een lineair verloop over de knop, zoals hierboven weergegeven. Stel het verloop in met behulp van drie # 000000 stops, met de stop van 50% ingesteld op een dekking van 0%.
Als je het goed hebt gevolgd, ziet je knop er nu ongeveer zo uit:
Zonder een lichtbron ziet ons hoogtepunt er een beetje misplaatst uit. We voegen een leuk gloedeffect toe om de knop en de achtergrond op te heffen.
Maak een nieuwe laag en noem deze 'gloeien'.
Het verloopgereedschap gebruiken (G) stel in op radiaal en wit tot transparant, teken een groot wit verloop over de knop, zoals in de bovenstaande afbeelding.
Maak een selectiekader door Ctrl + te klikken op de miniatuur 'knopachtergrond' in het deelvenster Lagen.
Maak een laagmasker (Laag → Laagmasker; → Alles verbergen).
Wijzig tot slot de overvloeimodus van de 'glow'-laag in Linear Dodge en 50% dekking.
Nu de vorm van de knop is gemaakt, voegen we wat call-to-action-tekst toe.
Gebruik de handvatten van de knopvorm als referentiepunten door drie hulplijnen te slepen, zoals weergegeven, om u te helpen bij het plaatsen van de tekst- en pictogramvormen van de knop.
Gebruik het gereedschap Tekst (T), voer je tekst in het League Gothic-lettertype in met een tekenspatiëring van 60, lettergrootte van 14pt en een kleur van # dce2e5
Zet de tekst op de linker geleider en lijn de tekst uit met het verticale midden van de knopvorm.
Open het venster met laageffecten en pas de volgende effecten toe:
Zet een witte binnenste schaduw (#ffffff) met een mengmodus van 'Lichter' en een dekking van 100%. Stel de afstand in op 1px en de grootte op 0px.
Zet de slagschaduw op een mengmodus van 'Kleur branden', een kleur van # 00022a en een dekking van 24%.
Stel de afstand in op 2px en de grootte op 1px.
Om de knop te voltooien, moeten we het pictogram en een scheidingslijn toevoegen. Laten we beginnen met het pictogram.
Selecteer het gereedschap Aangepaste vorm (U), klik op de knop Instellingen en selecteer 'Load Shapes'.
Navigeer naar het bestand 'retro_hand.csh' dat wordt geleverd in de bronnen en laad het naar uw huidige lijst met vormen.
Maak een nieuwe laag en noem deze 'handpictogram'.
Zorg dat de handvorm is geselecteerd en zorg ervoor dat de instelling 'Gedefinieerde verhoudingen' wordt toegepast en teken een vorm van 19 px hoog en 34 px breed.
Vul de vorm met de kleur # dce2e5.
Open het paneel met laageffecten en pas de volgende effecten toe:
Stel een innerlijke schaduw in met een mengmodus van lichter (#ffffff) met een dekking van 100%. Stel de afstand in op 1px en de grootte op 0px.
Stel de slagschaduw in met een mengmodus van kleurverbranding met een kleur van # 00022a en een dekking van 24%. Stel de afstand in op 2px en de grootte op 1px.
De volgende stap is om een regel toe te voegen die het pictogram van de tekst scheidt.
Teken een 1px x 70px zwarte lijn met behulp van het vormgereedschap (U) en plaats deze in het midden van de ruimte tussen de tekst en het handpictogram (gebruik het infopaneel om je hier te helpen).
Pas de volgende laagstijlen toe:
Zet de vuldekking van de vorm op 0% en kruis het aan 'Laagmasker verbergt effecten' checkbox.
Stel de kleuroverlay in op een kleur van # 044b71, een overvloeimodus van overlay en een dekking van 73%.
Stel de verloopoverlay in op een lineair verloop van 90 ° met # 000000 op 0% en #ffffff op 100%. Zet de mengmodus op Lineair branden en verminder de dekking tot 9%,
Zet de Outer Glow op #ffffff, de mengmodus op het scherm, de dekking op 26% en de grootte op 1px.
Vervolgens hebben we een laagmasker nodig om de harde randen van de lijn uit te faden.
Voeg een laagmasker toe aan de laag 'lijnscheidingsteken' door op het pictogram 'Laagmasker' onder aan het deelvenster 'Lagen' te klikken.
Gebruik een zachte zwarte borstel (maat ~ 55px en 0% hardheid) om beide uiteinden van de lijn weg te schilderen. U wilt een subtiel fade-effect creëren. De gebieden in rood in de bovenstaande afbeelding kunnen als referentie worden gebruikt.
Super goed! We zijn nu klaar met onze knop. Laten we eens kijken naar wat we tot nu toe hebben gemaakt:
Voordat we verdergaan met de laatste stappen van het project, nemen we even de tijd om ervoor te zorgen dat al onze lagen mooi worden genoemd en gegroepeerd.
Je lagenpaneel zou er ongeveer zo uit moeten zien:
Snelle tip: Wilt u een eenvoudige manier om alle lageneffecten voor elke laag samen te vouwen? Groepeer de lagen en op de bovenste laag, Alt + klik op de pijl naast het fx-pictogram. Alle lageneffecten eronder zullen ook instorten - een geweldige manier om uw lagenpaneel beheersbaar te houden!
Laten we verder gaan met de typografiecomponent van het project.
Gebruik het gereedschap Tekst (T), voer de tekst in als twee afzonderlijke lagen met de hierboven getoonde instellingen.
Trek twee hulplijnen uit, één op 130 px vanaf de bovenkant van het document en de tweede op 258 px. Plaats de bovenste rand van de tekstlagen op de hulplijnen.
Selecteer beide lagen in het Lagenpaneel (Ctrl + klik), maak een selectie van het hele document (Ctrl + A) en lijn de horizontale centra uit (Laag → Lagen uitlijnen tot selectie → Horizontale centra).
Open nu het fx-paneel voor de laag 'Professional Services' en voeg de volgende effecten toe:
Stel de binnenschaduw in met een mengmodus van vermenigvuldigen, een kleur van # 585858 en een dekking van 54%.
Stel de hoek in op 135 ° (zorg ervoor dat Gloeilamp niet wordt losgelaten) en stel de Afstand in op 1px, Vernauwing op 100% en de Grootte op 0px.
Stel een innerlijke gloed in met een mengmodus van het scherm, een dekking van 59% en een kleur van #ffffff. Stel de choke in op 100% en de grootte op 1px.
Stel de verloopoverlay in met een mengmodus van lineaire verbranden, een dekking van 18% en een hoek van 90 °. Het verloop zelf is zwart → transparant zwart.
Stel een Slagschaduw in met een mengmodus van Lineaire Burn, een kleur van # 000000 en een dekking van 24%. Stel de afstand in op 2px, de spread op 8% en de grootte op 3px.
In het deelvenster Lagen beweeg je over het fx-pictogram van de laag 'professionele services' Alt + klik en sleep het pictogram naar de laag 'uitzonderlijke prijzen' om de laagstijl te kopiëren.
We zijn nu in huis! Laten we het typografische element van het project voltooien.
Maak een nieuwe laag en voeg het woord "Aan" toe met het gereedschap Tekst. Stel in het deelvenster Teken het lettertype in op Wisdom Script AI, de lettergrootte op 12pt en de kleur op wit.
Selecteer alle drie tekstlagen in het lagenpaneel (Ctrl + klik), overschakelen naar het gereedschap Verplaatsen (V), en gebruik de uitlijningsopties in de eigenschappenbalk om de lagen te centreren (Horizontale lagen uitlijnen) en voeg dan een even hoeveelheid ruimte toe tussen de drie regels tekst (Verticale centra distribueren).
Open het deelvenster met laageffecten en pas de volgende effecten toe:
Wijzig de vuldekking in het deelvenster Mengopties in 42%.
Voeg een witte (#ffffff) innerlijke schaduw toe met een gemengde modus ingesteld op scherm en een dekking van 22%. Stel de afstand in op 1px en de grootte op 0px.
Voeg een 90 ° lineaire gradientoverlay toe (#ffffff → #dedede) met een mengmodus ingesteld op Lineair ontwijken (toevoegen). Verlaag de dekking naar 16%.
Voeg een zwarte slagschaduw toe die de Lineaire Burn en een dekking van 8% instelt. Stel de afstand in op 1px en de grootte op 0px.
Laten we nu enkele decoratieve vormen toevoegen aan het tekstgedeelte van het project om alle elementen samen te voegen.
Sleep vier nieuwe hulplijnen uit de liniaal (als u de liniaal niet kunt zien, selecteert u Beeld → Linialen) en lijn ze uit met de randen van de tekst, zoals hierboven weergegeven.
Hiermee kunnen we onze staven in de volgende stappen uitlijnen.
Maak een nieuwe laag met de naam 'linker balken'.
Centreer uitgelijnd met de dwarsbalk van de 'A' in de 'At'-tekstlaag en teken een afgeronde rechthoek van 275 px breed bij 4 px hoog met een hoekradius van 4 px. Zet de vulling op wit (#ffffff).
Zorg dat de instelling van de vormcomponenten is ingesteld op 'Combineer vormen', trek twee meer identieke vormen uit en plaats een boven en een onder de eerste afgeronde rechthoek zoals hierboven weergegeven.
Verschuif de vormen in positie met behulp van de pijltjestoets om een opening van 2 px tussen elk van de vormen te plaatsen. Gebruik het zoomgereedschap (Z) en het pixelraster (Beeld → Tonen → Pixelraster) om je hier te helpen.
Zorg ervoor dat de groep vormen 10 px links van de geleider aan de linkerrand van de laag 'At' is geplaatst, zoals hierboven weergegeven.
Zoom dichtbij de linkerrand van onze vormgroep in (Z). Gebruik het gereedschap Direct selecteren (EEN), selecteer de drie eindhandvatten van de middelste rechthoek en houd Shift ingedrukt, druk twee keer op de linkerpijltjestoets om de breedte van de vorm met 20 px te verkleinen (Shift + pijl toets verplaatst elk element in stappen van 10px).
Herhaal dit proces voor de onderste rechthoek, maar beperk deze keer de breedte van de vorm met 30 px.
Tip: De eenvoudigste manier om de handvatten te selecteren, is om een vak rond het uiteinde van de vorm te slepen met het gereedschap voor directe selectie, zoals weergegeven in de afbeelding hierboven.
Open het deelvenster met laageffecten voor de vorm 'linker balken' en pas de volgende instellingen toe:
Stel in het deelvenster Mengopties de vuldekking in op 20%.
Stel een innerlijke schaduw in met een kleur wit (#ffffff), een mengmodus van het scherm en een dekking van 22%. Stel de afstand in op 1px en de grootte op 0px.
Voeg een lineaire lineair verloop van 0 ° toe aan Lineair ontwijken (Toevoegen) en een dekking van 16%. Zet het verloop met de waarden #ffffff op 0% en #dedede op 100%.
Voeg een slagschaduw toe met een afstand van 1px, een kleur van # 000000 en een mengmodus van lineaire verbranden. Zet de dekking op 9%.
Dupliceer de laag 'linker balken' (Rechtermuisklik → Dubbele laag ...) en noem de nieuwe 'juiste balken' van de laag.
Draai de laag horizontaal (Bewerken → Transformeren → Horizontaal spiegelen) en plaats de laag aan de rechterkant van de 'At'-laag zoals hierboven weergegeven.
Gefeliciteerd met het voltooien van deze tutorial! Schakel je gidsen uit (Ctrl + H), verklein de zoomlens naar 100% (Ctrl + 1) en bewonder je werk:
Laten we even stilstaan bij enkele van de belangrijkste technieken die we in deze tutorial behandeld hebben:
Bedankt dat je bij mij bent gebleven tot het einde en ik hoop dat je wat photoshoptrucs en workflowtips hebt opgepikt die je zullen helpen bij je volgende project. Als je een van de stappen hebt vergeten, krab je hoofd, laat hieronder een reactie achter - ik zal zeker vragen beantwoorden die je mogelijk hebt.
Accentsconagua