CSS Creator je online generator koji će za vas kreirati CSS Layout na osnovu parametara koje mu zadate. Dovoljno je da odredite položaj i način prikaza sadržaja, širinu i visinu header-a i leve i desne kolone ukoliko postoje i dodelite im boju. Možete da podesite i Doctype web strane. Nakon toga, pritiskom na dugme generiše se HTML i CSS fajl koje treba da sačuvate na vaš računar.
CSS Layout generator ćete naći na adresi csscreator.com/tools/layout
Obzirom da je trenutno vrlo popularan dizajn elemenata web strane sa zaobljenim ćoškovima a da CSS ne omogućava jednostavno kreiranje ovakvog vizuelnog efekta, često se pribegava raznim tehnikama. U ovom postu nabrojano je 25 tehnika za kreiranje boksa sa zaobljenim ćoškovima koristeći samo CSS ili CSS u kombinaciji sa JavaScript-om.
Moj favorit je CSS:Smart Corners (isproban i funkcionalan).
Ipak, da biste olakšali ovaj postupak možete koristiti i online generator zaobljenih ćoškova. Procedura je vrlo jednostavna i zahteva podešavanje radijusa, boje pozadine i div-a sa sadržajem. Generator ima mogućnost da kreira i elemente sa gradijentnom pozadinom ili elemente sa okvirom i u tom slučaju je potrebno podesiti još par opcija.
Nakon izbora odgovarajućih opcija generiše se CSS i XHTML kod koji možete iskopirati na vašu web stranicu a generisane slike sačuvati u u direktorijumu sa slikama.
Dobar online servis za prebacivanje dizajna iz PSD fajla u CSS. Nije savršen, ali je jedinstven i sigurno će vam uštedeti neko vreme. Sajt sadrži i uputstvo kako da imenujete i “podesite” lejere da biste dobili što bolji krajnji rezultat.
Servis je jednostavan i što je još bolje - besplatan. Podignite (upload-ujte) PSD fajl, sačekajte par sekundi/minuta i preuzmite kod.
Naš posao (mislim na web dizajnere) sve više vuče ka programerskom. Ne kažem da ćemo postati programeri, to nikako! Ali ne možemo više raditi samo u photoshopu ne razmišljajući o tome kako ćemo dizajn pretvoriti u funkcionalnu web stranicu.
Neki dan sam imala razgovor sa programerom sa kojim dugo godina sarađujem i dotakli smo priču o tome kako današnji web dizajner više ne radi samo dizajn sajta već mora, ne da poznaje, nego da dobro vlada CSS-om. S mog aspekta to je neminovnost i ako hoću da nastavim da se bavim ovim poslom, ne mogu se ograditi od CSS-a i kodiranja. Taj deo mi nikada nije ni predstavljao problem, ali uraditi zahtevniji sajt bez tabela u početku je bio pravi izazov. Davno sam uvidela da to mogu. Sada je potrebno usavršavati se. Napraviti pomoću CSS-a stranicu sa dve ili tri kolone, zaglavljem i podnožjem je isto toliko rutina kao i napraviti samu HTML tabelu u tekst editoru. Ali sve ono ostalo je igranje, kombinovanje, planiranje i poštovanje pravila koja se moraju znati (čitaj, naučiti). Dakle, nije sveto slovo.
Danas je nezamislivo praviti sajt na stari, klasičan način kada smo sve smeštali u tabele, delili stranicu na levu i desnu kolonu tabele, bojili ćelije i dodavali klase redu ili ćelijama tabele. Sada je situacija potpuno drugačija, zanimljivija ali i mnogo teža.
Nikada nije bilo lepše baviti se web dizajnom nego sada kada je umetnost napraviti web sajt koristeći samo CSS, dobar font, što manje grafike. U poslednje vreme sam naišla na fenomenalne i užasno jednostavne sajtove koji nemaju ništa više osim zaglavlja, velikih naslova i čitljivih tekstova, I možda po koji grafički element.
Dakle, ako razmišljate da počnete da pravite sajtove, zaboravite tabele! To je davna prošlost. Ako ste iskusan web dizajner verujem da ste odavno prešli na dizajn bez tabela (tableless web design).
FreeCSSTemplates.org - Preko 300 besplatnih CSS templejta.
Solucija - Besplatni templejti
Template World - Web 2.0 stil, tableless, CSS templejti, po W3C standardima.
Pre nego što bilo šta napišem o tome šta web dizajner u Sriji treba da zna , moram da napomenem da je sve zasnovano na mom iskustvu koje sam stekla radeći sa različitim ljudima prethodnih skoro deset godina.
Kada se bavite web dizajnom na našem podneblju nemoguće je baviti se samo jednim delom izrade web sajta, odnosno kreaitvnim delom koji podrazumeva samo kreiranje dizajnerskog rešenja, odnosno sirovo dizajniranje sajta. Ukoliko biste se bavili samo tim segmentom ipak biste morali poznavati mnoge oblasti koje su usko vezane za samu strukturu strane, funkcionalnost, upotrebljivost i drugo.
Međutim, biti web dizajner u Srbiji i zarađivati hleb na taj način nije ni malo lak posao. Koliko god da ste kreativni, inspirisani ili nadahnuti, ako ne poznajete HTML, CSS, osnove programiranja, animacije, nove trendove, Flash i ko-zna-kakve-sve tehnologije, nećete opstati.
Na kursu Web dizajna koji predajem u Smart-u pokušavam polaznicima da dočaram šta ih čeka na polju dizajniranja i kreiranja sajtova, iako se vrlo malo bavimo nekim ključnim stvarima, a više vremena provodimo radeći na konkretnim primerima. I kada stignemo do časa na kome se uči HTML - obavezno dobijam pitanje “a šta će to nama?”.
Stanite, čekajte! Da li matematiku možemo da učimo a da ne znamo tablicu množenja? Da li mogu da gradim kuću ako ne znam kako se postavljaju prozori, podižu zidovi, postavlja crep? Da li mogu da slikam ako nemam ideju šta je to što želim da naslikam?
HTML - tablica množenja
Hteli to ili ne, moramo znati HTML, to je osnova, temelj, tablica množenja. Ako se ne snalazite u kodu ne možete znati šta ste pogrešno uradili ako se na strani pojavi greška. Džaba vam sav trud i kreativnost ako dizajn koji ste napravili ne umete da pretvorite u web stranu. Ok, reći ćete, postoje programi koji seku vašu stranu i to urade umesto vas, ali to zaboravite! To je nedopustivo! Već prilikom dizajniranja morate praviti sebi šablon po kome ćete kasnije stranicu “isecati”. I tu nastupa HTML, odnosno danas XHTML.
CSS
Sa razvojem tehnologije, pojavom novih servisa i sve zahtevnijim sadržajima na webu, način na koji se stranica kreira se iz korena promenio. Do juče smo koristili tabele, napravili tri kolone i tri reda, smestili navigaciju u levu kolonu, obojili je, stavili levo poravnanje i poravnanje po gornjoj liniji, u srednju kolonu ispisali tekst…. i napravismo manji sajt za par sati. Možda smo koristili CSS za definisanje pojedinih elemenata strane, a možda i nismo, nije važno.
Danas je situacija totalno drugačija. Nema tabela, nema frejmova, nema font tagova, nema praznih paragrafa da označe razmake između celina, nema dosadnih debelih naslova definisanih tagovima H1.
Dizajn bez tabela je divna stvar iz mnogo razloga koje sada neću navoditi. Osim toga, razlika između strane kreirane bez tabela pomoću CSS-a i strane kreirane upotrebom čistog HTML-a je ogromna. CSS je danas toliko obimna oblast da zahteva mnogo više od poznavanja poneke CSS oznake i na primer, strukture samog stila.
Da biste vaše dizajnersko rešenje pretvorili u web stranu morate pratiti trendove i razvijati stranu pomoću CSS-a. Divna je stvar ako radite na projektu u kome se vaš posao završava predajom PSD ili JPEG fajla sa dizajnom programeru koji će taj dizajn prebaciti u kod. Ali često to nije slučaj. Radila sam sa programerima koji su tražili iskodiranu stranu koju su zatim dalje prilagođavali tokom razvoja sajta. Ali, imam situaciju gde je moj posao da, vodeći računa sada o nekim drugim aspektima izrade web strane, izdizajniram pojedine elemente ili celu stranu koju zatim dalje prosleđujem programeru. I tada je jedan od njegovih zadataka da dizajn pretvori u CSS.
Da li to znači da je CSS zapravo programiranje? Možda i jeste. Ako nije, sigurno je vrlo blizu da to postane. A kao dobar web dizajner morate ići u korak sa razvojem tehnologija i znati CSS. Bez toga se ne možete nazivati web dizajnerom. Uvek će postojati neko ko to radi bolje i brže od vas, ali ne zaboravite da ste vi prvenstveno dizajner sajta, dakle dajete svoj pečat sajtu, kreirate njegov izgled koji će na posetioce ostavljati utisak, odnosno, kreirate imidž.
Animacija
Ne možete zamisliti sajt bez nekog animiranog dela ili banera. Ljudi vole šarenilo, vole da se na ekranu nešto pomera i da se dešava neka akcija. Ponudite klijentu statičan sajt i sa razočarenjem će vam reći da to nije ono što je on zamislio. I ovde ne treba da budete ekspert u flash-u da biste napravili jednostavnu animaciju u kojoj se smenjuje nekoliko slika (osim ako ne pravite kompletan sajt u Flash tehnologiji).
Dugo sam zaobilazila Flash i izbegavala ga kako god sam umela. Davno sam predavala osnove Flasha, čini mi se kada je bila aktuelna verzija 4 (mada to i nije bilo jako davno, možda pre tri-četiri godine). Nisam baš imala stomak do zuba u to vreme, ali se već video pa sam imala inspiraciju za animiranje cvetića i leptirića i polaznike kursa učila da ctaju leptiriće i oblake kako proleću, cvetove koji se otvaraju… Ipak mi je tada animacija delovala mnogo jednostavnija. Kada sam ponovo otvorila Flash pre nekog vremena nisam mogla da se snađem.
Najveći problem mi je tada bio da shvatim kako je neko mogao da smesti ceo sajt na trideset frejmova? kada sam ispitala sve klipove u klipovim smeštene u klipu na nekom frejmu klupko se razmotalo i vratila sam se na pravi put. Ne kažem da Flash poznajem jako dobro, ali se ne mogu ni svrstati u kategoriju početnika, bar što se Flash programa tiče.
I tako dolazimo do zaključka da je i Flash alatka koju morate znati kako da koristite. I ovde opet postoje izuzeci, a to su oni koji su posao naplatili jako dobro i mogu da angažuju profesionalca iz ove oblasti. Ali, ako vam je stalo da kljentu ispunite sve zahteve i da pri tom zaradite pristojan honorar i vežete ga za sebe, moraćete poznavati i animaciju odnosno alat kojim ćete je napraviti.
Grafički programi
Ovde ne bih mnogo širila priču, jer je sasvim jasno da su grafički programi zapravo osnovni alati sa kojima radite. Da biste što kvalitetnije uradili posao koji je pred vama morate solidno poznavati program za crtanje, program za obradu fotografija i druge alate za obradu grafike. PhotoShop je najrasprostranjeniji alat za kreiranje izgleda sajta. Treba da koristite i druge alate, na primer Adobe Fireworks, CorelDraw, Adobe Illustrator ili na primer, Corel PhotoPaint. Svaki ima svoje prednosti ali na prvo mesto stavljam Photoshop.
Svakom web dizajneru Photoshop mora biti poznato okruženje; mora da zna da radi sa maskama, selekcijama, filterima, stilovima, da radi obradu fotografija, koristi pomoćne lejere, akcije i napredne tehnike. Samo dobrim poznavanjem grafičkih programa možete ideju koju ste osmislili preneti na ekran odnosno sami napraviti dizajn.
I šta na kraju…
Daleko smo od kraja. na primer, Internet marketing je samo jedna od oblasti u koju morate zagaziti. Ako pored svega nabrojanog znate šta je upotrebljivost i optimizacija onda ste na dobrom putu da budete veoma dobar web dizajner. Međutim, ako znate da primenite sve navedeno u cilju kreiranja kvalitetnog, upotrebljivog, tehnički ispravnog, modernog sajta ujedno i optimizovanog za pretraživače, budite uvereni da ste odličan web dizajner i treba cenite svoje znanje i svoj rad.
Nemojte stati jer nisam ni dotakla mnoge oblasti koje imaju dodirnih tačaka sa web dizajnom i izradom sajta, ali mislim da sam spomenula osnovne: HTML/XHTML, CSS, kreiranje grafike, obrada fotografija, animiranje, optimizacija za pretraživače.
Dnevnik jedne Cyber macke