Share
Niet alleen zijn aquarel penseelstreken een populaire trend geworden in modern webdesign, maar hebben ook geavanceerde lagen van transparantie (of wat ik noem, doorschijnendheid). Het nieuwe Envato-ontwerp heeft veel lof ontvangen voor het gebruik van dit effect, en deze tutorial zal je laten zien hoe je een soortgelijk effect kunt creëren, terwijl je het combineert met andere populaire webtrends.
Bekijk de afbeelding die we gaan maken.
Laten we ons document opstellen. Ik heb de neiging om mijn sites te maken met een vaste breedte van 960 px en variabele hoogte. Voor deze zelfstudie heb ik een hoogte van 800 pixels gekozen om ervoor te zorgen dat we genoeg ruimte hebben voor alle inhoudssecties die we zouden willen opnemen. Het originele document maken op de exacte grootte die u wilt, maakt het gemakkelijker om de handleidingen te maken.
Vervolgens stellen we onze gidsen op. Sleep richtlijnen van de documentlinialen naar de vier randen van uw document.
Nu moeten we wat ruimte toewijzen voor de achtergrond die we zullen maken. Ga naar Afbeelding> Canvasgrootte en vouw het document uit tot 1100 pixels bij 1000 pixels. Dit zou ons genoeg ruimte moeten geven om onze unieke achtergrond in te vullen.
Vul de onderste laag met wit (Shift + F5). Hernoem deze laag als 'achtergrond'. Uw document moet er nu uitzien als de afbeelding hieronder.
Klik met de rechtermuisknop op de laag "achtergrond" en kies Mengopties. We voegen een verloopoverlay toe aan onze "achtergrondlaag". Ik heb gekozen voor een driekleurengradiënt met wat blauw en bruin, maar je kunt in principe elke gewenste kleur kiezen. Het mooie van het gebruik van de overvloeiopties voor de achtergrond is dat je op elk moment eenvoudig kleuren kunt uitwisselen en de gradiënt naar smaak kunt aanpassen.
Uw document zou er nu als volgt uit moeten zien:
Misschien wil je deze stap overslaan, maar ik denk dat de scherpe helling iets te hoog is voor dit ontwerp. We voegen wat ruis toe om het een beetje af te stemmen.
Maak een nieuwe laag. Hernoem deze laag "ruis". Vul de laag vervolgens met wit (Bewerken> Opvulling). Zodra je de laag hebt gevuld met wit, moeten we wat ruis toevoegen door Filter> Ruis> Ruis toevoegen toe te passen. Stel de hoeveelheid in op 400%, met een uniforme verdeling en niet-monochroom. Alle kleuren van het geluid geven ons veel meer diepgang op onze achtergrond.
Zet de "ruis" -laag op Vermenigvuldigen en zet de dekking op 5%. Dit zou ons net genoeg moeten geven korreligheid om het verloop te verminderen.
Allereerst moet u een aantal penseelstreekborstels downloaden als u die nog niet hebt. Hier zijn enkele die ik in het verleden heb gebruikt: "Brush Stroke."
Maak een nieuwe laag, boven je lagen "achtergrond" en "ruis". Hernoem deze laag naar "brush1" (we maken meerdere lagen zoals deze). Zet deze laag op Vermenigvuldigen. Kies een warme voorgrondkleur (om de koele tonen te compenseren) in onze blauwe kleurverloopachtergrond. Ik koos voor een warm bruin: # 996726. Selecteer het penseel dat u wilt tekenen en plaats het linksboven in het document, zorg ervoor dat de penseelstreek buiten de grenzen van uw richtlijnen valt (we willen dat de achtergrond naar buiten wordt uitgebreid).
Pas de laagdekking aan tot 50% (zodat de korreligheid zichtbaar wordt). Herhaal de vorige twee stappen voor meerdere penselen naar uw smaak. Je achtergrond zou nu moeten lijken op de afbeelding hieronder.
Gefeliciteerd, je aangepaste, unieke achtergrond is voltooid. Aangezien u de penselen willekeurig hebt geplaatst, onderscheidt dit u van de ontwerpen die een soortgelijke aandelensachtergrond hebben gekocht.
Eerst moeten we het gereedschap Afgeronde rechthoek pakken en de straal instellen op 20 px. Vooral boven je achtergrondlagen (penselen + ruis + verloop), sleep en trek je een afgeronde rechthoek binnen de oorspronkelijke richtlijnen die we hebben opgesteld. Uw rechthoek moet 960 px bij 800 px zijn. Hernoem deze laag "container" en klik met de rechtermuisknop op de laag en selecteer Laag rasteriseren (we zullen deze laag later nog wijzigen, dus we kunnen dit nu net zo goed uit de weg ruimen).
Om de laag 'container' er ondoorzichtig uit te laten zien, moeten we een paar dingen doen:
Nadat u alle laagstijlen heeft ingesteld, ziet uw "container" -laag er als volgt uit:
Om ervoor te zorgen dat we blijven plakken met een consistente opvulling op de laag "container" (ervan uitgaande dat we onze pixels niet elke keer dat we een element plaatsen) willen tellen, voegen we hulplijnen toe met 40px in onze originele begeleidingsdoos.
Zoals u in het laatste voorbeeld hebt gezien, willen we ervoor zorgen dat de navigatie eruitziet zoals die is gezonken of uitknippen van de laag "container". Om dit te doen, zullen we een deel van de "container" laag verwijderen en de Layer Style's hun magie laten doen.
Om de selectie voor de uitsparing te maken, maken we een nieuwe rechthoekige vorm in de ruimte die we de navigatie-uitsnede willen laten zijn. Gebruik hier een straal van 10 px (dit is de helft van de straal van de laag "container"), om ervoor te zorgen dat de hoek een consistente tussenruimte heeft waar deze afgerond is.
Verplaats, indien nodig, de vorm naar de rechterbovenhoek van uw binnenste opvullijnen. Zodra u de laag op zijn plaats hebt, klikt u met de rechtermuisknop op de laag in het palet van de laag zodat deze wordt geselecteerd. Kies de laag "container" en klik op Verwijderen. Je kunt nu je 10px afgeronde rechthoek verbergen voor de navigatie, en je "container" -laag zal nu een uitsnede laten zien zoals hieronder te zien is.
Let op hoe glad de afgeronde hoeken zijn. Als we net een vierkant gebied zouden hebben geselecteerd en de selectie hadden afgerond, zouden de uitgesneden hoeken er erg schokkerig uitzien. Ook is het niet leuk hoe de Layer Style's automatisch op de laag worden toegepast en alle afgeschuinde vlakken en schaduwen die we hebben toegevoegd er geweldig uitzien.
Nu hebben we wat tekst nodig. Ik koos Rockwell als mijn lettertype (het wordt standaard geleverd met MS Office, maar kan ook worden gekocht). Verdeel uw navigatie-elementen gelijkmatig binnen de uitsparing zoals weergegeven.
We willen de tekst een geven geëtst in steen effect, en om dit te doen voegen we een slagschaduw toe aan de tekst (we zouden ook een innerlijke schaduw kunnen toevoegen, maar het maakt de tekst dunner dan hij in werkelijkheid is). Dit zijn de instellingen voor slagschaduwen die ik over het algemeen gebruik.
Om het gewenste effect te bereiken, maken we een nieuwe laag net onder de tekst die we hebben toegevoegd voor de navigatie. Hernoem deze laag "active nav." Vul deze selectie met elke kleur (het maakt niet uit).
Vervolgens moeten we enkele laagstijlen toevoegen aan de laag "actieve navigatie". Ik heb ze hieronder geleverd (je hebt een Slagschaduw, Verloop overlay, Slag en Innerlijke gloed nodig).
Dupliceer uw "actieve nav" -laag (Command + J) en maak alle laagstijlen plat. Hernoem deze laag "active nav flattened." We zullen enkele gewassen toepassen op deze laag en we willen de laagstijlen niet langer.
Gebruik uw selectiegereedschap om de lijn en de binnengloed te verwijderen aan de boven- en onderkant van de laag "actieve nav afgevlakt".
Nu moeten we de schaduwen toevoegen om de "actieve nav" -laag eruit te laten zien alsof het door de laag "container" is geweven. We maken deze schaduwen met behulp van de Ellipse Tool.
Maak een zwarte ellips die 20px breder is dan de breedte van de laag "active nav flattened" en ongeveer 5 px hoog. Centreer uw ellips op de bovenrand van de laag "actieve nav afgevlakt". Klik met de rechtermuisknop op de laag en selecteer Laag raster maken. Hernoem deze laag naar "top actieve schaduw."
We moeten de ellips een beetje vervagen, naar Filter> Vervagen> Gaussiaans vervagen gaan en toepassen met een straal van 2 px. Nu de ellips meer op een schaduw lijkt, gaan we door en verwijderen we de bovenste 50% van de schaduw.
Pas de dekking van de laag 'bovenste actieve schaduw' aan tot 75%. De bovenste schaduw is klaar. Als u de onderste schaduw wilt maken, dupliceert u de laag (Command + J), past u Bewerken> Transformeren> Verticaal omdraaien toe en verplaatst u de schaduw naar de onderkant van de "actieve nav-afgevlakte laag".
Voordat we bij het logo komen, laten we onze kop een beetje uitwerken. Eerst voegen we nog enkele handleidingen toe. Teken een horizontale gids 40px onder de onderkant van de navigatie-uitsnede, zoals weergegeven.
We gaan onze scheidingslijn maken, die de indruk wekt dat de "container" -laag een ets heeft of op deze plek is gevouwen. Om dit effect te creëren, tekent u een horizontale lijn van 1px hoog op een nieuwe laag die over de breedte van de laag 'container' loopt. Vul je horizontale lijn met een donkergroen (ik koos de mijne van de achtergrond). Hernoem deze laag "scheidingslijn".
Om het etsgevoel te krijgen, dupliceert u de laag met de "scheidingslijn" en vult u deze laag met wit. Verplaats deze laag 1px naar beneden zodat de bovenkant de originele laag "scheidingslijn" raakt.
Nu moeten we ons logo toevoegen. Ik ben niet zo'n logo-ontwerper, dus koos ik gewoon voor een cool lettertype (Gill Sans) en schreef ik een grote tekst in de linkerbovenhoek. Net zoals we de uitsnede voor de navigatie hebben gedaan, maak een selectie van de logotekst en verwijder deze vervolgens uit de laag 'container'. Opnieuw zullen de laagstijlen zich aanpassen aan de nieuwe vorm en er naar bijwerken.
Het sterretje is gemaakt met exact dezelfde techniek als het actieve navigatie-element, zodat het lijkt alsof het uit de laag 'container' steekt.
Nogmaals, we gaan dezelfde uitkniptechniek gebruiken die we gebruikten voor de navigatiesectie.
Maak een afgeronde rechthoek met een randradius van 10 px. Zorg ervoor dat er aan alle zijden een afstand van 40 px is toegestaan (we hebben eerder de handleidingen gemaakt om dit te helpen).
Command-klik op de afgeronde rechthoeklaag om deze te selecteren, selecteer vervolgens de laag "container" en klik op Verwijderen. U kunt de afgeronde rechthoek verwijderen, omdat we deze niet langer zullen gebruiken.
Vervolgens moeten we de pijlen aan elke zijde maken, zodat u meerdere portfolio-items op de voorpagina kunt hebben en er doorheen kunt bladeren in een soort diavoorstelling. Hiertoe maakt u een cirkel met een diameter van 40px met het vormgereedschap. Verplaats de cirkel op zijn plaats aan de linkerkant en centreer hem op de rand van de uitsparing.
Dupliceer de cirkel voor de andere kant en centreer deze nogmaals op de andere rand van de uitsparing (horizontaal en verticaal).
Omdat we hier niet met vectormaskers werken (en onze Fill is ingesteld op 0% op de laag 'container'), moeten we dit tijdelijk aanpassen om ervoor te zorgen dat we de laag 'container' kunnen toevoegen.
Laten we dus de laag Vul van de "container" instellen op 100%. Voeg nu beide cirkels die we voor de pijlen hebben gemaakt naar beneden samen (Command + E) in de laag 'container'. Als u eenmaal bent samengevoegd, kunt u de laag Vulling van de "container" terugzetten op 0%. Dit is het gewenste effect:
Merk op hoe de twee cirkels nu een deel van de laag "container" zijn geworden.
Vervolgens moeten we enkele pijlen toevoegen. Je kunt ze gemakkelijk met haakjes maken, maar ik heb ervoor gekozen om mijn eigen haakjes te maken.
Maak een afgeronde rechthoek met een randstraal van 3 px, breedte van 20 px, hoogte van 6 px; en plaats het recht boven waar je de pijl wilt. Transformeer en roteer (Command + T) de afgeronde rechthoek 45 graden tegen de klok in, zodat deze wordt gekanteld. Dit is hoe we het punt naar de pijl zullen wijzen.
Dupliceer de afgeronde rechthoek (Command + J) en Bewerken> Transformeren> Verticaal omdraaien. Verplaats de laag op zijn plaats, zodanig dat de linkerhoeken op één lijn liggen en een steun produceren. Selecteer in het lagenpalet beide afgeronde rechthoeken en voeg de lagen samen (Command + E). Hernoem de laag "linker pijl". Hier is hoe uw pijl eruit zou moeten zien:
We moeten enkele laagstijlen aan de pijl toevoegen om deze als volgt te laten passen in de rest van het ontwerp:
Dupliceer de laag "linkerpijl" (Command + J) en Bewerk> Transformeren> Horizontaal spiegelen. Hernoem deze laag "rechterpijl" en verplaats deze naar de rechterkant van de uitsparing.
Een laatste ding dat we moeten toevoegen voor ons gekenmerkte portfolio-itemsgebied is een schaduw om het wat diepte te geven. Voeg een transparant naar zwart verloop toe aan de onderkant van de uitsparing, zoals weergegeven.
Om een overschot buiten de uitsparing af te knippen, eenvoudig Command + Klik op de laag "container" en klik op Verwijderen. We plaatsen onze schermafbeeldingen onder deze laag om de illusie van diepte te geven.
Neem een screenshot van je favoriete site (ik gebruikte een van mijn eigen portfolio, ryanscherf.net). Hernoem deze laag "screenshot".
Voeg een lijn en binnenste schaduw toe aan de laag "screenshot" gebruik je laagstijlen:
Dupliceer de laag "screenshot" en maak alle laagstijlen plat (voeg de laag "screenshotkopie" samen met een nieuwe, lege laag). Draai de "screenshot kopie" laag 45 graden tegen de klok in, net zoals je deed voor de pijlen in stap 9.
Plaats het screenshot linksonder in de portfolio-uitsnede, zorg ervoor dat de bovenkant van het screenshot uit de uitsparing steekt (we geven het wat diepte) en het lijkt erop dat het achter de laag "container" ligt. Snijd het eventuele overschot van de "screenshot-kopie" vanaf de onderkant bij, zoals weergegeven.
Nu we onze schermafbeelding op zijn plaats hebben, kunnen we een korte beschrijving aan de rechterkant toevoegen. Niets bijzonders hier, maar toch proberen te blijven bij ons thema van diepte en lagen.
Maak wat tekst met een bijna witte (of heel lichtblauwe / groene) kleur. Gebruik dezelfde slagschaduw ets techniek uit de navigatie (hoek op -60 graden, afstand van 1px en grootte van 1px).
Maak een dekkend vierkant achter de tekst. Ik heb een volledig zwarte laag gebruikt met een dekking van 30%. Het effect zou er als volgt uit moeten zien:
We hebben enkele navigatiepunten nodig, zoals de iPhone-weergaven. We zullen één actieve punt maken, die exact dezelfde laagstijlen gebruikt als de "actieve nav" -laag (hopelijk heb je deze niet verwijderd), en een inactieve stip die de laagstijlen uit de laag "linkerpijl" gebruikt.
Opmerking: hergebruik van laagstijlen is niet alleen belangrijk omdat het tijd bespaart om soortgelijke stijlen opnieuw te maken, maar ook omdat het uw ontwerp consistent blijft.
Maak een cirkel met het Vormgereedschap, met een diameter van 20 px (ik vind mijn navigatiepunten groot, zoals ik soms vind dat ze te moeilijk zijn om te klikken en er doorheen te navigeren). Klik met de rechtermuisknop op de laag "actieve nav" en selecteer Laagstijl kopiëren. Selecteer de cirkel in uw lagenpalet, klik met de rechtermuisknop en selecteer Laagstijl plakken.
Herhaal deze stappen voor zoveel inactieve stippen als u wilt, waarbij u ervoor zorgt dat u de laagstijl gebruikt in de laag met de linkerpijl.
We moeten onze bezoekers precies laten weten wat we hier presenteren. We maken een lint met exact dezelfde techniek die we hebben gebruikt voor de laag "actieve nav", die hierboven in stap 7 werd beschreven.
Het enige verschil hier is dat ik een beetje hogere dekking voor de slagschaduw toevoeg om ervoor te zorgen dat het lijkt alsof het ver boven alle andere rust.
Om deze sectie af te maken, willen we onze "scheidingslijn" -laag dupliceren (Command + J) die we in stap 8 hebben gemaakt en deze 40 px onder de uitgesneden portfolio-items verplaatsen. Dat is het!
We maken eerst meer gidsen om ervoor te zorgen dat we drie gelijke kolommen hebben. Wees niet bang, maar we moeten hier wat rekenwerk doen:
960px brede site - 80px van de binnenbekleding = 880px beschikbare ruimte voor onze kolommen. We willen ook 40px padding tussen de kolommen toevoegen, dus in wezen hebben we 800px beschikbaar voor onze 3 kolommen.
800px gedeeld door 3 is gelijk aan 266px per kolom (ik koos mijn kolommen als 267px, 266px, 267px van links naar rechts om de balans te behouden). Teken de hulplijnen dus met deze intervallen, zodat u rekening houdt met de 40px padding aan elke kant van de middelste kolom.
Maak een nieuwe groep in je lagenpalet genaamd "Nieuwste van de blog". Dit is waar we alle lagen met betrekking tot deze sectie behouden.
Maak wat tekst voor de kop. Nogmaals, ik gebruikte het Rockwell-lettertype met dezelfde Layer Styles voor ets zoals ik gebruikte op de navigatie. In het geval dat u het bent vergeten, wordt dit beschreven in stap 6.
Selecteer een aangepaste vorm om elke zijde van de tekst te verankeren. Ik koos voor een standaard Photoshop-aangepaste vorm, maar er zijn letterlijk duizenden aangepaste vormen die u aan uw bibliotheek kunt toevoegen.
We moeten enkele laagstijlen aan de vormen toevoegen om ze een beetje meer 3D te laten lijken:
Het uiteindelijke product zou er ongeveer zo uit moeten zien als de volgende afbeelding.
We hebben hieronder wat tekst nodig voor onze blogposts. Zorg ervoor dat uw tekstkleur een lichte tint is van het blauw / groen van de achtergrond. We kunnen zoveel verschillende tinten van dit blauw / groen gebruiken als we willen, en het zal onze tekst zeker doen opvallen.
Om de tekst te laten lijken geëtst nogmaals, we gaan een beetje anders proberen met de vorige techniek. Voordat we een zwarte slagschaduw aan de linkerbovenkant van de tekst hebben toegevoegd, maar omdat we een beetje lichtere tekst gebruiken, zullen we onze slagschaduw toevoegen aan de rechterbenedenhoek, met behulp van wit. Je kunt het effect hieronder zien:
Ik heb de aangepaste, ronde vorm voor de kogels gebruikt en de laagstijl opnieuw gebruikt van de aangepaste vormen die we in de kop van dit gedeelte hebben toegevoegd.
Dit gedeelte zou vrij eenvoudig moeten zijn. Dupliceer de groep 'Nieuwste van de blog' en hernoem het duplicaat in 'Twitter-updates'.
Pas de tekst aan om meer indicatief te zijn voor een Twitter-update (links, vermeldingen, tijdstempel, enz.). Verplaats deze groep naar de middelste kolom - en je bent klaar!
Dupliceer de groep 'Twitter-updates' en hernoem deze in 'Nieuwsbrief'. Verplaats deze groep naar de kolom uiterst rechts.
Pas de inhoud aan als een beschrijvende alinea en verwijder alle kogels (inleidende alinea's hebben over het algemeen geen opsomming nodig).
Om het e-mailformulier te maken, maken we een afgeronde rechthoek met een grensstraal van 10 px en een hoogte van 40 px. De breedte moet 266 px zijn (of wat je ook kiest als de breedte van je rechterkolom). Hernoem deze laag naar "invoerformulier" en stel de laagstijlen als volgt in:
Ten slotte hebben we een knop nodig om het formulier in te dienen. We gebruiken onze laagstijlen uit de laag "actieve nav" voor de knop, omdat we dat consistente uiterlijk willen behouden voor al onze elementen.
Maak een nieuwe afgeronde rechthoek, hoogte van 40 px, breedte van 140 pixels en een randstraal van 20 px. Hernoem deze laag naar 'knop'.
Kopieer de Layer-stijl uit de "actieve nav" -laag en plak deze op de laag "Knop".
Dupliceer de tekst uit de navigatie (Command + J) en wijzig deze in 'Aanmelden'. Verplaats de tekst die moet worden gecentreerd in de knop. Het resultaat zou op de onderstaande afbeelding moeten lijken.
Cliënten zullen dit altijd aanvragen en u moet het altijd toevoegen. Buiten en onder je laag "container", voeg wat copyright-informatie toe. De ... gebruiken ets techniek opnieuw om het wat diepte te geven.
Ik hoop dat dit iedereen helpt nieuwe grenzen te verkennen met zijn eigen ontwerpen. Zoals je zag, zijn veel van de technieken die hier worden besproken eenvoudig, maar toch elegant; en moet eenvoudig in uw eigen ontwerpen kunnen worden geïmplementeerd.
Accentsconagua