» »

Photoshop - web slicing

Photoshop - web slicing

Csharp ::

Rad bi se naučil razrez dizajna spletne strani v Photoshopu (uporabljam CS6). Z nekega tutoriala sem že pobral datoteko v formatu psd. Ko datoteko odprem, se prikaže slika (gre za modalno okno, kamor naj bi se vpisal nek tekst in gumb, s katerim okno zapreš). Vprašanje je, kaj lahko s Photoshopom naredim - lahko recimo ustvarim html input (textbox), kamor bom lahko vpisal tekst? Pogruntal sem že, kako shranim spletno stran (zgenerira se html in slike), vendar nikakor mi ne rata ustvarit input, textarea, button itd. Se kaj takega v Photoshopu sploh da, ali moram ročno urejat html, da bom na koncu imel vnosno polje in gumb? Če je to možno, kako se to naredi?

opeter ::

Mislim, da se ne da. Edino mogoče v Fireworks ...
Hrabri mišek (od 2015 nova serija!) -> http://tinyurl.com/na7r54l
18. november 2011 - Umrl je Mark Hall, "oče" Hrabrega miška
RTVSLO: http://tinyurl.com/74r9n7j

Ales ::

Razrez dizajna in potem dejansko programiranje kode spletne strani sta dva ločena koraka. Razrez dizajna služi le za to, da dobiš grafične elemente ustreznih velikosti in kvalitete, katere boš kasneje uporabil pri izdelavi strani. Pri tem si s Photoshopom nimaš več kaj dosti za pomagat.

To da ima ob razrezu še opcijo izvoza v HTML je bolj neuporabno kot ne, odmisli raje.

Csharp ::

Ales je izjavil:

Razrez dizajna in potem dejansko programiranje kode spletne strani sta dva ločena koraka. Razrez dizajna služi le za to, da dobiš grafične elemente ustreznih velikosti in kvalitete, katere boš kasneje uporabil pri izdelavi strani. Pri tem si s Photoshopom nimaš več kaj dosti za pomagat.

To da ima ob razrezu še opcijo izvoza v HTML je bolj neuporabno kot ne, odmisli raje.


Potem mi Photoshop nič ne pomaga, kajti elemente lahko sam izrežem in jih z html/css pozicioniram. V čem je sploh prednost uporabe Photoshopa za web slicing?

Kurzweil ::

Lahko narediš seveda iz Photoshopa design v internet stran v slikah in določiš kje so gumbi. Ampak to so prakse izpred 15 let. Povečal se ti bo load time, stran zelo verjetno ne bo responsive, s tem ko imaš veliko slik je seveda stvar počasna in je SEO (po domače optimatizacija spletne strani) zelo slab. Tebi je v interesu, da narediš stran v HTML, da je:

- responsive
- hitro se nalaga
- se mimogrede naučiš in razumeš za kaj gre
- da ne naštevam dalje.

Kar se obrazcev in form tiče, si poglej osnove html5, kjer imaš večino že omogočenega, kakšne detajle potem seveda pedenaš v CSS (recimo v Photoshopu s color pickerjem najdeš točno barvo, kot si jo imel v Photoshopu v predlogi). Za posamezne elemente (recimo background ali sam element) lahko še vedno uporabiš del razreza v Photoshopu, načeloma pa se izogibaš temu. Grafika se generira z CSS, HTML canvas, SVG, WebGl in še morje drugega. Da bo obrazec varen in zaščiten boš tako rabil zadaj še skripto da pošilja recimo to kar bo nekdo vnesel v obrazec.

Sicer pa spletne strani in Photoshop imata iz leta v leto manj skupnega, še posebej če se držiš standardov, trendov in podobnega, česar se drži večina. Recimo če že rabiš nekaj v tej smeri. Sicer pa PSD/JPG/PNG -> bolj ali manj dead!

opeter ::

Csharp je izjavil:

Potem mi Photoshop nič ne pomaga, kajti elemente lahko sam izrežem in jih z html/css pozicioniram. V čem je sploh prednost uporabe Photoshopa za web slicing?


Pred leti je bilo še smiselno, saj ti je "poenostavilo" določene korake, ki so bile prej potrebne ročne obdelave ... ali pa tudi ne, saj si moral praviloma naknadno popravljati HTML kodo katero si izvozil s pomočjo PS, če si se hotel držati standardov :)

No, ne glede na to, tu imaš kratka navodila:
http://www.creativebloq.com/adobe/image...
Hrabri mišek (od 2015 nova serija!) -> http://tinyurl.com/na7r54l
18. november 2011 - Umrl je Mark Hall, "oče" Hrabrega miška
RTVSLO: http://tinyurl.com/74r9n7j

Zgodovina sprememb…

  • spremenil: opeter ()


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Koliko bi stala taksna sletna stran (strani: 1 2 )

Oddelek: Izdelava spletišč
507016 (4308) TheBlueOne
!

Uvod v izdelavo spletnih strani (strani: 1 2 3 4 5 6 )

Oddelek: Izdelava spletišč
271243376 (41637) r1ok
»

Kako vaditi izdelavo strani?

Oddelek: Izdelava spletišč
429905 (8096) BigWhale
»

Photoshop v HTML

Oddelek: Izdelava spletišč
7704 (641) Sakew
»

Izdelava spletnih strani v Photoshopu

Oddelek: Izdelava spletišč
453596 (2644) DiTi

Več podobnih tem