GoldenLine
Zaloguj się
Mariusz Musiał

Mariusz Musiał Scrum Master /
Front-end Developer

Temat: Kodowanie layout'u xhtml/css

Witajcie !
Chciałbym poradzić się starszych kolegów w takiej kwestii. Od grafika dostaję projekt strony , mam go pociąć i zakodować, grafik oczekuje że po zakodowaniu projekt będzie wyglądał w 99.9% tak samo jak pierwowzór. Z jakich narzędzi korzystać żeby otrzymać odwzorowanie prawie idealne (oczywiście nie chodzi mi tutaj o Photoshopa ) bardzie o narzędzia do określania "współrzędnych" np idealnie w tym samym miejscu rozmieścić poszczególne warstwy idealnie dobrać wysokość czcionek ? Chciałbym popracować nad swoimi umiejętnościami przed złożeniem Cv na stanowisko kodera w jakiejś firmie bo w takim charakterze chciałbym pracować. Do tej pory projektowałem sam grafikę i sam to później ciąłem ale jak pracuję się w większym zespole?
Link do wypowiedziLink
Wojciech Sznapka

Wojciech Sznapka CTO @ STS Zakłady
Bukmacherskie

Temat: Kodowanie layout'u xhtml/css

Dlaczego oczywiście "oprócz Photoshopa" ? Otóż mi się wydaje, że robi się to tylko photoshopem, odcięciami i potem ciach do Image Ready i masz pocięty layout. Nie wiem jak robią to nowe photoszopy, ale starsze wersje eksportowały do xhtmla używając tabelek, może nowsze już robią divami.
Ja osobiście używam aktualnie gimpa, po prostu wycinam sobie określone elementy, ładuję je do divów i w css: position:absolute/relative, left, top, wszystko idealnie da się odwzorować.
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Przepraszam, ale nie mogę się powstrzymać:
Image Ready, buahaha xD

Teraz poważnie. Do użytku w domu i ćwiczenia - IrfanView. Odczytuje w pełni poprawnie bitmapę z PSD, bo chyba takowa też znajduje się w pliku PSD (preview dokumentu). Nie ma możliwości wyłączenia poszczególnych warstw.

GIMPem otworzysz PSD i będziesz mógł grzebać w warstwach, ale za to nie zobaczysz niektórych efektów zrobionych w PS i otwierając pliki utworzone przy pomocy nowszych wersji PS możesz zobaczyć inne dziwne kwiatki, np warstwy ze spodu wychodzą na wierzch.

Testowałem też Photoshop Elements w wersji 4.0 bodajże i nie było tam możliwości wyłączenia pojedynczych warstw - jedynie całe grupy warstw. Widok pliku PSD jest bezbłędny. Możliwe że w nowszych wersjach PE zmienili coś na + w kwestii warstw. Jest sporo tańszy i sam bym w niego zainwestował, żeby nie zawracać głowy grafikom (patrz niżej)

Osobiście radzę mieć pod ręką grafika który wyłączy podane przez Ciebie warstwy w PS i zapisze obraz w BMP/PNG.
Link do wypowiedziLink
Wojciech Sznapka

Wojciech Sznapka CTO @ STS Zakłady
Bukmacherskie

Temat: Kodowanie layout'u xhtml/css

Dawid Lizak:
Przepraszam, ale nie mogę się powstrzymać:
Image Ready, buahaha xD

?
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Panowie... bez przesady. ImageReady można sobie pociąć stronkę domową, ale nie robić kod za pieniądze i wciskać taki shit klientom...

Przepraszam, poniosło mnie, ale już wyjaśniam:

Przyszło mi do głowy jeszcze jedno, bardziej sensowne wykorzystanie tego narzędzia. Czasami nie ma czasu zrobić porządnej makiety dla klienta i wtedy można użyć ImageReady. Kod utworzony przez ImageReady nie nadaje się do użytkowania. Swego czasu przebywałem nierzadko na forum webmasterskim gdzie co chwilę ktoś pytał dlaczego mu się layout rozsypuje. A dlaczego? Bo był pocięty właśnie w ImageReady. Było to dosyć dawno, ale nawet teraz nie zaufałbym czemuś co zrobił automat.

