Чи потрібно нам досі верстати PSD
Якось мій знайомий сказав дещо, і привернув мою увагу: "Я намагаюся навчитися верстати PSD-файли". Здавалося б, у цій заяві все зрозуміло. Коли в той момент він говорив мені про це, я мав чудове уявлення, про що йдеться, але зараз, якщо хтось скаже мені про це, він матиме на увазі зовсім інше.
Після того, як мій знайомий помітив моє збентеження, постало питання: «Адже PSD-файли досі верстають?». Чудове питання! Для новачків подібні фрази навіть є жаргоном, оскільки вони чудово пояснюють процес і потребують правильного способу дій. З цієї причини важливо, щоб більш розвинені розробники пояснювалися більш зрозумілими термінами. Сьогодні ми поринемо в теорію процесу перетворення PSD-документа на веб-сторінку, і завершимо це міркуваннями на тему переваг та недоліків розробки дизайну в браузері.
Сьогодні нам, насправді, не обов'язково перетворювати PSD-файл на HTML/CSS. Звичайно, може виникнути питання, як це можливо, але сьогоднішнє керівництво саме спрямоване на те, щоб розповісти вам про сучасні підходи веб-дизайнерів.
Нам потрібен був приклад PSD-файлу для застосування його у статті, і ми скористалися чудовим безкоштовним файлом Creative Studio Minimal від студії GraphicsFuel.com.
Що таке верстка?
Спочатку нам слід обговорити, що означає фраза «зверстати PSD». У прямому сенсі, цей процес є поділом PSD-документа на шматочки, які потім завантажуються на сервер і вистоюються в потрібному порядку в документі HTML, а потім оформляються за допомогою каскадних таблиць стилів.
На більш глибокому рівні верстку можна віднести до набору спеціальних інструментівPhotoshop. Використовуючи інструмент Slice, ми можемо розділити/нарізати наш документ на дрібні шматочки. Загалом ми просто малюємо прямокутники навколо кожного потрібного елемента на сторінці.
Інструмент верстки Photoshop дійсно дозволяє робити роботу з комфортом. Сьогодні у світі є безліч чудових веб-дизайнерів, які ніколи не користувалися цими інструментами, і в цьому немає нічого дивного.
Призначення інструментів для верстки полягає в тому, щоб значною мірою полегшити процес збереження пачки зображень як у випадку з первинним збереженням, так і згодом, коли в дизайн потрібно буде внести зміни. Коротко, інструменти просто спрямовані на збереження вашого часу та сил.
Хоча процес верстки найчастіше і призводить до головного болю і плутанини, варто визнати, що грамотно зверстаний PSD-документ може бути практично твором мистецтва. Давайте розглянемо приклад, де ми маємо кілька елементів, які потрібно зберегти в різні файли зображень. Без верстки, кожен елемент вимагатиме процесу виділення та вирізування, а потім збереження.
Якщо ж скористатися інструментом верстки, нам залишиться лише натиснути кнопку збереження для Інтернету. Всі виділені елементи будуть збережені в окремі зображення. Це значною мірою економить час і уберігає нас від нудного процесу, що повторюється, якщо робота відбувається над єдиним файлом у Photoshop.
Скорочуємо тимчасові витрати на верстку
Якщо ви досі не впевнені в надійності інструментів для верстки у Photoshop, і думаєте, що все це марна трата часу, то вам слід ознайомитися з посібником під назвою «PSD».
У цьому посібнику досить доступно і чітко описаний процес верстки за допомогою спеціальних інструментів Photoshop. Що більш важливо, ви отримаєте неймовірні поради про те, як значно покращити процес різання дизайнів. Функції типу Layer Based Slices (верстка на основі шарів) та Auto Slices (автоматична верстка) дійсно допоможуть вам полегшити собі завдання.
Чому різання дизайнів вважається застарілим методом
Ну що, тепер ви трохи знайомі з версткою. Тепер настав час розповісти про те, як цей процес видозмінився з часом. Наразі верстка принципово відрізняється від процесу, який називався цим словом кілька років тому.
Колись давним-давно взагалі ніхто не використовував CSS (жах, чи не так?). Навіть коли CSS з'явилася, технологія представила веб-дизайнерам лише деякі інструменти, які не дуже допомагали.
Згодом почали з'являтися веб-сайти, розробники яких хотіли внести щось нове в дизайн сайтів, тому вони були повністю наповнені зображеннями. Щоразу, коли дизайн містив якийсь шрифт, простеньку градацію, тінь або закруглені кути – потрібно було використовувати зображення.
Тоді якраз верстка була на першому плані. Коли створювався малюнок веб-сайту в Photoshop, спроба внести якусь родзинку в дизайн, створити більш детальну промальовування, призводила до довгого і кропіткого процесу верстки, який включав різання кожної мініатюрної деталі, і внесення її в структуру HTML-коду дизайну. Кошмар? Особливо якщо сюди ще додати катастрофічно повільний зв'язок із мережею Інтернет, через яку потрібно було потім завантажити цю величезну сторінку із сотнями зображень.
CSS витіснила зображення
Так як CSS вже сміливо крокує планетою, у веб-дизайні з'явилася нова тенденція: дизайн без використання зображень. Якщо ви періодично переглядаєте блоги, присвячені дизайну, то ще кілька років тому почали з'являтися статті під невигадливими назвами типу «Створення привабливих кнопок без зображень!». І по сьогоднішній день можна зустріти подібні посібники, тому що люди творять неймовірні речі за допомогою чистого коду CSS!
Ця тенденція не була б можливою, якби не ті чудові властивості CSS, які нам пропонує CSS. Тепер ми можемо закруглювати кути, додавати тіні, використовувати множинні фони, створювати градації, використовувати різні шрифти і робити багато іншого за допомогою всього лише коду CSS. Головною метою будь-якого сучасного веб-дизайнера є підвищити навички використання CSS, щоб знизити кількість використаних у дизайні зображень. Без зображень не означає, що зображення заборонено використовувати (пару картинок нам все одно знадобиться в дизайні), це, швидше, означає розробку веб-сторінки, використовуючи можливості коду по максимуму.
Переваги та недоліки дизайну без зображень
Будь-яка тенденція має свої плюси та мінуси. Перевага полягає в тому, що, незважаючи на сумніви багатьох людей, не пов'язаних із розробкою коду, CSS досить просто використовувати та підтримувати протягом тривалого часу. Якщо вам потрібно буде змінити невеликий елемент (типу шрифту або кольору фону), ви просто знаходите потрібний рядок коду та змінюєте пару значень. Також важливо відзначити той факт, що тисячі рядків коду CSS можна мінімізувати і досягти ефективного, швидкого завантаження.
Великий недолік, який не можна забувати, полягає в сумісності. У дизайнах із зображеннями мивикористовували PNG, і це був єдиний формат, про який ми могли хоч якось турбуватися (якщо не враховувати швидкість завантаження сторінок, звичайно). Тепер, з приходом CSS, нам і там і тут потрібно турбуватися про сумісність та підтримку. Браузери, що підтримують нові властивості, вимагають використання унікальних префіксів, що призводить до процесу написання коду, що повторюється. Деякі властивості CSS підтримуються всього лише одним браузером, інші ж властивості підтримуються у всіх браузерах, за винятком IE (деякі речі ніколи не змінюються).
Метою розробників сьогодні є розробити таку веб-сторінку, яка однаково відображатиметься у всіх користувачів. Якщо зображення може допомогти в подібній ситуації, краще використовувати його.
Менше зображень – менше верстки
Розробляючи проекти з такою ідеєю в голові, тепер варто задати питання, чи потрібна сьогодні верстка PSD-файлів?
У більшості випадків, коли ми бачимо документ PSD, у нас відразу виникає думка, що цей документ стане згодом веб-сайтом. Це нагадує момент із фільму «Матриця», коли Нео дивиться на те, що відбувається, і бачить за цим вихідний код. Веб-дизайнери не дивляться на шари та ефекти шарів, веб-дизайнери бачать div'и та CSS-властивості.
Загалом, зараз більша частина роботи є «переведенням» статичного дизайну в живий, і полягає вона в перетворенні, а не верстці. Замість того, щоб верстати опуклу кнопку та використовувати її у вигляді зображення, можна створити її заново за допомогою CSS. Це процес повторюється по всьому веб-сайту, і часто трапляється так, що зображення використовуються тільки як контент, а не дизайн.
Розробка у браузері
Перше питання, яке виникає в головах усіхновачків: «Це все, що настільки повторюється?». Спочатку ви створюєте дизайн у Photoshop, Illustrator, Fireworks (ми знаємо, що Fireworks більше підходить для створення веб-контенту, тому не обурюйтеся) або будь-якій іншій додатку для створення шаблонів, а потім цей дизайн перетворюється в браузері за допомогою коду.
Відповідь на це питання, звичайно ж, так. Зараз процес розробки дизайну переноситься у браузери. Процес починається з коду та закінчується кодом, а Photoshop використовується лише коли вам необхідно створити зображення.
Ми всі руки за ці зміни. Це допоможе значно пришвидшити процес розробки. На жаль, таким чином складніше вигадувати щось креативне. Сара Парментер нещодавно також відзначила цю проблему у своїй статті: "I can't design in the browser", в якій вона розповідає про те, що Photoshop не є найкращим варіантом для розробки динамічних та адаптивних веб-сайтів, які зараз потрібні клієнтам. Тому набагато більше можливостей нам пропонують HTML та CSS.
Як ви розробляєте веб-сайти?
Дане керівництво являє собою досить розгорнуту відповідь на питання, що спочатку здається простим. Тим не менш, це питання безпосередньо пов'язане з тим, з чим сьогодні стикаються всі, від новачків до фахівців, з проблемою вибору найкращого способу розробки дизайну веб-сайтів. Чи має творчий процес розробки дизайну бути відокремлений від процесу розробки коду, чи вони мають бути поєднані? Чи повинні ми розробляти окремо макет, а навіщо верстати його для браузера. Чи є Fireworks вирішенням цієї проблеми?
Хотілося б почути вашу думку щодо цього, а також хотілося б, щоб ви розповіли про те, як процес розробки відбувається у вас. Звідки Випочинаєте процес розробки дизайну, і яким чином ви перетворюєте його на живий веб-сайт? Якими інструментами користуєтесь? Яким має бути ідеальний інструмент розробки дизайну?