Kako se kodira web template koji je napravljen u PS

Kako se kodira web template koji je napravljen u PS

offline
  • Pridružio: 06 Feb 2012
  • Poruke: 1843

Pozdrav svima!
Zanima me kako se kodira web template koji je napravljen u PhotoShop-u?
Gledam na YouTube channel-u Borisa wick-a, izradu web template-a pa me zanima,jer mi je to super što mogu da uradim svaku sitnicu kako ja hocu.
Za pocetak mi recite ukratko



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Software developer
  • Pridružio: 06 Sep 2005
  • Poruke: 3800
  • Gde živiš: Beograd

HTML/CSS
Ti u fotosopu crtas taj sajt, a onda ga seces i od toga pravis html/css

Imas i da ti ga on sacuva kao html ali ako se dobro secam kreira tabele i jos nesto zatarelo. Mozda u novoj verziji PS je neto pametnije uradjeno, nisam je koristio.

Dakle, pravis od te velike slike, pravis logicke celine koje uklapas u html uz pomoc css-a



offline
  • Web Dizajner
  • Pridružio: 08 Dec 2011
  • Poruke: 247
  • Gde živiš: Bar

Ja za to koristim Dw, tacnije u Ps odradim kako cu da mi izgleda i posle samo izvacim ikonice i slicno sto sam ubacio i sto ne mogu da odradim preko css.

offline
  • Pridružio: 05 Maj 2010
  • Poruke: 112

U PS se pravi slika, koja se "SLICE tool"-om iseče i "slice" pravi manje slike koje html-om edituješ..

offline
  • Pridružio: 06 Feb 2012
  • Poruke: 1843

DocNet ::U PS se pravi slika, koja se "SLICE tool"-om iseče i "slice" pravi manje slike koje html-om edituješ..
S ovim još nisam radio,pa mi nije jasno šta sad kad isiječem?Da sačuvam kao posebnu sliku?

offline
  • Pridružio: 05 Maj 2010
  • Poruke: 112

Jimmy4 ::DocNet ::U PS se pravi slika, koja se "SLICE tool"-om iseče i "slice" pravi manje slike koje html-om edituješ..
S ovim još nisam radio,pa mi nije jasno šta sad kad isiječem?Da sačuvam kao posebnu sliku?


E to sto si uradio se zove secenje, sada ides karticu

FILE->save for web devices->save(namesti pictures+HTML ispod da je)

Kada budes snimio, PS ce ti napraviti folder "images" u kom ce biti slike i fajl nesto.html u kome ce biti html kod i u kome se nalaze tabele popunjene slikama sa sourceom na ./images folder, ti ces znati gde ti je sta tako sto ces uporediti naziv slike u tabeli i naziv u folderu...

ako i dalje ne znas pogledaj ovo i sve ce ti biti jasno -> youtube.com/watch?v=tTLt-D8foQs

offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Malo je komplikovano objasniti ali 90% se radi sa CSS. Gradiente, border radius, senke tabela i slova, drugačije fontove i rotacije, možeš već raditi sa CSS3 i nešto sa jQuerijem.

Kada imaš neki template u PSD-u, uzimaš samo NEOPHODNE delove te slike, odnosno, ono što u CSS-u nemožeš uraditi, tj generisati (ikonice, oblike itd...). Te ikonice i sličice gledaš da sa u Photoshopu sa opcijom SHIFT+CTRL+ALT+S snimiš sa što manjom veličinom u kilobajtima. Znači biraš ili GIF ili PNG ili JPG format ali se tu igraš sa njegovim kvalitetom.

Posle te slike stavljaš u CSS-u kao background, podešavaš gde će biti i to je to.

OSNOVNO PRAVILO: -Izbegavaj slike u dizajnu što više možeš jer se stranice sporije učitavaju a to znači da sajt nije 100% optimizovan za svakog korisnika po SEO standardima.

Što se programa tiče, koristi Dreamweaver jer ti jako pomaže da ne pamtiš funkcije ali CSS3 moraš na internetupogledati kako se šta koristi jer ga Dreamweaver ne podržava u Help-u.

Ko je trenutno na forumu
 

Ukupno su 657 korisnika na forumu :: 34 registrovanih, 1 sakriven i 622 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., Apok, Areal84, cikadeda, dac, djurovicradmila, Drug pukovnik, goxin, indja, kalens021, Kaplar2, Konda, Krusarac, lelan, ljuba, mercedesamg, Miskohd, Najax, Nebo_M, nik8282, Oscar, Recce, Regrut Boskica, repac, sabros, simazr, The Joker, vathra, Vlad000, Vlada1389, vlahale, vlvl, vrlenija, YU-UKI