Ludzie zajmujący się zawodowo HTMLem byliby wyparci przez automat. Nie miałbym nic przeciwko. Przerzuciłbym się na co innego. Ale widać narzędzie to nie jest perfekcyjne.Dawid Lizak edytował(a) ten post dnia 28.04.08 o godzinie 01:21
Link do wypowiedziLink
Krzysztof F.

Krzysztof F. "Zbyt mało wiem by
być
niekompetentnym."

Temat: Kodowanie layout'u xhtml/css

Przepraszam ale ja tez nie moge sie powstrzymac. Co wygodne ciecie grafiki w Image Ready ma do jakosci kodu i ogolnie jakosci strony ? Bo chyba ciecie to jedno, a kodowanie szkieletu to drugie.
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Czy mógłbyś podać przykład grafiki (nie strony) pociętej w ImageReady?

Z grafiką jest tak, że czasami wymagane jest jej wbrew pozorom nielogiczne pocięcie, żeby po złożeniu w całość uzyskać zamierzony efekt. Nie zagłębiałem się w działanie ImageReady, ale po zobaczeniu kilku pociętych tak stron zauważyłem, że tnie on tylko kwadratowe klocki, które trzeba później poskładać. Zdarzają się skomplikowane sytuacje, kiedy właśnie powyższe trzeba stosować.

Inny przykład:
http://www.mozilla-europe.org/pl/products/firefox/

Obrazek


ImageReady robi transparentne PNG?

Kolejna sprawa. W sieci ważne jest, żeby uzyskane pliki miały jak najmniejszą wagę, a jak to uzyskać nie widząc efektu? ImageReady tnie i zapisuje wszystkie obrazki z jednakową kompresją - nawet gdy nie wymagają wysokiej kompresji, żeby dobrze wyglądały. Niektóre grafiki lepiej zapisać w GIF lub PNG bo mniej zajmują - tego ImageReady za nas nie zrobi. Nie przetestuje i nie dobierze optymalnej kompresji i formatu.
Link do wypowiedziLink
Kuba Markiewicz

Kuba Markiewicz frontend developer,
freelancer

Temat: Kodowanie layout'u xhtml/css

Z jakich narzędzi korzystać żeby otrzymać odwzorowanie prawie idealne (oczywiście nie chodzi mi tutaj o Photoshopa ) bardzie o narzędzia do określania "współrzędnych" np idealnie w tym samym miejscu rozmieścić poszczególne warstwy idealnie dobrać wysokość czcionek ?

ja używam Firebuga (dla Firefoxa) do tego, żeby na żywej stronie zmieniać polozenie elementów na stronie (wygonie jest to robic za pomoca strzalek na klawiaturze). Np zmieniam sobie marginesy jakiegos elementu i jak widze ze jest ok to wpisuje sobie znalezione wartosci w stylach. Czyli robie to na oko.
Jesli chodzi o wielkosc czcionki, to mozna tak samo, ale zwykle biore do grafika plik PSD i w photoshopie moge sprawdzic jaka to czcionka.
Natomiast do ciecia grafiki wygodne jest narzedzie Slice w Photoshopie, mozna nim zaznaczyc poszczegolne obrazki, a przy eksporcie (przez save for web) wybrac format, kompresje i nazwe pliku dla kazdego kawalka.
Link do wypowiedziLink
Mariusz Musiał

Mariusz Musiał Scrum Master /
Front-end Developer

Temat: Kodowanie layout'u xhtml/css

