utorak, 8. prosinca 2009.

Dizajniranje buttona u Photoshopu

Danas ćemo dizajnirati sjajni button za web stranicu. Cijeli postupak biti će opisan detaljno, naredbu po naredbu, a priložiti ćemo i nekoliko fotografija. Krenimo!

1. Prvo stvaramo novi dokument (File>New). U meniju stavljamo širinu na 400 pixela, visinu na 300 a pozadinsku boju na bijelu.

2. Stvorite novi layer i nazovite ga po želji, za ovaj primjer neka bude Button.

3. U layeru Button izaberite Rounded rectangle tool, stavite radijus na 7 pixela i nacrtajte pravokutnik. Sada imate bazu za izradu buttona.

4. Desnim klikom na layer Button izaberite Blending options i za Blending options promjenite postavke Opacity na 33%, Distance i Spread na 0, a Size na 10. Za Inner Shadow stavite Opacity na 20%, Distance i Choke na 0, a Size na 84. U Bevel and Emboss Size i Soften za Structure stavite na 0, a za Shading obadvije postavke za Opacity. U Gradient Overlay duplim klikom na Gradient boju dobivate Gradient Editor unutar kojeg se "igrom" na traci odlučujete za boju, ja sam izabrao crvenu. Kliknite na OK i imate crveni button kao na slici!


5. Sada stvorite novi layer, ja sam svoj nazvao Sjaj. Izaberite Rectangular marquee tool, stisnite Ctrl i kliknite na thumb od layera Button. Izaberite layer Sjaj i Rectangular marquee tool, stisnite Alt i povucite tako da "odvojite" donju polovicu Buttona, kao na slici.


