Projektujesz stronę internetową od zera - Illustrator czy Photoshop?

11

Jeśli projektuję stronę internetową od zera i zamierzam ją później pociąć i zakodować w programie Adobe Dreamweaver, czy powinienem stworzyć projekt strony w programie Illustrator lub Photoshop? Czemu?

adobe-photoshop  adobe-illustrator  website-design  software-recommendation 
— JFW
źródło
1
Polecam Photoshopa ze względu na szersze zastosowanie i więcej samouczków.
— Jichao
6
Na początek nie należy projektować witryn internetowych przy użyciu starej metodologii „wycinania obrazu”. Najlepiej byłoby zacząć od HTML / CSS i korzystać z aplikacji graficznych.
— DA01
@Jichao: Twój komentarz powinien zostać przekształcony w odpowiedź.
— Philip Regan,
2
@ DA01 „nie powinien” może być zbyt imperatywny dla tak subiektywnej sprawy. Nie ma najlepszej praktyki dla wszystkich.
— Jari Keinänen,
2
@koiyu bardzo prawdziwe. To powiedziawszy, plastry i kości są obecnie rzadziej najlepszą praktyką. Opracuję odpowiedź.
— DA01

Odpowiedzi:

26

Szybka dosłowna odpowiedź: między Illustratorem a Photoshopem, PhotoShop, ponieważ jest to raster, podobnie jak strona internetowa.

Nieco bardziej szczegółowa odpowiedź: użyjesz obu.

Alternatywna odpowiedź: rozważ użycie programu Adobe Fireworks. Program Fireworks jest o wiele łatwiejszy w użyciu, gdy wiesz, jak go tworzyć do tworzenia grafiki internetowej.

Długa nudna odpowiedź na wykład:

Metoda „Slice-n-Dice” jest nieco przestarzała. Dziesięć lat temu był popularny, ale obecnie nie jest to zalecane podejście. Sugerowałbym:

  • Użyj dowolnej aplikacji (AI / PSD), aby „naszkicować” witrynę. Zachowaj wierność, ale traktuj to jedynie jako próbkę.

  • po ustaleniu tego zacznij budować witrynę. Zanurz się w HTML / CSS / JS.

  • w razie potrzeby wskocz do PhotoShop, aby utworzyć pojedyncze potrzebne elementy graficzne.

Czemu? Cóż, projektowanie w Photoshopie nie uwzględnia medium, w którym pracujesz. To stałe płótno, a sieć nie jest stałym płótnem, ani też nie jest standardowym płótnem. Prowadzi zespół w kierunku idealnego piksela, a sieć po prostu nie jest idealna w pikselach.

— DA01
źródło
Może moglibyśmy po prostu naprawić szerokość płótna, ponieważ istnieje wiele znanych witryn o stałej szerokości. Aby uzyskać więcej informacji, proszę zobaczyć 960.gs .
— Jichao
to doprowadzi cię do połowy. dla niektórych ekranów.
— DA01
To powinien być problem. Nie mam jednak dużych ekranów LCD, więc nie mam okazji go przetestować.
— Jichao
1
przepraszam, gdybym był tępy. Chodziło mi o to, że istnieje o wiele więcej, aby nie stała ona będąc niż płótno, czy nie jest to miejsce o stałej szerokości ... zawartość, urządzenia mobilne, technologie wspomagające, SEO, rozbieżności przeglądarka, itp
— DA01
2
+1 za polecenie Fireworks w odpowiedzi. Bardzo niedoceniana, ale potężna aplikacja do projektowania stron internetowych.
— Dwayne Charrington
7

Użyj Fireworks lub Illustrator do tworzenia logo i ikon. Do edycji zdjęć użyj Photoshopa. Dla wszystkiego innego ma to bardzo małe znaczenie. Wiem, że toczyły się debaty na temat oprogramowania graficznego, ale to naprawdę osobiste preferencje.

Pamiętaj jednak:

  • Program Fireworks jest jednak lepszy do kompresji PNG. Rozmiary plików są zwykle o 20–30% mniejsze niż w Photoshopie.

  • Jeśli wiesz, że w przyszłości będziesz projektować inne treści niepochodzące z witryny (koszulki, plakaty, ulotki itp.), Lepiej zacząć od programu wektorowego.

