2008
Vzorčna ozadja
08:02, published in category: design

Č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,…).

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.

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.

Nato oblikujemo želen lik. Tukaj imamo več možnosti:
- lik izdelamo v Photoshopu (npr. »Pen tool«),
- 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).

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.

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.

Poskusite tudi sami…



Dober vodič. Zna priti prav!
Odlicen vodic.
Hvala za novo idejo o principu kreiranja patternov.
Odlično napisano in prikazano.