З винаходом CSS3, чи повинен веб-дизайнер використовувати Photoshop?


13

Я бачу, що багато дизайнерів створюють прекрасні роботи з веб-дизайну у Photoshop, але тепер з приходом CSS3, коли вони хочуть змінити це на HTML & CSS, вони просто починають з нуля і створюють щось близько 80% остаточного дизайну за допомогою CSS3.

Наприклад, вони використовують радіус межі, непрозорість, градієнт фону, тінь поля та текстову тінь та інші правила CSS3, щоб отримати те, що вони створили у Photoshop. Багато разів вони імпортують лише зображення з Photoshop, яке більше нагадує роботу з пензлем або логотипом, або щось подібне.

Моє запитання: чи повинні веб-дизайнери все-таки використовувати Photoshop для створення чогось, з чого лише 20% було б їм корисно?

Чи може веб-дизайнер створити весь дизайн безпосередньо в HTML & CSS, не турбуючись, щоб додати ще один середній шар створення дизайну у Photoshop, а потім просто створити там залишилися елементи?


Дизайн інтерфейсу сайту проти проектування вигляду - це дві різні теми. Photoshop робить жахливий інструмент з дротяної рами; однак такі продукти, як MockFlow, роблять жахливий візуальний інструмент. 99% моїх клієнтів НЕ можуть точно інтерпретувати дротяну рамку щодо того, як тіньовий ефект чи кольорова схема працюватимуть разом (або незліченна кількість інших візуально залежних ситуацій).
Доусон

Це має бути чат або принаймні мета. Він не має кінцевої відповіді.
b01

Відповіді:


17

Треба не погоджуватися з усіма. Photoshop не є інструментом для розробки веб-сайту. Це інструмент для замальовки веб-сайту. Веб-сайт все-таки повинен бути розроблений на тому середовищі, на якому він є - який, як правило, CSS, HTML та JS.

Це не означає, що ви не використовуєте Photoshop. Але вам точно не доведеться.

Я величезний шанувальник того, щоб ніколи не показувати дизайни веб-сайтів у фотошопі клієнтам. Це не те середовище, на якому буде жити сайт. Фотошопи не пропонують можливості спілкування взаємодії, відмінностей пристроїв, ідіосинкратії браузера, клікабельності, чуйності тощо.

Справді, насправді багато часу вам ще потрібно показувати макети JPG. Чудово. Використовуйте для цього Photoshop. Але не приймайте цей PSD-файл і нарізайте його на веб-сайті. Це мало сенс у 1999 році. Сьогодні не так багато. Замість цього візьміть цей PSD і просто використовуйте його як керівництво. Це приблизно так, як має виглядати сайт, але враховуйте той факт, що він будується в CSS / HTML / JS та вміщує за потребою.

Отже, щоб відповісти на запитання:

Чи може веб-дизайнер створити весь дизайн безпосередньо в HTML & CSS, не турбуючись, щоб додати ще один середній шар створення дизайну у Photoshop, а потім просто створити там залишилися елементи?

Так. Можна, звичайно, це зробити. Я бачив, що це робилося паралельно з дизайнерами PSD. Найбільша проблема підходу PSD - це коли ти працюєш у спритній команді. Важкі файли, які використовуються для документації (наприклад, PhotoShop), стають досить важкими обтяженнями для процесу Agile і в кінцевому підсумку додають більше проблем, ніж вони вирішують. Ми, як правило, працюємо в зворотному порядку, ми ескізуємо PS в міру необхідності, а потім розробляємо і будуємо в HTML / CSS / JS. Коли нам тоді потрібно зробити швидкі візуальні оновлення для зустрічей, ми просто знімемо на екрані розмітку робочого шару презентації та заштрихуємо її в PhotoShop та швидко налаштуємо.


Я з тобою @ DA01. +1.
Саїд Неаматі

1
+1 чудова стаття (добре, може, це не стаття), але ви точно впевнені в цьому! Я повністю згоден майже з усім, що ви сказали. Я особисто вказую на те, щоб надати своїм клієнтам макетів HTML та CSS в реальному часі з повною функціональністю дизайну, щоб вони могли «відчути» дизайн!
Web_Designer

2
+1 для "екрану знято розмітку робочого шару презентації". Поки я не прочитав цю відповідь, я думав , сказати що - щось на зразок цього в моєму власному відповіді, але я б не так багато , щоб додати, так просто я upvote це замість того, щоб ...
Aᵂᴱ

+1 Я почав більшу частину своєї дизайнерської роботи в браузері, використовуючи css3 на рік, і рідко навіть більше відкривати Photoshop.
Chris_O

1
+1! Photoshop - це насамперед програма маніпулювання растровими картами. Для легкого, добре керованого коду немає кращого способу, ніж прямі html та css. Завжди знайдуться речі, які повинні змінитись від PS до Інтернету, і як я це бачу; PS лише додає складний шар для клієнта.
benteh

7

** редагувати **

Новий клієнт?