Dziękuję za wszystkie odpowiedzi. Wniosek jest taki że z moją widzą na ten temat nie jest tak źle. po pierwsze ja nie szukam narzędzia które zrobi wszystko za mnie:) Ja pracuje tak że tnę (PS slice)a później wszystko koduję "z palca" DIV. Kiedyś ubiegałem się o pracę w jednej firmę i tam był dill taki że podeślą mi layout ja go mam pociąć i zakodować i oni zobaczą czy rokuję dobrze czy nic ze mnie nie będzie. Wtedy wymiękłem bo layout był złożony a moje umiejętności małe i jeszcze te problemy z idealnym odwzorowaniem względem wzoru. Czyli kluczem do sukcesu jest dobra współpraca z grafikiem :) ?
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Z Gimpem określanie współrzędnych to nie problem, może warto zmienić soft jeśli chce się zajmowac czymś profesjonalnie?;-)Łukasz Borchmann edytował(a) ten post dnia 28.04.08 o godzinie 09:12
Link do wypowiedziLink
Krzysztof F.

Krzysztof F. "Zbyt mało wiem by
być
niekompetentnym."

Temat: Kodowanie layout'u xhtml/css

Dawid Lizak:
Czy mógłbyś podać przykład grafiki (nie strony) pociętej w ImageReady?

Z grafiką jest tak, że czasami wymagane jest jej wbrew pozorom nielogiczne pocięcie, żeby po złożeniu w całość uzyskać zamierzony efekt. Nie zagłębiałem się w działanie ImageReady, ale po zobaczeniu kilku pociętych tak stron zauważyłem, że tnie on tylko kwadratowe klocki, które trzeba później poskładać. Zdarzają się skomplikowane sytuacje, kiedy właśnie powyższe trzeba stosować.

Inny przykład:
http://www.mozilla-europe.org/pl/products/firefox/

Obrazek


ImageReady robi transparentne PNG?

Kolejna sprawa. W sieci ważne jest, żeby uzyskane pliki miały jak najmniejszą wagę, a jak to uzyskać nie widząc efektu? ImageReady tnie i zapisuje wszystkie obrazki z jednakową kompresją - nawet gdy nie wymagają wysokiej kompresji, żeby dobrze wyglądały. Niektóre grafiki lepiej zapisać w GIF lub PNG bo mniej zajmują - tego ImageReady za nas nie zrobi. Nie przetestuje i nie dobierze optymalnej kompresji i formatu.


Skoro piszesz "..Nie zagłębiałem się w działanie ImageReady.." , to po co potem tyle bzdur ? :)) Wszystko to co wypisales image ready robi i to doskonale. Wiec prosze nie wprowadzac w blad ludzi :)
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Faktycznie. Moja opinia o nim była wytworzona przez w większości niedoświadczonych użytkowników przychodzących na forum z problemami.
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Krzysztof Foltynowicz:
Wszystko to co wypisales image ready robi i to doskonale.

Serio serio potrafi zrobić taki numer, że zdecyduje że napis rzucający cień na zdjęcie zostanie (wraz z cieniem) zapisany jako PNG z przezroczystością, a samo foto jako dość mocno skompresowany JPG, a potem umieści jedno na drugim w kodzie?

A triki z ujemnymi marginesami czy pozycjonowaniem bezwzględnym z ujemnymi wartościami, kiedy coś ma wystawać poza "rodzica" też robi?

Bo jak tak, to chyba mu się przyjrzę :-)
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Mariusz Musiał:
Chciałbym poradzić się starszych kolegów w takiej kwestii. Od grafika dostaję projekt strony , mam go pociąć i zakodować, grafik oczekuje że po zakodowaniu projekt będzie wyglądał w 99.9% tak samo jak pierwowzór. Z jakich narzędzi korzystać żeby otrzymać odwzorowanie prawie idealne (oczywiście nie chodzi mi tutaj o Photoshopa ) bardzie o narzędzia do określania "współrzędnych" np idealnie w tym samym miejscu rozmieścić poszczególne warstwy idealnie dobrać wysokość czcionek ?