— Jin
źródło
+1 za „Jeśli wiesz w dół ...”, w rzeczywistości uważam, że najlepiej jest pracować, zakładając, że kluczowe elementy wizualne będą potrzebne w innych formatach. Klienci prawie nigdy nie wiedzą, do czego będą chcieli użyć, dopóki tego nie zobaczą i nigdy nie zrozumieją, że sprawienie, by obraz sieciowy RGB działał do druku, nie jest tak łatwe, jak się spodziewają ... Dobrze jest mieć coś w tylnej kieszeni od czasu do czasu „Wygląda świetnie, czy możesz wziąć ten styl i zastosować go do tych plakatów ściennych A0, które drukujemy na naszą wielką konferencję w najbliższy wtorek? Łatwo to zrobić, prawda?”
— user56reinstatemonica8
Jeśli chodzi o efektywną kompresję obrazu, nie polegam na żadnej z aplikacji Adobe. Wypróbuj coś takiego jak ImageOptim , aplikacja na komputery Mac. Istnieją inne rozwiązania lokalne i internetowe. W niektórych przypadkach otrzymasz znacznie mniejszą grafikę.
— prostokąty
6

Nie mogę się zgodzić z DA01.

Fakt, że dokument internetowy nie jest obrazem statycznym, nie ma znaczenia dla przydatności edytora graficznego do układania i projektowania strony internetowej. Makieta projektu nie musi (i nie powinna) być działającym prototypem witryny. Makieta projektu to dokument, który pomaga w wizualizacji i rzeźbieniu estetycznego wyglądu witryny.

To, że kartka papieru lub tablica nie ma wszystkich najdrobniejszych cech dokumentu internetowego, nie oznacza, że ​​nie można go użyć do tworzenia szkieletów witryny. Podobnie fakt, że okno przeglądarki można rozciągnąć i zmienić jego rozmiar, nie ma wpływu na wartość makiet projektu. Każdy doświadczony projektant stron internetowych będzie wiedział, jak zaplanować pewne elementy układu jako elastyczne i uwzględnić ograniczenia technologii sieciowych. Wszystkie elementy wizualne układu mogą być nadal reprezentowane na płaskim obrazie (w taki sposób są renderowane na ekranie).

Po drugie, fragmentaryczne podejście do projektowania nie sprzyja osiągnięciu wysokiej jakości rezultatów. Projektujesz układ strony, a nie sto odizolowanych widżetów. Bez makiety pełnego układu, po prostu klepie się rzeczy, nie mając pojęcia, jak powinien wyglądać efekt końcowy. Dodawanie pojedynczych elementów graficznych krok po kroku bez przeglądania pełnej kompozycji jest sprzeczne z dobrymi praktykami projektowymi. Projekt jest gotowy, gdy zabraknie rzeczy do usunięcia, a nie kiedy zabraknie rzeczy do dodania.

Wreszcie wprowadzanie zmian w kodzie zajmuje dużo więcej czasu niż poprawianie obrazu makiety. Dlatego zawsze powinieneś planować swój projekt w makietach, zanim zaangażujesz się w kodowanie. Niezależnie od tego, czy używasz programu do grafiki wektorowej, takiego jak Fireworks lub Illustrator, czy programu rastrowego, takiego jak Photoshop, zależy od Ciebie. Ale zawsze powinieneś udoskonalić swój projekt w edytorze graficznym, zanim zaczniesz go kodować.

— Calvin Huang
źródło
2
Nie sądzę, że się nie zgadzamy. Całkowicie się z tobą zgadzam na podstawie zmiennej „doświadczony projektant stron internetowych”. Problem polega na tym, że ludzie odpowiedzialni za makiety PSD często nie mają doświadczenia w projektowaniu stron internetowych, co powoduje różnego rodzaju bóle głowy w miarę postępu projektu. Co do „makiety pełnego układu”, zgadzam się również. Nie powiedziałbym jednak, że zawsze powinien to być lub zawsze musi być plik PSD o wysokiej wierności. Modele szkieletowe są często wystarczające.
— DA01
3
Nie zgodzę się jednak z twoim ostatnim akapitem. Musisz w pełni zagłębić się w kod, aby w pełni zaprojektować środowisko użytkownika. I często jest to kluczowy element procesu projektowania i właściwie dość łatwo wprowadzić zmiany w tym miejscu we właściwym środowisku (zwinność to dobre miejsce na rozpoczęcie).
— DA01
Trzymałbym się obu twoich opinii i prawdopodobnie zależy to również od projektów. Rozumiem oba punkty, chociaż muszę powiedzieć, że nie jestem wystarczająco cierpliwy lub czuję się zagubiony w szczegółach, jeśli najpierw zaprojektuję całą stronę w PS. Ponadto projekty w CSS wyglądają inaczej niż PS. Ponadto odkryłem, że jeśli przyzwyczaisz się do kodowania, przynajmniej dla mnie jestem szybszy niż zmienianie go w PS. I na koniec, rzeczy mogą się zmienić (nawet po starannym zaplanowaniu każdego szczegółu), a podczas kodowania wciąż często napotykam wyzwania w projektowaniu (z CSS itp.) I musiałbym się zmienić - w PS to rzadko się zdarza. .
— Chris
1

