Czy wraz z wynalezieniem CSS3 projektant stron internetowych powinien używać programu Photoshop?


13

Widzę, że wielu projektantów tworzy piękne prace projektowe w Photoshopie, ale teraz wraz z pojawieniem się CSS3, kiedy chcą zmienić to na HTML i CSS, po prostu zaczynają od zera i tworzą coś około 80% końcowego projektu za pomocą CSS3.

Na przykład używają promienia obramowania, krycia, gradientu tła, cienia ramki i cienia tekstu oraz innych reguł CSS3, aby uzyskać to, co utworzyli w Photoshopie. Wiele razy importują tylko obraz z Photoshopa, który bardziej przypomina pędzel lub logo lub coś podobnego.

Moje pytanie brzmi: czy projektanci stron internetowych powinni nadal używać Photoshopa do tworzenia czegoś, z czego tylko 20% byłoby dla nich przydatne?

Czy projektant stron internetowych może stworzyć cały projekt bezpośrednio w HTML i CSS, nie zawracając sobie głowy dodaniem kolejnej środkowej warstwy tworzenia projektu w Photoshopie, a następnie po prostu utworzyć tam pozostałe elementy?


Projektowanie interfejsu witryny a projektowanie wyglądu to dwa różne tematy. Photoshop tworzy okropne narzędzie do tworzenia ramek; jednak produkty takie jak MockFlow stanowią straszne narzędzie wizualne. 99% moich klientów NIE MOŻE dokładnie zinterpretować szkieletu, w jaki sposób efekt cienia lub schemat kolorów będą ze sobą współpracować (lub niezliczone inne sytuacje zależne od wzroku).
Dawson,

Powinien to być czat lub przynajmniej meta. Nie ma skończonej odpowiedzi.
b01,

Odpowiedzi:


17

Nie zgadzam się ze wszystkimi. Photoshop nie jest narzędziem do projektowania strony internetowej. Jest to narzędzie do szkicowania strony internetowej. Strona internetowa powinna być nadal zaprojektowana na nośniku, w którym się znajduje - zwykle CSS, HTML i JS.

To nie znaczy, że nie korzystasz z Photoshopa. Ale na pewno nie musisz.

Jestem wielkim fanem nie pokazywania klientom projektów stron internetowych w Photoshopie. To nie jest medium, w którym będzie żyła strona. Kompozycje Photoshopa nie oferują możliwości komunikowania interakcji, różnic między urządzeniami, osobliwości przeglądarki, klikalności, czasu reakcji itp.

Trzeba przyznać, że w rzeczywistości dużo czasu potrzeba na pokazywanie makiet JPG. W porządku. Użyj do tego Photoshopa. Ale nie bierz tego pliku PSD i pokrój go w kostkę na stronie internetowej. To miało sens w 1999 roku. Dzisiaj nie tyle. Zamiast tego weź PSD i po prostu użyj go jako przewodnika. Tak właśnie powinna wyglądać strona, ale należy wziąć pod uwagę fakt, że jest ona budowana w CSS / HTML / JS i dostosowuje się w razie potrzeby.

Tak więc, aby odpowiedzieć na pytanie:

Czy projektant stron internetowych może stworzyć cały projekt bezpośrednio w HTML i CSS, nie zawracając sobie głowy dodaniem kolejnej środkowej warstwy tworzenia projektu w Photoshopie, a następnie po prostu utworzyć tam pozostałe elementy?

Tak. Z pewnością można to zrobić. Widziałem to równolegle z projektantami PSD. Największym problemem związanym z podejściem PSD jest praca w zwinnym zespole. Ciężkie pliki wykorzystywane do dokumentacji (takie jak PhotoShop) stają się dość dużym obciążeniem dla procesu Agile i ostatecznie dodają więcej problemów niż rozwiązują. Mamy tendencję do pracy w odwrotnej kolejności ... szkicujemy w PS w razie potrzeby, a następnie projektujemy i budujemy w HTML / CSS / JS. Kiedy będziemy musieli dokonać szybkich aktualizacji wizualnych spotkań, po prostu zrzut ekranu działającego znacznika warstwy prezentacji, uderzenie go w PhotoShop i szybkie dostosowanie.


Jestem z tobą @ DA01. +1.
Saeed Neamati,

1
+1 świetny artykuł (okej, może nie jest to artykuł), ale na pewno dobrze to podsumowałeś! Całkowicie zgadzam się ze wszystkim, co powiedziałeś. Osobiście staram się zapewnić moim klientom makiety HTML i CSS na żywo z pełną funkcjonalnością projektowania, aby mogli „doświadczyć” projektu!
Web_Designer,

2
+1 za „zrzut ekranu roboczego znacznika warstwy prezentacji”. Dopóki nie przeczytałem tej odpowiedzi, zastanawiałem się nad powiedzeniem czegoś takiego w mojej własnej odpowiedzi, ale nie miałbym wiele do dodania, więc po prostu głosuję to ...
Aᵂᴱ

+1 Większość prac projektowych zacząłem przeglądać za pomocą css3 raz w roku i rzadko nawet otwieram Photoshopa.
Chris_O

1
+1! Photoshop to przede wszystkim program do manipulacji bitmapami. W przypadku lekkiego, dobrze kontrolowanego kodu nie ma lepszego sposobu niż bezpośredni html i css. Zawsze będą rzeczy, które muszą się zmienić z PS na sieć i tak, jak ja to widzę; PS dodaje tylko komplikującą warstwę dla klienta.
benteh

7

** EDYTOWAĆ **

Nowy klient?