Ulubiony program graficzny do wycinania graficzek, mierzenia odstępów, edycji napisów, obróbki grafiki itp. Musi czytać format, w jakim grafik dostarcza projekt, więc w 90% będzie to Adobe Photoshop. :) Do tego ulubiony edytor HTML/CSS.

To w zasadzie tyle, jeśli chodzi o "wycinanie" i kodowanie. Do efektywnej pracy przydadzą się jeszcze różne dodatki do Firefoksa (Web Developer, Firebug, CSS Viewer, YSlow) i zestaw przeglądarek.
Link do wypowiedziLink
Marcin Kopczyński

Marcin Kopczyński Po prostu szczęśliwy
człowiek :)

Temat: Kodowanie layout'u xhtml/css

Bogdan Baraszkiewicz:

Ulubiony program graficzny do wycinania graficzek, mierzenia odstępów, edycji napisów, obróbki grafiki itp. Musi czytać format, w jakim grafik dostarcza projekt, więc w 90% będzie to Adobe Photoshop. :) Do tego ulubiony edytor HTML/CSS.

To w zasadzie tyle, jeśli chodzi o "wycinanie" i kodowanie. Do efektywnej pracy przydadzą się jeszcze różne dodatki do Firefoksa (Web Developer, Firebug, CSS Viewer, YSlow) i zestaw przeglądarek.

zestaw mojego kodera: photoshop(slice) + aptana + cierpliwość do IE ;)
Link do wypowiedziLink
Paweł Michalak

Paweł Michalak Programista
Java/Android/iOS

Temat: Kodowanie layout'u xhtml/css

Nie wiem dlaczego niektórzy traktują narzędzia graficzne które tną grafike, jako porgramy do składania kodu ?
Link do wypowiedziLink
Marcin Laber

Marcin Laber internet
technologies
magician

Temat: Kodowanie layout'u xhtml/css

Ja nie rozumiem, dlaczego niektórzy cięcie layoutów traktują tak dosłownie (slice tool)...
W życiu, nie jest możliwe dobre pocięcie layoutu do poprawnego i semantycznego XHTMLa korzystając z takich narzędzi. Powodzenia więc.

Moim warsztatem tylko PS i TextMate/jEdit. I najpierw HTML, później wycięcie potrzebnych na danym kroku grafik i klepanie CSSów do tego...
Link do wypowiedziLink
Paweł Golonko

Paweł Golonko Senior Front-end
Developer

Temat: Kodowanie layout'u xhtml/css

True, jak wyżej ;)

Tylko program graficzny do pocięcia elementów i edytor tekstu z kolorowaniem składni (w moim przypadku gedit). Najlepsza (i imo najszybsza) metoda :)
Link do wypowiedziLink

konto usunięte

Temat: Kodowanie layout'u xhtml/css

Widzę, że nikt wyżej o tym wspomniał, ale wszyscy zapomnieli o najważniejszym narzędziu: bo IMHO wszystko to o czym pisaliście wyżej na nic się zda jak nie użyjecie mózgu - bo nawet najlepszy soft samodzielnie nie zrobi poprawnego, semantycznego kodu...
Link do wypowiedziLink
Kuba Markiewicz

Kuba Markiewicz frontend developer,
freelancer

Temat: Kodowanie layout'u xhtml/css

A co myslicie o takim podziale pracy, ze grafik tnie grafikę (ktora pewnie sam zaprojektowal) i dostarcza ja koderowi, ktory dzieki temu moze skupic sie tylko na kodzie i nie musi dotykac programu graficznego? Pracowaliscie w ten sposob?
Moje spostrzezenia sa takie, ze mam mniej pracy, ale tez mniejsza kontrole na obrazkami, ktore dostaje. Poza tym, bez PS czuje sie troche jak bez reki ...
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Skośne meny CSS + XHTML




Wyślij zaproszenie do
Anuluj