Registriraj se
Artservis1

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 - 2. del Nadaljevanje prvega dela obsežnega znalca o spletnem oblikovanju. Berite in se učite, po korakih.
    Avtor/ica: Flasher
    Ogledov: 3890
    Komentarji: 10
    Priljubljene: 1
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 2. del
       
    slika

    Izdelek na tej stopnji izgleda preveč sterilen in nekoherenten. Odprimo vzorec.psd in označimo celotno sliko: Select/All (Ctrl +A), nato pa: Edit/Define Pattern-odpre se nam okence kamor vpišemo poljubno ime. Izberite Paint Bucket Tool/Pattern in na koncu vidimo nov vzorec z našim imenom. Izberimo ga, naredimo novo plast tik pod plastjo z robovi, ki smo jih narisali na začetku in celotno plast prekrijemo z izbranim vzorcem. Opacity plasti popravimo na 15%.
       
    slika

    Lotimo se še detajlov! nisan.psd postavimo na svoj plast, tako kot kaže slika. Detajl sem izdelal v Illustratorju, lahko ga pa izdelate tudi sami kar v photoshopu ali v kakšen vektorskem programu. Opacity plasti nastavimo na 70%!
    Dodali bomo še nekaj teksta: Type Tool (font: Photoshop small, size: 6pt) in vtipkamo par vrstic binarnega računalniškega jezika: 01001... Opacity plasti: 80%, lastnost plasti: Overlay.
       
    slikaslika

    Za piko na i bomo dodali na desni strani še nekakšno črtno kodo, ki se bo raztezala čez celoten zaslon.
    Naredimo novo plast in jo postavimo nad tisto, ki vsebuje spodnji rob glave(!!). Izberemo Rectangular Marquee Tool in narišemo 6 različnih podolgovatih pravkotnikov, ki segajo od zgornjega do spodnjega roba. Zapolnimo jih z belo barvo! Sedaj pa bomo vse skupaj malce omehčali: Filter/Blur/Motion Blur (Angle: 0, Distance: 16pix).
       
    slikaslika

    Dodati moramo še logo podjetja, najdete ga na CD-ju: logo.psd. Postavimo ga (nekje na sredino) na svojo plast (lastnost plasti: Overlay, Opacity: 60%) in ga pomanjšamo: Edit/Transform/Scale. Trenutno plast podvojimo in jo za nekaj mm premaknemo v desno in navzdol-s tem ustvarimo poseben efekt gibanja. Zraven logota pa sodi tudi samo ime podjetja: Type Tool (font: Arial Narrov, size: 11pt, color:#FFFFFF). Lastnost plasti nastavimo na OverLay. Tudi tokrat lahko plast podvojimo in tekst povečujemo, bluramo,...
       
    slikaslika

    Na vrsti so gumbi, ki jih bomo, kot sem že omenil, dodali kar v glavo-natančneje na spodnji rob glave. Torej naredimo novo plast in jo postavimo nad plastjo s spodnjim robom. Gumbki bodo popolnoma minimalistični in tako kontrastni popolnjeni sredici. Izberemo Elliptical Marquee Tool, označimo krog in ga napolnimo z belo barvo. Še enkrat izberemo isto orodje, le da tokrat označimo manjši koncentrični krog in izrežemo sredino. Gumbku na desno stran dodamo napis!
    Postopek za ostale gumbe je enak.
       
    slikaslika

    Glava je s tem končana, sedaj jo je potrebno samo že razrezati na kose. Še prej pa vse plasti združimo v eno (ne pozabi shraniti originala!): Layer/Flatten Image. Pri rezanju si bomo pomagali z "smernicami" (Guides).
    Polje 1 izrežemo in shranimo kot 1.jpg, polje 3 izrežemo in shranimo kot 3.jpg, polje 4 izrežemo in shranimo kot 4.jpg. Polja 2, 3 in 4 izrežemo skupaj in jih shranimo kot 2_3_4.jpg.
       
    slikaslika

    Selimo se nazaj v DreamWeaver (index.html), kjer bomo začeli z vstavljanjem prej pripravljenih slik v Photoshopu. Še enkrat si poglejmo sliko z drugega koraka, kjer je prikazana številčna razporeditev polj. Z Insert/Image (Ctrl+Alt+I) vstavimo sliko: 1.jpg v prvo polje, 2_3_4.jpg pa v drugo polje. Ostali sta nam še 3.jpg in 4.jpg, ki ju bomo vstavili kot ozadje in ne kot navadne slike: označimo celico/Properties/BG. 4.jpg vstavimo v tretje, 3.jpg pa v peto polje.
       
    Znalci > Spletno oblikovanje > Spletno oblikovanje - 2. del