Mar 19
2008

Vzorčna ozadja

08:02, published in category: design

pattern0.gif

Čeprav slovito »Web 2.0 oblikovanje« zagovarja skrajno preprosto, estetsko in minimalistično prikazovanje vsebine, se oblikovalci spletnih mest pogosto zatekajo k uporabi vzorčnih ozadij (patterns). Razlog je mogoče iskati v vedno večjih zaslonih uporabnikov in posledično tudi resolucijah, ki jih je v oblikovalski praksi težko izkoristiti. Da bi celoten izgled spletnega mesta bil bolj uravnotežen in poln tudi na večjih prikazovalnikih, se neizkoriščen prostor nadomešča z vzorčnimi ozadji.

Uporaba mora seveda biti premišljena in decentna v tolikšni meri, da ne pretehta nad bolj bistvenim vsebinskim delom. Z ustreznim vzorcem v ozadju lahko spletnemu mestu damo želen pridih (npr. starinski, tehnološki, otroški,…).

pattern0a.gif

Pri uporabi vzorcev lahko naredimo tudi nekaj bistvenih napak. Zelo pazljivo naj bo apliciranje pod besedilom, da z uporabo vzorca slučajno ne zmanjšamo berljivosti.

IZDELAVA VZORCA V PHOTOSHOPU

Postopek izdelave vzorca je z Adobe Photoshopom povsem enostavno. Za izdelavo ustreznega lika, ki ga bomo razporedili po vzorcu, nam je lahko v dodatno pomoč tudi Adobe Illustrator.

p1.gif

V Photoshopu začnemo s prazno površino, dolžini stranic na primer 500 pixlov. Površino omejimo s podpornimi črtami (»Guides«), kot prikazuje slika. Okrog notranjega kvadrata potrebujemo dovolj prostora.

p2.gif

Nato oblikujemo želen lik. Tukaj imamo več možnosti:

  1. lik izdelamo v Photoshopu (npr. »Pen tool«),
  2. lik izdelamo z Illustratorjem in ga prilepimo v Photoshop kot »Smart Object« (ta način nam kasneje omogoča enostavno korekcijo simbola z avtomatičnim učinkom na vseh razmnoženih simbolih).

p3.gif

Sledi najzahtevnejši del – “ razporeditev likov. Priporočljivo je, da med razporejanjem večkrat preverimo kako izgleda končen vzorec na večji površini ter ga postopoma popravljamo. Da bo ponavljanje vzorca kasneje brezhibno, moramo obrobne simbole natančno prezrcaliti. V pomoč nam je tipka Shift, ki jo držimo pri premikanju simbolov, s čemer zagotovimo, da so simboli ustrezno poravnani (še prej seveda vključimo funkcijo »Snap to > Guides« v meniju »View«. Pri simbolih, ki ležijo znotraj kvadrata in se ne dotikajo črt, smo povsem svobodni.

p4.gif

Ko zaključimo z razporeditvijo, preizkusimo kako vzorec izgleda na večji površini. Najprej označimo kvadrat, ki smo ga na začetku omejili s podpornimi črtami ter v meniju »Edit« izberemo »Define pattern…«. S tem shranimo naš vzorec, ki ga s funkcijo »Fill…« apliciramo na poljubno risalno površino.

pattern11.gif

Poskusite tudi sami…

Comments

Anže, 19. March 2008, ob 09:22:

Dober vodič. Zna priti prav!

Ales, 19. March 2008, ob 22:19:

Odlicen vodic.
Hvala za novo idejo o principu kreiranja patternov.

grega bohak.si, 16. April 2008, ob 19:23:

Odlično napisano in prikazano.

Respond now!