Share
Update: Coding tut nu beschikbaar! Vandaag gaan we je leren hoe je je eigen "sappige schuifregelaar met tabs" kunt maken. Dit is een geweldige manier om extra diepte en dimensie aan uw eigen ontwerpen toe te voegen - en het is de perfecte oplossing voor een afbeeldingsschuiver!
Coderingsupdate: Je kunt nu het volledige codeergedeelte van deze tutorial bij Nettuts pakken! Jullie hebben gevraagd, en dus ontvang je :)
En nu, voor iedereen die een play-by-play wil, is hier de volledige geschreven versie van de tutorial. U zult kleine veranderingen van de video opmerken (de video wordt on the fly gedaan), maar dezelfde basistechnieken zijn van toepassing op beide walkthroughs.
De afbeelding die voor de demo wordt gebruikt, is een exclusieve Envato Marketplace-achtergrond van reAdactor. Je kunt meer van deze coole wallpaper-afbeeldingen hier vinden!
We beginnen met ons a 600x400 px-document. Ik heb een lichtgrijze achtergrond toegevoegd met een subtiel rasterpatroon zodat we ons element net even beter kunnen zien als we het maken.
Begin met het tekenen van een eenvoudige rechthoek (ongeveer 450x270 px) op het tekengebied. We voegen een zeer lichte lijn om de rechthoek toe via het paneel met laagopties (Stroke = 1px Outside, # c8c8c8). De reden dat we deze streek toevoegen, is om een beetje scheiding tussen ons frame en de achtergrond toe te voegen? dit zal vooral belangrijk zijn als je op een witte achtergrond werkt.
Vervolgens beginnen we onze "schaduw" onder het frame. Begin met het eenvoudig pakken van je basispenseel en stel de grootte in op 40% en de hardheid op 0%. Start een nieuwe laag en houd de Shift-toets ingedrukt (om je lijn recht te houden) en teken een korte lijn (ongeveer de helft van de breedte van ons frame). Om dit perfect te krijgen doet er niet toe? we zullen de grootte aanpassen met behulp van de transformatietool in de volgende stappen.
Laten we nu de nieuw geborstelde laag HEEL lichtjes draaien; De hoek die ik gebruikte was 2,5, maar je kunt er zelf alleen voor knoeien. Hoe dieper de hoek, hoe meer "gebogen" de schaduw later zal verschijnen. U kunt ofwel Roteren of Vrije transformatie (Ctrl + T) gebruiken om de slag te slaan.
Dupliceer de eerste brushed in de "shadow" -laag (Ctrl + J) en draai deze vervolgens horizontaal (Bewerken> Transformeren> Horizontaal spiegelen). Het resultaat zou een schaduw moeten zijn die het tegenovergestelde is van de eerste.
Verplaats beide schaduwlagen achter de "kader" -laag en schaal ze (selecteer beide lagen en druk op Ctrl + T) zodat ze net binnen de totale breedte van de kaderrechthoek passen.
Voeg ten slotte beide schaduwlagen samen (Ctrl + E) samen en schuif de schaduwlaag naar de juiste plek (gebruik het basisselectiegereedschap [V] en gebruik het toetsenbord om te duwen). U kunt ook de dekking van de schaduwlaag aanpassen aan uw eigen persoonlijke voorkeuren. Ik heb ongeveer 50% gebruikt, je kunt meer of minder doen volgens wat je zoekt.
Bonus stap: Als je wilt, kun je nog meer aan de schaduw sleutelen met deze basistechnieken plus het filter "Gaussion Blur". Hoe vager de schaduw is, des te meer verspreid deze zal verschijnen. Je kunt ook sleutelen aan hoe de schaduw uitsteekt met de warp-tool.
Oke, nu hebben we onze basisachtergrond en schaduw. De volgende stap is om de binnenste "afbeelding" -laag te maken. Doe dit door een nieuwe rechthoek te maken (gebruik dezelfde laagstijl van lijn als de eerste) of dupliceer eenvoudig de originele laag en gebruik het gereedschap Punt converteren om aan elke zijde ongeveer 10 px te duwen.
U kunt de spatiëring uiteraard aanpassen aan uw eigen voorkeuren. Hoe meer ruimte, hoe groter de opvulling van uw kader later zal verschijnen. U kunt ook een grote ondervulling toevoegen om ruimte te besparen voor een afbeeldingstitel en -beschrijving.
Plaats vervolgens de afbeelding die u op het document wilt gebruiken (u kunt het uit een map slepen of het hulpmiddel Importeren gebruiken). U wilt de afbeelding schalen en positioneren over de laag met de "binnenste afbeelding" - en vervolgens uw afbeelding een uitknipmasker maken over dezelfde binnenste vormlaag. Je kunt er een knipmasker van maken door te klikken op de afbeeldingslaag en op "Creëer knipmasker maken" te klikken.
Voeg een lichte binnenste schaduw toe met behulp van het paneel Laagstijlen (dubbelklik op de vormlaag). De demo gebruikt de volgende instellingen:
Nogmaals, dit is een geval waarin je kunt sleutelen aan het effect om de resultaten te krijgen die je wilt. Een donkerdere schaduw maakt het beeld indrukwekkender en diepgaander. Een lichtere schaduw (of helemaal geen schaduw) maakt de afbeelding meer vlak.
Whallah!
De linker en rechter tabbladen aan de zijkant maken deel uit van de aantrekkingskracht van dit type schuifregelaar omdat ze net buiten het frame breken en een interessantere vorm aan onze schuif maken.
Begin met het tekenen van een cirkel (houd de Shift-toets ingedrukt om het een perfecte cirkel te houden wanneer u de Ellipse-tool gebruikt). De grootte moet ongeveer 60 px zijn (je kunt naar het infopaneel kijken terwijl je de cirkel tekent om te zien hoe groot de tekst daar is).
Voeg vervolgens een slag van 1 px toe met dezelfde kleur die we voor het achtergrondkader hebben gebruikt.
Als een bonus - voeg een lichte slagschaduw toe om de schaduw na te bootsen die we onder het frame hebben getrokken. De slagschaduw die we gebruikten was ongeveer 15% dekking, afstand 3 en maat 4. De hoek moet onze lichtbron in het midden van het frame weerspiegelen - dus in dit geval is het ongeveer 130 graden.
Voeg nu onze pijlen toe. U kunt een gewone Photoshop Shape of een ">>" tekstversie van de pijlen gebruiken met uw favoriete lettertype. Je kunt zelfs je eigen tekenen in Illustrator als je er de voorkeur aan geeft een echt unieke vorm te krijgen. In ons geval hebben we ">>" gebruikt met het lettertype Lucida Sans.
Sorteer vervolgens de vormlaag Cirkel en de pijllaag door beide te selecteren en op Ctrl + G te drukken.
Teken nu een masker over de groep zodat het lijkt alsof het amper ons frame overlapt. Om dit te doen: teken een rechthoekige selectie Selectieknop en druk vervolgens op de knop "Laagmasker toevoegen" wanneer u de groepsmap geselecteerd hebt.
Het geweldige aan dit "groepsmasker" is dat het ook alle laagstijlen maskeert. Als we zouden proberen de cirkel zelf te maskeren, zouden de lijn en schaduw ook worden bijgesneden, waardoor ze zichtbaar worden over het frame (wat we niet willen).
Ten slotte, dupliceer gewoon de knopgroep en draai deze horizontaal om. We verplaatsen de positie naar de linkerkant van het document. De enige echte tip hier is dat we ook de hoek van de slagschaduw tot ongeveer 50 graden moeten aanpassen om overeen te komen met onze lichtbron in het midden van het frame. Zorg ervoor dat u de selectieoptie Gloeilamp uitschakelt om ervoor te zorgen dat u de andere schaduw niet aanpast.
Het laatste element in deze schuifregelaar is de kleine "cirkelknopmodule" die laat zien hoeveel afbeeldingen u in uw dia hebt.
Begin met het maken van een eenvoudige 13px-cirkel (houd nogmaals Shift ingedrukt om het perfect te krijgen). We willen een extra slag van 1 px toevoegen aan de buitenkant met dezelfde kleur als alle voorgaande slagen (# c8c8c8 voor de demo).
Voeg als laatste een heel subtiel verloop toe over de cirkel (lichtgrijs [# D9D9D9] mengt naar wit aan de bovenkant). U kunt de inkleuring van het verloop aanpassen aan uw voorkeuren, maar het idee hier is om de cirkel meer op een knop te laten lijken die de gebruiker kan indrukken.
Dupliceer de originele cirkel nog een paar keer en duw ze naar de zijkant (je zou zoveel cirkels moeten hebben als je afbeeldingen in je dia hebt).
Die cirkels zijn nu heel moeilijk om te zien? dus laten we een achtergrond toevoegen zodat ze een beetje beter zichtbaar zijn op lichte afbeeldingen.
Begin met het tekenen van een afgeronde rechthoek met een straal van 10px (je kunt de straal aanpassen aan je eigen verlangens). Stel vervolgens de vulling in op 50% om deze ietwat doorzichtig te maken.
Stel ten slotte een 2px-streek (# a7a7a7) in met een dekking van ongeveer 50% om deze ook transparant te maken. Het uiteindelijke effect moet een transparante afgeronde rechthoek met een subtiele rand zijn.
Laatste stap! Voeg een kleinere cirkel toe over een van de originele cirkels en plaats deze in het midden. Pas de kleur aan (u kunt een verloop of effen kleur gebruiken) aan uw eigen merkkleuren. U zult opmerken dat we in de demo dezelfde kleuren hebben gebruikt die we gebruiken in het Webdesigntuts-logo.
Goed werk! Nu u de basisinstelling voor de schuifregelaar hebt, kunt u de grootte eenvoudig aanpassen aan uw eigen projecten. U kunt dit ook herhalen om verschillende kleurenachtergronden, gerestylede knoppen of zelfs texturen aan het frame zelf toe te voegen. De limiet is echt aan jou - houd gewoon de basisprincipes in gedachten die we hier hebben ingesteld en je zult het goed doen.
Accentsconagua