Share
In deze tutorial zal ik enkele zeer eenvoudige technieken laten zien, gebruikmakend van gradiënten en laagstijlen, die we kunnen gebruiken om mooie subtiele 3D-effecten te produceren in onze webontwerpen.
Maak een nieuw document met 1000x750px. Dubbelklik op de achtergrondlaag en in Kleurbedekking en kies een donker bruin.
Schakel de linialen (Weergave> Linialen) in uw document in en voeg enkele hulplijnen toe, zoals hieronder wordt getoond. Maak 2 horizontale hulplijnen, de eerste om 30px en de tweede op 250px. Voeg daarna 2 verticale hulplijnen toe bij 100px en 900px.
Maak een rechthoek met de Rechthoekgereedschap (U). Gebruik de handleidingen als referentie. Hernoem de laag naar header ??.
Kiezen zwart voor je voorgrondkleur. Selecteer de Ellipse Tool en maak de vorm die de schaduw zal zijn. Maak het een beetje hoger dan de witte rechthoek zoals weergegeven. Hernoem de laag naar schaduw en zet het onder de hoofd laag.
Hierna converteer je het naar Slimme filters, toepassen van een Gaussiaanse vervaging en verander de dekking naar 60%.
Met de hoofd laag geselecteerd, dubbelklik erop om het te openen Laagstijl dialoog venster. kiezen Overlay met kleurovergang. Verander de verloopstijl naar radiaal. Voor de kleuren gebruikte ik donkere rode kleuren.
Selecteer vervolgens de Lijngereedschap (U) en kies de lichtere kleur van het koppenverloop en maak een lijn. Kies daarna zwart en maak een nieuwe regel op slechts 1 pixel boven de rode lijn. Selecteer de 2 regels en groepeer ze. Hernoem de groep de "vDivider".
Ga naar Laag> Laagmasker> Alles onthullen. De ... gebruiken Gereedschap Verloop, selecteer een radiaal verloop van zwart naar wit en pas een masker toe op onze groep. Start het verloop vanuit het midden van de groep.
Maak het menu met behulp van de Horizontaal tekstgereedschap (T). Gebruik wit voor de tekstkleur. Selecteer alle links en groepeer ze. Hernoem de groep Witte links ??.
Dupliceer de groep en plaats deze onder de witte koppelingen, verander de tekstkleur in zwart en verplaats de groep 1 pixel naar boven en naar links. Dat zorgt voor een mooi 3D-effect, precies zoals we deden met de lijnen.
Herhaal de Stap 6, maar creëer deze keer de horizontale verdelingen voor de links. Gebruik het lijngereedschap om een rode lijn te tekenen en 1 pixel links om een zwarte lijn te tekenen. Groepeer ze en dupliceer de groep 5 keer. Distribueer de groepen zoals hieronder getoond.
Selecteer alle groepen lijnen en groepeer ze. Hernoem de groep naarVerdelers ??. Breng daarna een laagmasker aan, Laag> Laagmasker> Alles onthullen. Maar gebruik deze keer Linear.
Open het patroonbestand, of pak een willekeurig patroon. Selecteer alles en ga naar Bewerken> Patroon definiëren. Noem het webPattern.
Dupliceer de koplaag ?? en hernoem het naar patroon. Ga naar de Layer Styles en schakel de Gradient Overlay uit en stel a in Patroon overlay. Kies de 'webPattern' die we hebben gemaakt en verander de Mengmodus naar kleuroverlay.
Breng daarna een laagmasker op de patroonlaag aan met behulp van a Radiaal verloop.
Nu kunnen we het logo en de lepel toevoegen.
Typ Psdtuts + voor de tekst, selecteer een vet lettertype voor de PSD en een normaal of licht voor de TUTS. Ga naar Laagstijlen en pas een toe Slagschaduw, Verloopoverlay en Lijn. Dat is een heel gebruikelijk en mooi effect.
Wanneer we met webontwerp werken, moeten we rekening houden met bestandsgroottes, compatibiliteit van browsers en vele andere problemen. Soms kunnen kleine details zoals subtiele hellingen of randen met 2 kleuren een heel mooi visueel effect of een unieke stijl creëren zonder dat er veel hacks en aanpassingen nodig zijn.
Accentsconagua