Create en 3D Ribbon Wrap-Around Effect (Pluss en gratis PSD!)
Med ferien er rett rundt hjørnet, jeg om det kunne være morsomt å lage en tutorial på den populære 3d wrap Rundt Ribbon effekt som har blitt dukker opp så mye i år. Dette er en flott måte å legge til dybde til din design, og det er ganske darn lett å fullføre. Jeg skal vise deg noen eksempler på den i aksjon rundt på nettet, går du gjennom etableringen teknikker i Adobe Photoshop, og deretter forklare de ulike tilnærminger til koding det.
Eksempler på The 3D Ribbon in Action
Før vi dykke inn i opplæringen, la oss ta en titt på en håndfull nettsteder som bruker denne effekten. Legg merke til det mangfoldet av måter du kan gjøre noe kreativt med dette, så stopper ikke ved denne opplæringen alene! Prinsippene bak dette er veldig enkel i naturen, men som du kan se fra de følgende eksemplene, kan du få ganske spretten med utførelsen.
Den Tutorial
Alright, nå som vi har sett noen eksempler på hvor kreativ du kan få med denne effekten, la oss grave i opplæringen. Målet her er å lære grunnleggende teknikker - hva du gjør med dem er der det skal bli interessant
Trinn 01: Komme i gang
Opprett et nytt dokument i Photoshop!. Størrelsen spiller ingen rolle ... vi skal bruke en 600px bredt lerret for gjennomgang, men du kan bruke din egen størrelse hvis du arbeider dette inn i et web design.
Vi ønsker å skape noen separasjon med en gang, så starter ut ved å gjøre bakgrunnen mørk, og tegne en lys farget rektangel på toppen
Trinn 02:. Opprette Basisformer
Vi starter båndet ved tegne en 310px ved 44px rektangel. Jeg bruker en avrundet rektangel med en 4px radius, men du kan også bruke en squared rektangel hvis du ikke liker den rundt hjørnet
Vær oppmerksom på bredde. Du ønsker å bruke en total bredde som lik "width av innholdet kolonnen" + "bredden som du vil at båndet skal overlappe hoved bakgrunn". I dette eksempelet, jeg bruker 310px, som er 285px for innhold, og om 25px av overlapping.
Trinn 03
Neste, jeg ønsker å stille opp den nederste hjørne slik at det ikke rund. Jeg flytter inn med punktkonverteringsverktøyet, og bare dytte det punktet slik at det er en 90 graders vinkel
Grunnen til at vi gjør dette er enkel:. for å fullføre den optiske illusjonen av båndet "folding" inn på seg selv, bør dette hjørnet ikke være rund Nå ønsker vi å kutte ut formen på båndet. Bruk det mangekantede lassoverktøyet til å skjære ut formen ... Jeg holder tasten nede "Shift" for å tvinge 45 graders vinkler, men du kan skjære ut noen form som du ønsker. Når du 've valgt ønsket form med lasso verktøyet, gjør dette til en Vector Mask på toppen av båndet lag: Det neste trinnet er å skape "skygget" side av bånd som vil forsvinne bak forgrunnen. Start med å tegne en enkel firkantet Tips:.. Bruk en farge som er litt mørkere enn forsiden av båndet for å bidra til å skape en illusjon av dybde Nå må vi skape "fold" effekt -. bruker Konverter Point Tool igjen, flytt nederste høyre punkt av plassen UP før det er nesten til øverste høyre punkt Ok - nå har vi våre grunnleggende former! Det betyr at det neste trinnet er å legge noen tilpassede lagstiler til vårt bånd. Du kan gjøre hva du vil her, men jeg skal vise deg de innstillingene jeg bruker for å lage en lys, teksturert utseende. Følgende lagstiler bli brukt på front-side av båndet. Følgende lag stiler bli brukt på undersiden av båndet. Whallah! Nå skal det se slik ut: Tid for litt tekst! Jeg bruker 18 pkt "Eureka" med en lys skygge, men du kan bruke noe du ønsker De stiplede linjene kan gjøres i en rekke måter, men jeg skal vise deg hvordan du gjør det ved hjelp av grunnleggende tekst "prikker" - ved hjelp av "." nøkkel. Legg merke til innstillingene opp ovenfor -. Teksten-lag er satt til nesten 50% opasitet, og jeg bruker en rekke karakter teknikker for å fullføre effekten Nå, la oss se på lyset "skygge" som bidrar til å gjøre prikker pop litt. Anmeldelser Ta oppmerksom på at vi ikke bruker "Multipliser" metoden fordi vi faktisk ønsker vår skygge til å være lys, ikke mørk Det burde full båndet for retten rail; Du kan kopiere /lime og snu lag-satt til å lage en versjon for venstre side. Nå som vi har designet båndet, er det verdt å ta en noen minutter til å diskutere de tre måtene som du kan bruke til å kode det. Vi vil ikke gå dypt inn i linje for linje kode; det er mange CSS spesifikke tutorials som kan hjelpe deg med dette der ute (selv om nettverket vårt nettsted, Nettuts!). Hva jeg vil gjøre er å diskutere tilnærminger som du kan bruke, så vel som å dele noen linker der du kan finne dypere informasjon om dem Dette. er den enkleste, mest likefrem måte. Den bruker de grunnleggende CSS bakgrunns eiendommer uten noen fancy triks utover litt posisjonering. Din bånd kan være litt forskjellig, så jeg vil gå gjennom de grunnleggende trinnene: Pros:.. Dette er den enkleste metoden - det er lett å fullføre Ulemper: Re-skinning krever åpne opp en Photoshop-fil;. Elementet vil ikke "strekk" hvis du vil at det skal være noe annet enn en fast størrelse Den klassiske "skyvedører" metoden er lik den første tilnærming, men det vil tillate deg å strekke båndet for å passe alle størrelser du ønsker Pros:.. Dette er ganske fleksibel - du får fordelene ved å bruke bilder og fleksibilitet av skyvedører metoden Cons: Dette kan være ganske vanskelig å få perfekt i alle nettlesere; Re-skinning krever fortsatt åpne opp en Photoshop-fil, men nå er det tre bilder som skal lagres, ikke bare en Hvis du er villig til å gi opp noen detaljene (som støy tekstur og indre glød), er det mulig å gjenskape dette i kode helt uten bilder. De nye rotasjon metoden, graderinger og element skygger er de viktigste teknikkene (les om dem alle her) Les hele CSS basert tutorial på Nettuts Pros:.! Ingen bilder som er nødvendig! Dette betyr at det er super enkelt å re-skin ved å endre noen verdier i CSS Ulemper:. I tillegg til å miste muligheten til å legge tekstur og andre høydepunkter, denne metoden vil ikke gjengis riktig i mange nettlesere . Alt ovenfor IE8, Safari 4.0 og Firefox 3.5 vil fungere fint - men du risikere det ikke fungerer i det hele tatt i eldre nettlesere (som mange mennesker har) håper jeg. du har hatt glede av denne gjennomgang! Denne effekten er en av de enkleste måtene å legge illusjonen av dybde til din design, og det området rekke måter du kan nærme kodingen av det. La noen kommentarer eller spørsmål der nede :) Anmeldelser
Du kan få ganske kreativ med dette trinnet alene ved å skape en illusjon av "avrunding ut" ved å gjøre nederste høyre hjørne faktisk folde ned -. Men vi vil holde det enkelt i dette eksempelet.
Trinn 04
Trinn 05
Trinn 06
< p> Dokumentet skal se slik ut nå:
Trinn 07: Layer Styles
En enkel drop-shadow er første skritt - dette skaper den første delingen mellom båndet og foreground.The indre skyggen er det avgjørende element - merk "støy" nivåer - det er det som skaper texture.Adding en lys indre glød vil bidra til å skape dybde og divisjon.
Legge til en lys indre glød vil hjelpe etterligne en på forsiden.
Trinn 08: Legge til tekst
Trinn 09:. Legge de stiplede linjene
Trinn 10: Slutt Effect
måter å kode det
Metode 01: CSS - A Single bakgrunnsbilde
Chop: Lagre bånd grafisk som en gjennomsiktig PNG fil (se ovenfor)
HTML : Lag en enkel DIV eller Header element
CSS. Stil elementet til å bruke den grafiske som "bakgrunnsbilde"
Bruk "background-position" eiendom for å dytte båndet. på plass for å fullføre effekt. Du vil sannsynligvis ønske å bruke et negativt heltall å presse grafikken utenfor rammen
Bruk padding eiendommen for å plassere din tekst på rett sted
Metode 02:. Sliding Doors CSS
Chop: Lagre bånd grafisk som tre gjennomsiktige PNG-filer (se ovenfor)
HTML: Lag tre elementer - dette venstre, midtre og høyre tilnærming vil tillate oss å strekke sentrum element ved hjelp av et gjentakende bakgrunn
CSS: stil elementene til å bruke grafikken som "bakgrunnsbilder". - sentrum element bør "repeat-x"
Bruk "background-position" eiendom for å dytte båndet på plass for å fullføre effekten
Bruk padding eiendommen for å plassere teksten.. på rett sted. Venstre og høyre moduler vil være tom - sentrum modulen vil holde din tekst
Metode 03:. CSS3 Teknikker
Konklusjon