Oto dobry post wyjaśniający to w zabawny sposób :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

oto lepsze wyjaśnienie z bardzo wiarygodnego źródła „http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator”

„Ostatecznie decyzja o tym, jakiego narzędzia użyć, powinna być przepisana przez organizatora konkursu, ale ogólnie rzecz biorąc, Illustrator powinien być używany do logo i prac drukarskich, podczas gdy Photoshop powinien być używany do projektowania stron internetowych i każdego projektu, który można zobaczyć tylko na komputerze ekran."

— Ved
źródło
4
99designs nie jest wiarygodnym źródłem czegokolwiek.
— DA01
Czy jest jakiś konkretny powód, aby to powiedzieć? Dla wyjaśnienia nie współpracuję z nimi ani w żaden sposób ich nie przywiązuję, jednak w przeszłości uważałem, że ich artykuły i blogi są bardzo przydatne. Zostały one również rozpoznane przez wiele dużych nazw mediów, takich jak msnbc, New York Times itp.… Więc coś mi tu brakuje? Proszę Podziel się.
— Wed
2
I tylko po to, aby udowodnić, że moje logo Stack over flow zostało zaprojektowane pod adresem 99 Designs 99designs.com/users/245023
— Ved
2
@ DA01: zawsze wyjaśniaj, dlaczego coś nie jest wiarygodne, w przeciwnym razie twój komentarz nie będzie konstruktywny.
— Littlemad
1
Konkurs projektowy poprzez pozyskiwanie społeczności nigdy nie jest dla mnie dobry i nie powinien być promowany przez profesjonalnych projektantów. (Plus, to trochę nielegalne w moim kraju: D)
— Shikiryu
1

Jeśli potrzebujesz „krojenia”, możesz użyć bezpośrednio Photoshopa bez przechodzenia do Dreamweaver.

Istnieją dwa sposoby dzielenia na plasterki w Photoshopie, automatycznie i ręcznie, wybierając potrzebną część grafiki i zapisując ją w Internecie, po jednym kawałku.

Za każdym razem, gdy „wycinasz automatycznie” przy generowaniu HTML, decydujesz się stracić kontrolę nad kodem. Na początku kariery jest w porządku, uczysz się, ale dojdzie do punktu, w którym musisz znać kod, ponieważ dla optymalizacji lepiej jest kod ręczny w zaawansowanym edytorze tekstu (na przykład oprogramowanie Ultraedit) własny HTML i CSS.

Jedyny moment, który uważam za bardziej przydatny, to automatyczne krojenie, kiedy muszę wygenerować kod tabeli podczas projektowania wiadomości e-mail.

— Littlemad
źródło
0

Photoshop do obrazu gotowy. tzn. chodzi o treść strony. Klient nie płaci za rozszerzenie portfela. KL

— Ken Lax
źródło
2
Witamy w GD. Wydaje mi się, że rozumiem, o co ci chodzi, ale czy możesz to trochę rozwinąć?
— Farray
0

Jest oczywiste, że należy używać programu Photoshop do kompleksowych makiet projektowania stron internetowych.

Projekty programu Illustrator nadal przetwarzają się wolniej niż projekty w Photoshopie.

Jeśli projektujesz ikony i elementy internetowe, sugeruję zaprojektowanie w programie Illustrator, a następnie umieszczenie tych elementów w Photoshopie.

Jeśli tworzysz makiety w Photoshopie, możesz łatwo przenieść te dokumenty do Fireworks w celu szybkiego prototypowania.

— MarsMan
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.