6. Izaberite Paint bucket tool (ukoliko ga vidite stisnite Gradient tool i držite stisnuto dok se ne pojavi izbornik sa traženim alatom, njegova ikona izgleda kao mala kantica), stavite boju na bijelu (#ffffff) i Opacity cijelog layera na 18% u izborniku s layerima koji se nalazi desno na dnu. Trebalo bi ispasti kao na slici.


7. Stvorite novi layer, ja sam svoj nazvao Uzorak, i u Blending Options>Pattern Overlay izaberite Pattern>Satin te kliknite OK. Izaberite Rectangular Marquee tool i držeći Ctrl kliknite na layer Button. Koristeći Paint Bucket popunite područje ranije izabranim Satin Patternom koji ćete naći u toolbaru na vrhu umjesto Foreground boje. Zatim Opacity layera stavite na 5%. Ubacite željeni tekst u Button. Veličinu, boju i font izaberite ovisno o izgledu. Na layeru Text se također možete "igrati" sa izgledom teksta. Ja sam u Blending Options u Drop Shadow stavio Opacity na 44%, Distance na 0, Spread na 0 i Size na 6.

Završni rezultat cijelog postupka trebao bi izgledati kao na slici, ili barem slično, ovisno o bojama koje ste koristili.

Ono što je bitno jest da primjetite taj sjaj Buttona koji smo željeli postići, a uspjeli smo zahvaljujući pravilnom korištenju Patterna Satin u koraku broj 7. Naravno, sljedeći ove korake možete uvijek i malo skrenuti te izabrati neki drugi efekt, boju i slično. Uživajte!

srijeda, 28. listopada 2009.

Top 5 alata za web dizajn


Kao i svaka druga profesija, tako i web dizajn zahtjeva određene alate za rad. Ima ih mnogo, ali mi smo izdvojili najboljih 5 po našem izboru.

Fireworks

Adobe Fireworks je komercijalni grafički editor koji je, za razliku od Photoshop-a, stvoren specijalno za web dizajnere i nudi čitav skup alata koji iznimno olakšavaju stvaranje i planiranje formata internet stranice. Ističe se sposobnost "spremanja" stranice u PDF formatu s mogućnošću klikanja na komponente.

Dreamweaver

Adobe Dreamweaver je legendarni alat za izradu web stranica. Tko god se bavio web dizajnom vjerojatno je upoznat s većinom opcija koje nudi ovaj alat, pa ćemo napomenuti samo kako se radi o software-u za obradu HTML, PHP i sličnih dokumenata s čitavim nizom dodatnih opcija.

Panic Coda

Ovaj "shareware" program stvoren je za Mac sustave i omogućuje jednostavno i pregledno editiranje web stranica u jednom prozoru. Cilj je smanjiti broj aplikacija potrebnih da se izradi stranica i tako poboljšati rad čitavog tima.

Photoshop

Adobe Photoshop je jedan od najpopularnijih grafičkih editora u povijesti. Namijenjen je u prvom redu profesionalnim fotografima i dizajnerima, ali je idealan za obradu fotografija i izradu web grafike. Ukratko, ovaj program sadrži sve alate koji Vam mogu zatrebati prilikom dizajniranja stranice i obrade fotografija.

Firebug

Po meni apsolutni pobjednik ovog "natjecanja" programa za dizajn web stranica. Radi se o besplatnom programu za Firefox pretraživač, koji se i koristi kao alat ugrađen u sam pretraživač. S ovim programom možete obrađivati HTML, CSS, JavScript, itd. Ova ekstenzija za Firefox u mnogim je anketama proglašena najboljim alatom za web dizajn.

srijeda, 30. rujna 2009.

Kako se izvući ako "zaglavite"

Unatoč tomu što mnogi misle kako je web dizajn jako jednostavan i da se u biti radi o običnom slaganju elemenata, činjenica je da se cijeli postupak često može pretvoriti u izuzetno frustrirajuće iskustvo. Svi koji su ikad probali znaju kako je moguće "zaglaviti", ali ne brinite jer postoji više načina da se izvučete iz one situacije kada što god probate dizajn jednostavno ne izgleda dobro.

1. Dizajnirajte iznutra. Većina ljudi krene s header-om, ali probajte za promjenu srediti prvo body. Ostavite header za kasnije i vidjet ćete kako možete učiniti čuda stvari dizajnirajući prvo prostor za sadržaj. Ponekad se sve ostalo poklopi samo od sebe!

2. Skicirajte nešto. Uzmite jednostavno bilježnicu i krenite crtati. 10, 20, 30... Skicirajte koliko god je potrebno! Jednostavno pustite maštu da upravlja rukom i na kraju pogledajte smireno u rezultat. Ideja je zajamčena!

3. Nađite inspiraciju van weba. Odite van i šetajte, listajte časopise iz 60-ih ako možete, nađite neki novi oblik u dućanu, gledajte TV, nađite nešto u klasičnim medijima što vam se sviđa...

4. Jeste li ikada napravili jedan izvrstan button i onda skužili kako je jednostavno smiješan na stranici koju radite. Tada krećete u razne nebuloze kako bi ga uklopili. Nemojte. Naučite odustati. Arhivirajte taj element i napravite novi. Izgubili ste malo vremena, ali uskoro ćete imati brdo genijalnih elemenata u arhivi.

5. Pitajte druge za savjet, ali budite pažljivi jer postoji stotine načina kako upropastiti genijalan web dizajn. Nemojte okljevati u prihvaćanju tuđih ideja, samo nemojte ni slušati baš svakoga tko se naziva web dizajnerom.

6. I za kraj - maknite se od kompjutera ako ništa ne funkcionira! Probali ste sve i ništa ne ide kako bi htjeli? Vrijeme je da se ustanete sa stola i odete na pivu/kavu s nekim. Nastaviti ćete sutra.

ponedjeljak, 10. kolovoza 2009.

Osnovne smjernice za dizajn weba

Kao prvo valja shvatiti da je dojam koji ostavlja web stranica jedna od najvažnijih stvari za uspjeh jer će se bilo koji proizvod ili usluga koju nudite prosuđivati na temelju toga. Velik broj malih internet poslova propada upravo zbog lošeg izgleda stranice, ma koliko god to možda čudno zvučalo. Jednostavno je potrebno uzeti malo vremena i kvalitetno se obrazovati.
Za početak treba napraviti kvalitetan template za web stranicu. Template je ustvari kao "ljuska" u koju stavljamo sve elemente stranice, od linkova, animacija, navigacije, pa sve do sadržaja. Nakon što ga napravite imate izgled kakav će sadržavati svaki pojedini dio stranice, uz drugačiji sadržaj naravno, pa je važno da budete u potpunosti zadovoljni.
Važno je i da svoj sadržaj formatirate, možda najbolje pomoću HTML tablica. Pritom je možda najbolje da cellpadding, cellspacing i border atribute tablica stavite na vrijednost "0" kako bi se stekao dojam da tablice "teku" zajedno. Tablice su jednostavno genijalan alat, jer možete sav sadržaj podijeliti točno onako kako želite - jedan ispod drugog, jedan pokraj drugog, u stupce, u redove, u zasebne tablice unutar glavnih tablica... Vaš sadržaj će jednostavno rečeno izgledati profesionalno.
Što se tiče naslovnice vrijedi ono pravilo "manje je više". To znači da ne valja nikako pretjerivati sa bacanjem sadržaja na naslovnicu. Neka stvari budu što jednostavnije. Stavite svoj logo na primjetno mjesto u gornjem lijevom kutu (učinite to i na svakoj drugoj sekciji stranice kako bi se stvorio dojam dosljednosti) i na naslovnicu stavite kratke opise proizvoda ili usluga te linkove na njihove sekcije. Ukoliko se surfer nakon dolaska na stranicu bude osjećao izgubljeni i zasipano nepotrebnim informacijama, tada će vjerojatno napusiti vaš web i nikad se više neće vratiti.
Sljedeća važna stvar je navigacija. Navigacija mora biti vidljiva na svakom dijelu stranice, po jest na svakom page-u, jer valja imati na umu kako posjetitelj neće možda uvijek doći putem naslovnice. Neka linkovi zato uvijek budu uredni i vidljivi!
Tekstovi i boje su također važni pa valja paziti da na kraju cijela stranica ne izgleda kao da ju je radila čimpanza za tastaturom. Najbolje je ići na sigurno pa tako za sadržaj koristiti Ariel ili Verdana font veličine 2, a za naslov, koji mora biti nešto veći i primjetniji, je možda preporučljivo koristiti Georgia. Što se tiče boja, poznato je da svaka boja izaziva drugačiji efekt (žuta je vesela, plava umirujuća, itd.) pa je najbolje izabrati onu koja najviše odgovara osjećaju kojeg pokušavate izazvati kod korisnika. Ipak, tekstualne dijelove najbolje je pustiti bijele sa crnim tekstom, jer boje mogu i odvući pozornost sa bitnoga.
I to su neke od osnova! Važno je samo da se prije bilo kakvog kretanja u dizajn dobro informirate i naučite sve osnove kako stranica nebi završila s potpunim fijaskom.

ponedjeljak, 29. lipnja 2009.

Što je web dizajn?

Ljudi često smatraju da je to pojam koji označava izradu web stranice, ali to nije tako. Postoji velika razlika između dizajniranja i programiranja, te vještina potrebnih za dizajniranje i programiranje.
Web dizajn je grafička i umjetnička djelatnost. Uspješni web dizajner mora biti upoznat sa pojmovima kao što su HTML i CSS, ali i da ima kreativnost da osmisli ugodan i upotrebljiv dizajn. Dizajniranje internet stranice isto je kao i grafički dizajn časopisa, samo što su pojedine stranice povezane linkovima. Pritom je važno i da web stranica udovoljava nekim općim standardima, te da bude pregledna i dostupna. Svaki dio web stranice je zasebni HTML dokument koji ima svoju adresu, a svi su složeni u jednu cjelinu na naslovnici.
Iako mnogi smatraju da je web dizajn kompliciran zbog tehnologije, to u stvari nije tako. Naučiti HTML i CSS je lagano, ali problem je u "žici" koju treba imati za posao jer ovo je više umjetnost nego znanost. Postoji niz stranica koje nude besplatne dizajne ili predloške, pa preostaje jedino da se malo promjene boje i detalji. Može se slobodno početi učiti i HTML, jer sve što se učini jednostavno se pobriše u slučaju pogreške.
Ukoliko je ipak potrebna komplicirana stranica, tada se ipak preporuča angažiranje profesionalnog dizajnera, pogotovo za komercijalne stranice.

četvrtak, 14. svibnja 2009.

Dobrodošli!

Dobrodošli na internet dnevnik "Web Dizajn".
Ovaj blog pokrenut je s namjerom da svim znatiželjnicima, koji možda baš u ovom trenutku surfaju internetom, pruži neke korisne savjete vezane uz dizajn web stranica.
Nadamo se da ćemo uspjeti u našoj namjeri i ostvariti planirano!