Registriraj se
cc

Izmenjava
 












  • Logo(1)
  • razlika v ceni ....(3)
  • Dreamweaver vrašanje(7)
  • Delo dobi...(1)
  • Iščemo arhitekturne projektante!(0)
  • Okus 51. beneškega bienala umetnosti (0)
  • Splet 2.0? (0)
  • Reason - Šola z razlogom 5. del (1)
  • Animiran metulj (0)
  • Reason - Šola z razlogom 4. del (0)
  • Taktike & praksa: Seminar novomedijske umetnosti (0)
  • Povabilo k sodelovanju na festivalu HAIP10 (0)
  • Apple iPad: odiseja v vesolju? (0)
  • Game Developers Conference San Francisco 2010 (0)
  • Google Chrome Beta za Mac in Linux ter razširitve (0)

  •      
     
    Spletno oblikovanje - 1. del Flasher je otvoril oddelek Spletno oblikovanje z več delnim člankom o Web Designu, ki bo še kako prav prišel začetnikom na tem področju, škodil pa ne bo tudi bolj izkušenim.
    Avtor/ica: Flasher
    Ogledov: 4613
    Komentarji: 5
    Priljubljene: 0
    Avtor/ica znalca je priložžil/a dodateko, ki jo lahko snamete tukaj. Priloga vam bo v pomoe pri branju znalca (najpogosteje je v prilogi izvorna datoteka).
    Velikost priloge je 1127 kb.
     
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 1. del
       
    redstavljajte si naslednji scenarij: ob jutranji kavici nič hudega sluteč prebirate dnevni časopis, nakar vaše oči zabode takle oglas:

    "Iščemo spletnega oblikovalca, za predstavitev našega podjetja na tem mediju. Zaželjenje ustrezne reference in portfolio!.... List d.o.o. Kontakt: 03/5824-273"

    Bolj zaradi potrebe po financijski injekciji, kot zaradi lastnega zadovoljstva, odtipkate napisano številko in poizveste po osnovnih informacijah in se dogovorite za sestanek. Tam izveste, da je List d.o.o v resnici komunalno podjetje, dobite njihov logo in barve s katerimi boste delali. To je pa tudi vse, nobenih omejitev in kar je še najpomembneje nobenega pametnjevanja s strani vodilnih. Sanje vsakega oblikovalca...mogoče pa tisti klic le ni bila to tako slaba poteza.
    Časa je natanko teden in nič več, zato kar na delo!
       
    ajprej je potrebno razmisliti, kakšno stran tako podjetje sploh potrebuje. Ločiti moramo med portalom in predstavitveno stranjo: namen prve je informacija predstavljena na čim bolj funkcionalen način, vse ostalo je temu inferiorno. Namen predstavitvene strani pa je nekaj osnovnih informacij o podjetju, ostalo je nekakšna komunikacija vizualnega z obiskovalcem. Pri tovrstnih predstavitvah imamo ogromno možnosti in poti, ogromno prostora za manevriranje. Ravno to pa je včasih lahko zavajujoče in mogoče še težje, kot če bi pot bila natančneja opisana in določena-možnost imamo narediti vse ali pa tudi nič.
    Na koncu se odločimo za nekakšen "avantgarden" izgled, ki bo impresioniral že samo s svojim izgledom, lahko tudi v odsotnosti pisane besede.
    Celostna grafična podoba je ena izmed poglavitnih zadev pri spletnih predstavitvah. Vedeti moramo, da je prvi vtis, ki si ga obiskovalec ob obisku strani ustvari, zelo pomemben. Še posebej, ker je velika verjetnost, da je to njegov prvi in hkrati tudi zadnji obisk, kar pri predstavitvenih straneh ni redkost. To je ključni moment, ko bo rekel da ali ne!
       
    slika

    Začeli bomo v DreamWeaverju!
    Odprimo nov dokument: File/New (Ctrl+N) in poskrbimo za osnovne nastavitve: Modify/Page Properties(Ctrl+J).
    Za potrebe tutoriala bodo zadostovale tele: Title (tekst, ki se bo pojavil na vrhu našega brskalnika): vpišimo npr. "Dobrodošli!", BackGround (barva ozadja, ki bo zapolnila naš celoten dokument): izberemo #4B6A7C, Document Encoding: Cental European (ISO-8859-2).
    Dokument shranimo kot index.html.
       
    slika

    S pomočjo tabel bomo naredili skelet naše spletne prezentacije, ki nam bo v pomoč, ko bomo vstavljali elemente iz photoshopa.
    Zelo pomembno je, da upoštevamo ločljivost v kateri želimo, da bo naša spletna stran vidna in predvidevamo "obnašanje" skeleta ob različnih ločljivostih.
    Naredimo tabelo: Insert/Table (rows: 2, columns: 3, Cell Padding: 0, Cell Spacing: 0, Width: 100%, Border: 0). Drugo vrstico obarvamo z #303A47 (tukaj bo tekst), prvo pa pustimo kot je.
    Označba na sliki nam bo koristila pozneje.
       
    slika

    Za grafično bolj zahteven del strani bomo uporabili vsemogočni Photoshop. Začeli pa bomo tam, kjer se stran začne nalagati in koda tudi izvajati-na vrhu oz. pri glavi.
    Odprimo nov dokument File/New (Ctrl+N), velikosti 750x240 pik, v RGB barvni skali, ločljivosti 72 dpi in s transparentnim ozadjem. O tem, zakaj dokument ravno te velikosti, bomo govorili pozneje.
       
    slika

    Glavi bomo določili grobo obliko tako, da bomo narisali zgornji in spodnji rob.
    Začnimo kar z zgornjim: izberemo Polygonal lasso tool iz orodjarne in označujemo dokler ne dobimo podobno obliko kot na sliki. Sam sem izbral bolj razgibano obliko in s tem dodal kanček dinamičnosti.
    Postopek ponovimo tudi za spodnji rob! Ker se bodo tu nahajali gumbi, pustimo ta del kar raven.
       
    slika

    Dosegli bi radi, da meja med glavo in celotnim ozadjem strani ne bi bila vidna. Uporabili bomo izhodiščni barvi, pri tem pa moramo paziti, da bomo uporabljali barve za splet!
    Odpremo Color Picker in v # okence vpišemo: 4B6A7C, izberemo Paint Bucket in zapolnimo zgornji rob.
    Postopek ponovimo za spodnji del, katerega barva je enaka osrednji barvi strani: #303A47.
    Pri obeh robovih lahko dodamo še mejo, ki bo delno ločevala glavo od ozadja.
    Plast z robovi naj bo zmeraj na vrhu!
       
    slika

    Vključili bomo slike, ki jih najdete v priloženi ZIP datoteki (zgoraj), lahko uporabite tudi svoje ali pa jih snamete s spleta.
    Odprimo hruska.psd in sliko postavimo na svojo plast (v levi kot). Ker je prevelikih dimenzij jo bomo pomanjšali: Edit/Transform/Scale in ji povečali kontrast: Image/Adjust/Brightness-Contrast: +60 in jo s tem poživili ter naredili za splet bolj privlačno.
    V novi plasti, pod trenutno, naredimo še ozadje (tokrat lahko uporabimo RGB barvno lestvico): R-207, G-112, B-13 .
       
    slika

    Ostali sta še dve sliki: 3d_1.psd in 3d_2.psd-odprimo ju in postavimo vsako na svojo plast. Modificiramo njuno velikost: Edit/Transform/Scale in ju postavimo na desno (kot kaže slika) in s tem uravnovesimo kompozicijo. Poigrajmo se še z lastnostmi plasti - priporočam Overlay in Luminosity!
    Če slikam spremenimo velikost ali lastnost plasti, lahko isto sliko uporabimo večkrat ne da bi to sploh bilo vidno-dobili bomo bolj polno kompozicijo!
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 1. del