Hvordan laver man de 3D bannere?

En lille trend blandt diverse websites for tiden er bannere med dybde, nærmest en slags 3D bannere. De er faktisk nemme at lave og den her artikel vil der blive vist hvordan de laves fra photoshop til den endelige CSS/HTML.

Øverste banner med kantede hjørner, den nederste med runde hjørner

Lidt photoshop

Lad os få startet photoshop op. Det bør nævnes at bannere vist her, sagtens kan tegnes i andre tegneprogrammer som f.eks. GIMP.

Den øverste banner er den nemmeste, så lad os starte der, og inden der tegnes noget som helst så sørg for at sætte “Snap to guide lines” til (View -> Snap To -> Guides).

Som det første placeres lidt guide lines. En top linie til hvor toppen af bannere skal være og 2 i hver side med 10 pixels mellemrum, her skal hjørnerne være:

Sørg for at oprette guide-lines, og sæt snap to grid på dem

Lav et nyt layer (shift + command + n), kald det banner1, vælg dette og marker herefter en rektangel fra de yderste guidelines i hver side og fyld med en farve, her er brugt #A75839. Lav et nyt lag/layer og ryk det under banner1 layer. Vælg så en skygge farve der er lidt mørkere, f.eks. #762E12 og tegn en trekant med pen tool (P) på det nye layer, som vist:

Der laves en trekant med pen tool, den fyldes med en mørkere farve for at simulere skygge

I path vinduet/fanebladet (Som regel placeret ved siden af layer) vælges den path, der lige er lavet og der vælges “Make selection…”. Fyld markeringen med den lidt mørkere farve. Gentag samme process i den anden side af banneret.

Herefter tilføjes lidt skygge til banneret. Højre klik på banner1 layer og vælg blending options, klik på drop shadow og sæt indstillinger som her:

Og det var faktisk alt hvad der skulle til, resultatet skulle gerne se sådan her ud:

Banner med runde hjørner

Det andet banner fungerer på næsten samme måde, så start med at lave et nye layer og kald det banner2. På banner2 layer tegnes med “Rounded Rectangle Tool” (U) en rektangel med runde hjørner, sæt radius til 10px inden der tegnes.

Vælg Direct Selection Tool (A) og marker det ene hjørne:

Træk herefter de enkelte path punkter op så det afrundede hjørne går indad, som vist her:

Gør det samme med det andet hjørne, så det ser ud som følgende:

Banner nr. 2 med begge hjørner

Opret nu et nyt layer og placer det under banner2 layer. Marker en cirkel under det nye hjørne der lige er oprettet og fyld det med den mørkere farve:

En elipse er brugt til at markere og der er tegnet en skygge

Slet det der går ind over den inderste guideline. Gør det samme ved det andet hjørne og tilføj blending options på banner2 layer som ved banner1 eksemplet. Og vupti banneret er færdigt:

Implementering af banneret i HTML/CSS

I princippet kunne de ovenstående bannere bare laves med en bestemt bredde i photoshop og så bare bruges som baggrundsbillede i en h1 eller lignende. Nemt og hurtigt og utroligt fleksibelt. I stedet vil vi forsøge at kigge på 3 andre metoder til at få banneret gjort lidt mere fleksibelt.

Se demo

Første metode

Til den første metode bliver banneret skåret i 3 små bider og gemt som en såkaldt sprite.

<h2 class="banner-shared banner-v1">
   <span class="banner-v1-left"></span>
   1. Awesome banner
   <span class="banner-v1-right"></span>
</h2>

Ideen her er at få span elementerne til at holde hjørnerne og h2 elementet til at holde selv banner baggrunden gentaget langs X-aksen. Følgende CSS gør dette:

.banner-v1 {
   background: transparent url(_images/banner-1-sprites.png) left -49px repeat-x;
   position: relative;
}

.banner-v1-left,
.banner-v1-right {
   background: transparent url(_images/banner-1-sprites.png) left top no-repeat;
   width: 10px;
   height: 47px;
   position: absolute;
   left: -10px;
}

.banner-v1-right {
   background-position: right top;
   position: absolute;
   left: 100%;
}

span elementerne rykkes 10 pixels til siden vha. absolute positionering. Resultatet giver et banner der kan passe til en hvilken som helst bredde man måtte ønske, men det er på bekostning af usemantiske span elementer, dvs. elementer som reelt set ikke gør som det oprindeligt var tiltænkt.

Anden metode

Den anden metode tager udgangspunkt i en teknik der er kendt som sliding doors, en teknik der som oftes bruges på knapper og faneblade. Den benytter sig af en anden sprite hvor banneret kun er delt op i 2 dele. Ideen er her at den lille stump i sprite’en skal sættes i foran den lange del. HTML’en:

<h2 class="banner-shared banner-v2">
   <span></span>
   2. Awesome banner
</h2>

Det var en span mindre end første metode, men det kommer med den bekostning af banneret ikke må være breddere end ens sprite. Her er CSS’en:

.banner-v2 {
   background: transparent url(_images/banner-1-v2-sprites.png) right -49px repeat-x;
   max-width: 400px;
   position: relative;
   margin-right: -9px;
}

.banner-v2 span {
   background: transparent url(_images/banner-1-sprites.png) left top no-repeat;
   width: 10px;
   height: 47px;
   position: absolute;
   left: -10px;			
}

Sidste metode – Pseudo elementer!

Den sidste metode fjerner de usemantiske span elementer fuldstændig! Der bruges den samme sprite som i eksempel et, dvs. at den tilmed også er fuldt ud fleksibel i bredden. Og hvordan nu det – jo med hjælp af pseudo elementerne :before og :after.

Pseudo elementer kan bruges til at indsætte ekstra ting før og efter et element uden at ændre på selv HTML strukturen. Så HTML’en bliver ganske nydelig:

<h2 class="banner-shared banner-v3">
   3. Awesome banner
</h2>

Det er jo smukt! Lad os tage et kig på CSS’en:

.banner-v3 {
   background: transparent url(_images/banner-1-sprites.png) left -49px repeat-x;
   position: relative;
}

.banner-v3:before,
.banner-v3:after {
   content: "";
   background-image: url(_images/banner-1-sprites.png);
   background-position: left top;
   width: 10px;
   height: 47px;
   position: absolute;
   left: -10px;
}

.banner-v3:after {
   background-position: right top;
   left: 100%;
}

Det ser måske lidt forvirrende ud, men man kan se på det sådan at banner-v3:before og banner-v3:after egentlig fungerer som span elementerne i første metode – de bliver bare aldrig vist som en del af HTML. De er begge 10 pixels bredde og har spriten som baggrundsbillede, hvor after blot viser en anden del af spriten.

Det var det!

Nogle effekter er bare meget simplere end man egentlig tror, og netop disse bannere her er et godt eksempel. Der skulle hverken meget photoshopping eller CSS til for at lave fancy bannere der giver dybde i siden.

Bemærk: Den sidste metode der benytter sig af pseudo elementer er en CSS3 feature og virker ikke i IE < 9!

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.