Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Gumawa ng 3D Ribbon Wrap-Around na Effect  (May Kasamang Libreng PSD)

by
Difficulty:BeginnerLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ngayong papalapit na ang Pasko, naisip kong maaaring maging masayang gumawa ng tutorial tungkol sa sikat na 3d Wrap-Around Ribbon effect na madalas lumitaw ngayong taon. Ito ay magandang paraan upang magdagdag ng lalim sa inyong mga disenyo, at madali lang kumpletuhin. Magpapakita ako ng mga halibawa ong ginagamit sa web, ilakad kayo sa mga paraan ng paglikha sa Adobe Photoshop, at ipaliwanag ang iba’t ibang lapit sa pag-code nito.


Mga halimbawa ng Ang 3D Ribbon sa Action

Bago magsimula sa turorial, tignan muna natin ang ilang mga site na gumagamit nito. Pansinin ang maraming paraan na maaring maging malikhain dito, kaya huwag tumigil sa tutorial na ito! Ang mga kaisipan sa likod nito ay simple lamang, ngunit gaya ng makikita mula sa mga halimbawa, maaaring maging malikhain sa pagkakagamit.


Ang Pagturo

Ngayon na nakakita na tayo ng ilang halimbawa ng paano maging malikhain aa effect na ito, magsimula na tayo sa tutorial. Ang layunin dito ay ituro ang mga pangunahing pamamaraan - kung ano ang gagawin sa mga ito ang magiging interesante!


Hakbang 01: Pagsisimula

Lumikha ng bagong dokumento sa Photoshop. Hindi na magalaga ng laki… gagamit tayo ng 600px na lawak na canvas para rito, ngunit pwedeng gumamit ng sariling sukat kung gagamitin para sa disenyo para sa web.

Gusto nating gumawa agad ng paghihiwalay, kaya magsimula sa paggawa ng madilim na background, at gumihit sa tuktok ng parihabang maliwanag ang kulay.


Hakbang 02: Paglikha ng mga Pangunahing Hugis

Sisimulan ang ribbon sa pagguhit ng 310px x 44px na parihaba. Gagamit ng bilugang parihaba na may 4px na radius, ngunit maaari ring gumamit na kwadradong parihaba kung hindi gusto ang bilugan na kanto.

Pansinin ang lapad: Gugustuhin niyong gumamit ng pangkalahatang lapad na katumbas ng “lapad ng content column” + “lapad na gustong maglapat ng ribbon sa pangunahing backgroud.” Sa halimbawa na ito, gumagamit ako ng 310px, na 285px para sa laman, at halos 25px para sa paglapat.


Hakbang 03

Sunod ay gusto kong gawing kwadrado ang babang kanto para hindi ito bilugan. Papasok ako gamit ng Convert Point Tool, at itulak lamang ang punto para magkaroon ng 90 digri na anggulo.

Simple lang ang rason kung bakit ito ginagawa: upang makumpleto ang optikal na ilusyon ng pagtupi ng ribbon, dapat ang kanto ay hindi bilugan. Maaaring maging malikhain sa hakbang ito sa paglikha ng ilusyon ng pagkabilog sa pagtupi pababa ng kanan babang kanto  - ngunit gagawin lamang simple sa halimbawang ito.


Hakbang 04

Ngayon ay gusto nating gupitin ang hugis ng ribbon. Gamitin ang  Polygonal Lasso Tool upang ukitin ang hugis… Naka-pindot ang “SHIFT” upang gumawa ng 45 digri na mga anggulo, ngunit pwede ring gumawa ng kahit anong hugis na inyong gusto.

Kapag nakapili na ng nais na hugis gamit ang lasso tool, gawin itong Vector Mask sa ibabaw ng iyong ribbon na layer:


Hakbang 05

Ang sunod na hakbang ay ang paglikha ng may aninong lanig ng ribon na mawawala sa likod ng foreground. Magsimula sa pagguhit ng simpleng kwadrado.

Gabay: Gumamit ng kulay na mas madilim kaysa sa harap na bahagi ng ribbon upang makagawa ng ilusyon ng lalim.


Hakbang 06

Ngayon ay kailangang gawin ang epekto ng pagka-tupi  - gamit muli ang Convert Point Tool, galawin ang kanang-babang punto ng kwadrado pataas hanggang malapit na sa kanang-taas na punto.

Dapat maging ganito ang itsura ng dokumento ngayon:


Hakbang 07: Mga Estilo ng Layer

Ngayon ay mayroon na tayong mga pangunahin hugis! Ibig-sabihin ang susunod na hakbang ay pagdagdag ng mga sariling estilo ng layer sa ating ribbon. Maaaring gawin dito ang kahit anong gusto, ngunit ipapakita ko ang setting na ginagamit ko upang gumawa ng magaan at may texture na itsura.

Ang sunod na estilo ng layer ay ginagamit sa harap na bahagi ng ribbon.


Isang simpleng pagbaba ng anino ang unang hakbang - ginagawa nito ang unang hati sa pagitan ng ribbon at ng foreground.

Ang panloob na anino ang mahalagang elemento - pansinin ang antas ng “Noise” - iyan ang gumagawa ng texture.

Ang pagdagdag ng kaunting liwanag sa loob ay makatutulong sa paggawa ng lalim at hati.

Ang sumusunod na estilo ng layer ay gunagawa sa ilalim na bahagi ng ribbon.


Ang pagdagdag ng liwanag sa loob ay makakatulong sa paggaya ng isa sa mga unahang bahagi.

Heto na! Dapat ganito ang ang itsura:


Hakbang 08: Pagdagdag ng Teksto

