Share
Met de vakantie om de hoek, hoewel het misschien leuk is om een tutorial te maken over het populaire 3d Wrap-around-linteffect dat dit jaar zo vaak opduikt. Dit is een geweldige manier om diepte toe te voegen aan je ontwerpen en het is vrij eenvoudig om te voltooien. Ik zal je een aantal voorbeelden ervan in actie op het web laten zien, je door de creatietechnieken in Adobe Photoshop leiden en vervolgens de verschillende benaderingen voor het coderen uitleggen.
Voordat we ingaan op de zelfstudie, laten we een handjevol sites bekijken die dit effect gebruiken. Let op de verscheidenheid aan manieren waarop je hier creatief mee kunt worden, dus stop niet alleen met deze tutorial! De principes hierachter zijn heel eenvoudig van aard, maar zoals je aan de volgende voorbeelden kunt zien, kun je behoorlijk dartel worden met de uitvoering.
Oké, nu we een paar voorbeelden hebben gezien van hoe creatief je kunt worden met dit effect, laten we ons verdiepen in de zelfstudie. Het doel hier is om de basistechnieken te leren - wat je ermee doet, is waar het interessant zou moeten worden!
Maak een nieuw document in Photoshop. De grootte doet er niet echt toe ... we gebruiken een 600px breed canvas voor deze walkthrough, maar u kunt uw eigen formaat gebruiken als u dit in een webontwerp verwerkt.
We willen meteen wat scheiding creëren, dus begin met het maken van de achtergrond donker en teken er een lichtgekleurde rechthoek bovenop.
We beginnen het lint door een rechthoek van 310 px bij 44 px te tekenen. Ik gebruik een afgeronde rechthoek met een straal van 4px, maar je kunt ook een vierkante rechthoek gebruiken als je de ronde hoek niet leuk vindt.
Let op de breedte: u wilt een totale breedte gebruiken die gelijk is aan de "breedte van uw inhoudskolom" + "de breedte waarover u wilt dat het lint uw hoofdachtergrond overlapt". In dit voorbeeld gebruik ik 310 px, dat is 285 px voor inhoud en ongeveer 25 px overlapping.
Vervolgens wil ik de onderste hoek vierkant maken zodat deze niet rond is. Ik ga naar binnen met de Convert Point Tool en duw eenvoudigweg het punt, zodat er een hoek van 90 graden is.
De reden dat we dit doen is simpel: om de optische illusie van het lint dat op zichzelf "vouwt" te voltooien, moet deze hoek niet rond zijn. Je kunt met deze stap alleen al behoorlijk creatief worden door de illusie van 'ronding' te creëren door de rechterbenedenhoek echt in te klappen - maar we houden het simpel in dit voorbeeld.
Nu willen we de vorm van het lint verwijderen. Gebruik de veelhoekige lasso om de vorm uit te snijden ... Ik houd de "SHIFT" -toets ingedrukt om een hoek van 45 graden te forceren, maar je kunt elke vorm uitsnijden die je wilt.
Nadat je de gewenste vorm hebt geselecteerd met het lasso-gereedschap, maak je dit als vectormasker bovenop je lintlaag:
De volgende stap is het maken van de "schaduwzijde" van het lint dat achter de voorgrond verdwijnt. Begin met het tekenen van een eenvoudig vierkant.
Tip: gebruik een kleur die iets donkerder is dan de voorkant van het lint om de illusie van diepte te creëren.
Nu moeten we het "vouw" -effect maken - gebruik het Convert Point Tool opnieuw, verplaats de rechterbenedenhoek van het vierkant OMHOOG totdat het bijna naar het hoogste punt is.
Uw document zou er nu als volgt uit moeten zien:
Oké - nu hebben we onze basisvormen! Dat betekent dat de volgende stap het toevoegen van enkele aangepaste laagstijlen aan ons lint is. Je kunt hier doen wat je wilt, maar ik zal je de instellingen laten zien die ik gebruik om een lichte, gestructureerde uitstraling te creëren.
De volgende laagstijlen worden toegepast op de voorkant van het lint.
De volgende laagstijlen worden toegepast op de onderkant van het lint.
Whallah! Nu zou het er zo uit moeten zien:
Tijd voor wat tekst! Ik gebruik 18pt "Eureka" met een lichte slagschaduw, maar je kunt alles gebruiken wat je maar wilt.
De stippellijnen kunnen op verschillende manieren worden gedaan, maar ik zal u laten zien hoe u het moet doen met behulp van basistekst "punten" - met behulp van de "." sleutel. Let op de bovenstaande instellingen - de tekstlaag is ingesteld op een dekking van bijna 50% en ik gebruik een aantal tekentechnieken om het effect te voltooien.
Laten we nu kijken naar de lichte schaduw" dat helpt de punten een beetje te laten knappen:
Dat zou het lint voor de rechter rail moeten voltooien; U kunt de laagset kopiëren / plakken en omdraaien om een versie voor de linkerkant te maken.
Nu we het lint hebben ontworpen, is het de moeite waard om een paar minuten te nemen om de drie manieren te bespreken die je zou kunnen gebruiken om het te coderen. We gaan niet diep in de regel voor regel; er zijn veel CSS specifieke tutorials die je hiermee kunnen helpen (zelfs op onze netwerksite, Nettuts!). Wat ik zal doen, is de benaderingen bespreken die je zou kunnen gebruiken en het delen van een paar links waar je diepere informatie over hen kunt vinden.
Dit is de eenvoudigste, meest directe benadering. Het maakt gebruik van de basale CSS-achtergrondeigenschappen zonder enige trucjes voorbij een kleine positionering. Uw lint kan er iets anders uitzien, dus ik zal u door de basisstappen leiden:
Voors: Dit is de eenvoudigste methode - het is eenvoudig om te voltooien.
nadelen: Opnieuw villen vereist het openen van een Photoshop-bestand; Het element zal niet "uitrekken" als u wilt dat het iets anders is dan een vaste grootte.
De klassieke methode met schuifdeuren is vergelijkbaar met de eerste methode, maar u kunt uw lint uitrekken naar elke gewenste maat!
Voors: Dit is vrij flexibel - u krijgt de voordelen van het gebruik van afbeeldingen en de flexibiliteit van de schuifdeuren-methode.
nadelen: Dit kan best lastig zijn om perfect te worden in elke browser; Opnieuw villen vereist nog steeds het openen van een Photoshop-bestand, maar nu zijn er drie afbeeldingen om te bewaren, niet één.
Als je bereid bent om sommige details op te geven (zoals de ruisstructuur en de binnenste gloed), is het mogelijk om deze code volledig zonder afbeeldingen opnieuw te maken. De nieuwe omwenteling methode, gradiënten, en element schaduwen zijn de primaire technieken (lees ze hier allemaal).
Lees de volledige op CSS gebaseerde zelfstudie bij Nettuts!
Voors: Geen afbeeldingen nodig! Dit betekent dat het super gemakkelijk is om opnieuw te villen door een paar waarden in de CSS te veranderen.
nadelen: Naast het verliezen van de mogelijkheid om textuur en andere hoogtepunten toe te voegen, wordt deze methode niet goed weergegeven in veel browsers. Alles boven IE8, Safari 4.0 en Firefox 3.5 werkt goed, maar je loopt het risico dat het helemaal niet werkt in oudere browsers (die veel mensen hebben).
Ik hoop dat je van deze walkthrough hebt genoten! Dit effect is een van de eenvoudigste manieren om de illusie van diepte toe te voegen aan je ontwerpen en er zijn verschillende manieren waarop je de codering ervan kunt benaderen. Laat hieronder wat opmerkingen of vragen achter :)
Accentsconagua