Absolutnie - jeśli opracowujesz projekt dla NOWEGO klienta / witryny. Świeccy na ogół mają trudności z zobaczeniem, co masz w (mojej) głowie. Modele, rysunki itp. Nie zawsze go wycinają - rysują - nie wycinają. Słyszę więcej: „Myślałem, że to zrobi X” od klientów, gdy wszystko, co mają, to WF lub szkic, niż kiedy robią im makietę z logo, zdjęciami, czcionkami firmowymi i interfejsem użytkownika.

Każdy inny scenariusz:

Może nie - jeśli możesz użyć istniejącego HTML / CSS / JS, który spełnia wymagania zadania lub edytujesz zawartość istniejącego klienta, lepiej będzie pracować tylko w kodzie. Jeśli nie, prawdopodobnie zmarnujesz dużą ilość czasu w Photoshopie za bardzo mały zwrot. Są przypadki (jak wspomniany @ DAO1), w których zrzut ekranu i poprawianie przez Photoshopa mogą naprawdę przyśpieszyć proces zatwierdzania lub wypracować pomysł lub trzy.

** koniec **

Powiedziałem tak -

O wiele łatwiej jest sprzedawać swoje projekty (i znacznie szybciej tworzyć kompozycje) z grafiką - nawet jeśli jest to uproszczone. Właśnie tam PS jest najbardziej pomocny w mojej pracy.

Dołączam również warstwę z systemem siatki, dzięki czemu mogę zobaczyć, jak się układa, i szybko przeciągam je tam, gdzie ich potrzebuję. Ponownie pomaga to w kompilacjach i zmianach żądanych przez klienta.

Jeśli przechowujesz bibliotekę Photoshopa najczęściej używanych elementów: oparte na wektorze zaokrąglone narożne pola wprowadzania, siatka (siatki), pole „logo idzie tutaj” ... wszystko w warstwach jednego pliku lub wielu plików (do wyboru) - będziesz w stanie zbudować strony główne i strony wewnętrzne w ułamku czasu potrzebnego do ich kodowania.

Utrzymanie wspólnego pliku CSS (z popularnymi ustawieniami) pomoże również, jeśli chodzi o czas na kodowanie, ale nie widzę wartości eliminowania PS z przepływu pracy - niezależnie od tego, jak silny jest CSS.


„w ułamku czasu potrzebnego na ich zakodowanie”, co naprawdę zależy od wielu rzeczy - w tym od umiejętności projektanta. Uważam, że często szybsze jest wprowadzanie zmian / poprawek klienta bezpośrednio w CSS / HTML / JS niż powrót do Photoshopa. Ale to zależy od wielu czynników.
DA01

DA01 - absolutnie. Mój przepływ pracy zmienia się w miarę dojrzewania projektu. Po uruchomieniu PSD nie są dotykane.
Dawson,

3

Czy możesz zagwarantować, że 100% użytkowników ma przeglądarki, które będą wyświetlać Twoją witrynę dokładnie tak, jak Ty (lub, co ważniejsze, klient), zamierzasz ją zobaczyć? Nie? Jaki procent? 90%? 80%?

Czy możesz upewnić się, że ładnie się degraduje, aby alternatywna wersja widoczna przez pozostałe 10% (20%? 40%?) Była akceptowalna?

Jeśli jeden lub oba z tych problemów stanowi problem, potrzebujesz programu Photoshop.


Przepraszam; dlaczego? Czy możesz wyjaśnić, co masz na myśli?
benteh

@ boblet Prosimy o sprecyzowanie pytania. Wyjaśnij co?
Lauren-Clear-Monica-Ipsum

O przepraszam; Zastanawiałem się, dlaczego mówisz, że potrzebujesz PS z powodu braku spójności przeglądarki? Jakoś nie ma to dla mnie sensu.
benteh

@ boblet Mam na myśli to, że z niektórymi efektami (np. zaokrąglonymi narożnikami) możesz go utworzyć w CSS lub Photoshopie. Ale starsze przeglądarki nie obsługują zaokrąglonych rogów CSS; wychodzą jak zwykłe rogi pudełka. Więc jeśli okrągły narożnik jest naprawdę ważny, musisz użyć Photoshopa, aby utworzyć go jako grafikę, aby wszystkie przeglądarki mogły go zobaczyć.
Lauren-Clear-Monica-Ipsum

Aha! To ma trochę więcej sensu. Widzę jednak teraz, że jest to stary post, a obecnie css zaokrąglone rogi, cienie itp. Nie jest już tak naprawdę problemem. Zajmowałem się tylko tworzeniem zachwycających makiet w PS, a potem wpadaniem na problemy z tłumaczeniem tego na rozsądny kod. Klientom często trudno jest to przełknąć; ponieważ często nie rozumieją mostu, który musi wypełnić lukę między bitmapą a kodem. Dziękuję za wyjaśnienie.
benteh

2

Rzeczy do przemyślenia:

  • Dużo wkłada się w umieszczanie tych fantazyjnych projektów w Internecie. Przynajmniej dla bardziej złożonych. Photoshop pomaga szybciej zobaczyć efekt końcowy.

  • Dla projektanta w swojej pracy wykonanie makiety w Photoshopie jest zwykle szybsze, uzasadnione, ponieważ nie spędzasz całego dnia na hakowaniu html i CSS3.

  • Jak wspomniałeś, mogą zrobić 80% tego w CSS3, ale w końcu będą potrzebować programu Photoshop.

  • Twierdziłbym, że rezygnujesz z robienia makiety w Photoshopie, jeśli jesteś projektantem i programistą, a to oszczędziłoby czas, w przeciwnym razie zawsze rób makiety w Photoshopie.

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.