Panahon na para sa teksto! Ako ay gumagamit ng 18pt "Eureka" na may magaang ilalim na anino, ngunit pwede gumamit ng kahit anong gusto.


Hakbang 09: Pagdagdag ng mga Putol na Linya

Ang mga putol na linya ay maaaring gawin sa iba’t ibang paraan, ngunit ipapakita ko kung paano ito gawin gamit ng mga simpleng “dot” - gamit ang “.” na key. Pansinin ang setting sa itaas - ang layer ng teksto ay nakalagay sa 50% na opacity, at gumagamit ako ng iba’t ibang teknik ng karakter upang kumpletuhin.

Ngayon, tignan natin ang maliwanag na "anino" na tumutulong na palitawin ang mga dot:


Hindi natin ginagamit ang “Multiply” na metodo dahil gusto nating maliwanag ang ating anino, at hindi madilim.

Hakbang 10: Pinal na Effect

Dapat ay makumpleto ang ribbon para sa tamang rail; Maaaring kopyahin/idikit at ba.iktarin ang layer-set upang gumawa ng bersyon para sa kaliwang bahagi.


Mga Paraan ng Pag-code

Ngayon na nadisenyo na ang ribbon, magandang magsantabi ng ilang minuto sa pagpaliwanag ng tatlong paraan na maaaring gamitin sa pag-code nito. Hindi na tayo pupunta sa malalim na linya-linya ng code; maraming tutorial na espesipiko sa CSS na maaaring makatulong (kahit ang aming network site na Nettuts!) Ang aking gagawin ay ang pagpapaliwanag ng mga lapit na maaaring gamitin at saka pagpapamahagi ng mga link kung saan makakakita ng mas malalim pang impomasyon tungkol dito.

Method 01: CSS -Nag-iisang Imahe para sa Background

Ito ang pinakasimple at direkta na lapit. Ginagamit nito ang pangunahing CSS background properties nang walang pagmamalabis maliban sa kaunting pagposisyon. Maaaring maging iba nang kaunti ang itsura ng ribbon, kaya idadaan ko kayo sa mga hakbang:

  1. Chop: I-save bilang transparent na .PNG file ang ribbon na graphic (tignan sa itaas)
  2. HTML: Lumkha ng simpleng DIV o Header elemento.
  3. CSS: Iestilo ang elemento upang magamit ang graphic bilang “background-image”.
  4. Gamitin ang property na “background-position” upang mailagay ang ribbon sa tamang lugar at makumpleto ang effect. Malamang ay gugustuhing gumamit ng negatibong integer upang itulak ang gtaphic sa labas ng framework.
  5. Gamitin ang padding property upang ilagay ang teksto sa tamang lugar.

Pros: Ito ang pinakasimpleng metodo - madali itong makumpleto.

Cons: Upang muling lagyan ng balat, kailangang magbukas ng Photoship file; Hindi magkakaroon ng “stretch” ang elemento kung nais itong maging kahit anong hindi ang nakatakdang sukat.


Method 02: Sliding Doors CSS

Ang klasikong metodo na “sliding doors” ay hawig sa unang paraan, ngunit maaaring ibahin ang sukat ng ribbon.

  1. Chop: I-save ang ribbon graphic bilang tatlong transparent na .PNG files (tignan sa itaas)
  2. HTML:  Lumikha ng tatlong elemento - ang kaliwa, gitna, at kanang lapit na ito ay papayagan tayong palaparin ang elemento sa sentro gamit ang umuulit na background.
  3. CSS: Iestilo ang mga elemento na magamit ang mga graphoc bilang ang "background-imahe" - dapat ang sentrong elemento ay “repeat-x”.
  4. Gamitin ang "background-position" na property upang ialay ang ribbon sa tamang lugar upang makumpleto ang effect.
  5. Gamitin ang padding na property upang ilagay ang teksto sa tamang lugar. Ang kaliwa at kanan na mga module ay mawawalan ng laman - ang module sa sentro ay hahawakan ang teksto.

Pros: Maraming pweepdeng magawa rito - makukuha ang benepisyo ng paggamit ng mga imahe at ang kagandagan ng sliding door na metodo.

Cons: Maaari itong maging mahirap na makuha nang perpekto sa lahat ng browser; ang paggawa ng bagong pabalat ay kailangan pa ring magbukas ng Photoshop na file, ngunit ngayon mayroon nang tatlong imahe para i-save, hindi lang isa.


Method 03: CSS3 Techniques

Kung ayos lang na mawala ang ilan sa mga detalye (kagaya ng noise texture at inner glow), posible ang muling paglikha ng code nang walang mga imahe. Ang mga bagong metodo ng pag-ikot, mga gradient, at elemento ng shadow ang pangunahing mga teknik (magbasa tungkol sa mga ito dito)

Basahina ng buong CSS na tutorial sa Nettuts!

Pros: Hindi kailangan ng imahe! Ibig-sabihin nito ay madaling mag-iba ng pabalat sa pagbago ng ilang halaga sa CSS.

Cons: Maliban sa mawawala ang abilidad na magdagdag ng texture at iba pang highlight, ang metodo ay hindi lalabas nang maayos sa ibang mga browser. Kahit anong mas mataas sa IE8, Safari 4.0, and Firefox 3.5 ay gagana nang maayos - ngunit maaari ring hindi na gagana nang tuluyan sa mga lumang browser (na mayroon ang marami).


Konklusyon

Sana ay natuwa kayo sa pagtuturo na ito! Ang effect na ito ay isa sa pinaka simpleng paraan upang magdagdag ng ilusyon ng lalim sa inyong mga disenyo, at maraming iba’t ibang paraan na pwedeng ilapit ang pag-code nito. Mag-iwan ng komento o tanong sa ibaba :)

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.