Абсолютно - якщо ви створюєте дизайн нового Клієнта / сайту. Лей-фолк, як правило, важко бачити, що у вас (моїй) голові. Каркаси, малюнки тощо не завжди ріжуть її - подряпають - не розрізають. Я чую більше, "я думав, що це буде робити X" від клієнтів, коли все, що вони мають, - це WF або ескіз, ніж я, коли їм дають макет із їх логотипом, фотографіями, корпоративними шрифтами та інтерфейсом користувача.

Будь-який інший сценарій:

Можливо, ні - якщо ви можете використовувати існуючий HTML / CSS / JS, який відповідає вимогам роботи, або ви редагуєте вміст наявного клієнта, вам буде краще працювати лише в коді. Якщо ні, ви, ймовірно, збираєтесь витратити велику кількість часу у Photoshop за дуже невелику віддачу. Є такі випадки (як-от @ DAO1 згадується), коли скріншот і налаштування через Photoshop дійсно можуть пришвидшити процес затвердження, або забити ідею, або три.

** кінець **

Я кажу так -

Набагато простіше продавати свої конструкції (і набагато швидше створювати компі) з візуальним - навіть якщо це спрощено. Ось де ПС найбільше допомагає моїм робочим місцям.

Я також включаю шар із сітковою системою, щоб я міг бачити, як розкладаються речі, і швидко перетягніть їх туди, куди мені потрібно. Знову ж таки, це допомагає при компі та змінах із запитом клієнта.

Якщо ви зберігаєте в бібліотеці Photoshop ваші часто використовувані елементи: векторні закруглені кутові вхідні поля, ваші сітки, поле "логотип йде тут" ... все в шарах одного файлу або декількох файлів (на ваш вибір) - ви зможете створювати домашні сторінки та внутрішні сторінки за частину часу, необхідного для їх кодування.

Збереження загального файлу CSS (з популярними налаштуваннями) також допоможе, коли настане час кодування, але я не бачу значення виключення PS з робочого потоку - незалежно від того, наскільки надійним стає CSS.


"за частку часу, що потрібно для їх кодування", що дійсно залежить від цілої кількості речей - включаючи набір майстерності дизайнера. Я вважаю, що часто змінювати / налаштовувати клієнтські зміни безпосередньо в CSS / HTML / JS швидше, ніж повертатися в Photoshop. Але це залежить від безлічі факторів.
DA01,

DA01 - абсолютно. Мій робочий потік змінюється по мірі дозрівання проекту. Після запуску PSD не торкаються.
Доусон,

3

Чи можете ви гарантувати, що 100% ваших користувачів мають веб-переглядачі, які побачать ваш сайт саме так, як ви (або що ще важливіше, клієнт) плануєте його бачити? Ні? Тоді який відсоток? 90%? 80%?

Чи можете ви переконатися, що вона деградує добре, щоб альтернативна версія, яку бачили інші 10% (20%? 40%?), Була прийнятною?

Якщо одна чи обидві ці проблеми є проблемою, вам потрібен Photoshop.


Вибачте; чому так? Чи можете ви пояснити, що ви маєте на увазі?
benteh

@boblet Будь ласка, будьте конкретними у своєму запитанні. Поясніть, що?
Лорен-Ясний-Моніка-Іпсум

Ах, вибачте; Мені було цікаво, чому ви кажете, що вам потрібен певний PS через відсутність узгодженості браузера? Якось для мене це не має сенсу.
benteh

@boblet Що я маю на увазі, що за допомогою деяких ефектів (наприклад, закруглених кутів) ви можете їх створити в CSS або Photoshop. Але старші веб-переглядачі не можуть обробляти закруглені кути CSS; вони виходять як звичайні куточки коробки. Тож якщо круглий кут дійсно важливий, ви повинні використовувати Photoshop, щоб створити його як графічний, щоб усі браузери могли його бачити.
Лорен-Ясний-Моніка-Іпсум

Ага! Це має трохи більше сенсу. Я зараз бачу, що це старий пост, і в наші дні css закруглені куточки, тіні тощо вже насправді не є проблемою. Я просто переймався практикою створення чудових макетів в PS, а потім натрапляв на проблеми, що перетворювали це на розумний код. Клієнтам часто важко проковтнути це; оскільки вони часто не розуміють містку, який повинен закрити розрив між растровою картою та кодом. Дякуємо за пояснення.
benteh

2

Що варто подумати:

  • Дуже багато вкладається в розміщення цих фантазійних дизайнів в Інтернеті. Принаймні для більш складних. Photoshop допомагає швидше бачити кінцевий результат.

  • Для дизайнера, який займається своєю роботою, робити макет у Photoshop зазвичай швидше, виправданіше, оскільки ви не витратите цілий день на злому в html та CSS3.

  • Як ви вже згадували, вони можуть робити 80% цього в CSS3, але тоді їм з часом знадобиться Photoshop.

  • Я заперечую, що ви відмовилися робити макет у Photoshop, якщо ви дизайнер і розробник, і це заощадить час, інакше завжди робіть макет у Photoshop.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.