—»     —»   Нужно ли нам до сих пор верстать PSD?
  Раздел: Разное   Комментариев: 4  

Нужно ли нам до сих пор верстать PSD?

Однажды мой знакомый сказал кое-что, и привлек мое внимание: «Я пытаюсь научиться верстать PSD-файлы». Казалось бы, в этом заявлении все понятно. Когда в тот момент он говорил мне об этом, я имел отличное представление, о чем идет речь, но сейчас, если кто-то скажет мне об этом, он будет иметь в виду совсем другое.

Нужно ли нам до сих пор верстать PSD?

После того, как мой знакомый заметил мое смущение, последовал вопрос: «Ведь PSD-файлы до сих пор верстают?». Отличный вопрос! Для новичков подобные фразы даже не являются жаргоном, так как они прекрасно объясняют процесс и требуют правильного образа действий. По этой причине, важно чтобы более продвинутые разработчики изъяснялись более понятными терминами. Сегодня мы окунемся в теорию процесса преобразования PSD-документа в веб-страницу, и завершим это рассуждениями на тему преимуществ и недостатков разработки дизайна в браузере.

Наш пример

Сегодня нам, в действительности, не обязательно превращать PSD-файл в HTML/CSS. Конечно же, может возникнуть вопрос, как это возможно, но сегодняшнее руководство, как раз, направлено на то, чтобы рассказать вам о современных подходах веб-дизайнеров.

Нам нужен был пример PSD-файла для применения его в статье, и мы воспользовались отличным бесплатным файлом Creative Studio Minimal от студии GraphicsFuel.com.

Нужно ли нам до сих пор верстать PSD?

Что такое верстка?

Сначала нам следует обсудить, что же означает фраза «сверстать PSD». В прямом смысле, данный процесс представляют собой разделение PSD-документа на кусочки, которые затем загружаются на сервер и выстаиваются в нужном порядке в документе HTML, а затем оформляются посредством каскадных таблиц стилей.

На более глубоком уровне верстку можно отнести к набору специальных инструментов в Photoshop. Используя инструмент Slice, мы можем разделить/нарЕзать наш документ на мелкие кусочки. В целом, мы просто рисуем прямоугольники вокруг каждого нужного элемента на странице.

Нужно ли нам до сих пор верстать PSD?

Почему верстка?

Инструмент верстки в Photoshop действительно позволяет делать работу с комфортом. Сегодня в мире есть множество потрясающих веб-дизайнеров, которые никогда не пользовались этими инструментами, и в этом нет ничего странного.

Назначение инструментов для верстки заключается в том, чтобы в значительной степени облегчить процесс сохранения пачки изображений, как в случае с первичным сохранением, так и впоследствии, когда в дизайн нужно будет внести изменения. Вкратце, инструменты просто направлены на сохранение вашего времени и сил.

Хотя процесс верстки зачастую и приводит к головным болям и путаницам, стоит признать, что грамотно сверстанный PSD-документ может быть практически произведением искусства. Давайте рассмотрим пример, где у нас есть несколько элементов, которые нужно сохранить в разные файлы изображений. Без верстки, каждый элемент будет требовать процесса выделения и вырезания, а затем сохранения.

Нужно ли нам до сих пор верстать PSD?

Если же воспользоваться инструментом верстки, нам останется лишь нажать кнопку сохранения для веб. И все выделенные элементы будут сохранены в отдельные изображения. Это в значительной степени экономит время и уберегает нас от нудного повторяющегося процесса, если работа происходит над единственным файлом в Photoshop.

Нужно ли нам до сих пор верстать PSD?

Сокращаем временные затраты на верстку

Если вы до сих пор не уверены в надежности инструментов для верстки в Photoshop, и думаете, что все это пустая трата времени, то вам следует ознакомиться с руководством под названием «How to Make Slicing Suck Less: Tips and Tricks for Slicing a 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 решением данной проблемы?

Хотелось бы услышать ваше мнение по этому поводу, а также хотелось бы, чтобы вы рассказали о том, как процесс разработки проходит у вас. Откуда вы начинаете процесс разработки дизайна, и каким образом вы превращаете его в живой веб-сайт? Какими инструментами пользуетесь? Каким должен быть идеальный инструмент разработки дизайна?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop, CSS, верстка сайта
Опубликовал Design FactoRy   Прочитано (раз): 12861   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 апреля 2012 @ 18:28
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Статья хорошая...
Вообще, если честно у каждого дизайнера свой подход к верстке.
Напишу свой пример верстки:
Для начала по иерархии думаю над:
-Тематикой сайта;
-Разметкой сайта (на листе);
-Подготавливаю изображения;
-Создаю цветовые схемы (исходя с изображений);
Далее в фотошопе прорисовываю дизайн...
Создаю папку с файлами: веб-страница и файл стилей...
Иду в редактор TopStyle, делаю скелет сайта, далее по дизайну с фотошопа, сверху вниз начинаю сохранять изображения и помещать их на веб страницу...

Вот я и поведал вкратце свой вариант создания веб-страницы. fellow


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 11 апреля 2012 @ 22:20
Написал: vasiliy0s — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У меня немного другой список:
- сначала нарисовать в привычном PS макетик для стандартного расрешения в width: 960px;
- показать макетик заказчику (лучше на раннем этапе, дабы не придумывать новый дизайн, если первый вариант не понравится);
- подготовить все изображения в PS и залить их в рабочую директорию;
- сверстать CSS, потестить, отладить;
- подключить 960.gs и протестить на разных разрешениях;
- отдать клиенту на тестирование...
И от этой привычной схемы сложно отойти!
Комментарий #3: 12 апреля 2012 @ 09:13
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
vasiliy0s, хорошая "схема", но опять же, стандарт ширины для web-контента определяется статистикой, а именно мониторами (расширением экрана) юзеров.
Хотя адаптировать можно всё и для всех. winked


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #4: 26 декабря 2012 @ 19:12
Написал: Drofa-main — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
960 Grid System.
(для быстрых проектов)

1.Набросок на бумаге.
2.Подбор цветов в ColorImpact 2.8.7.403 и выбор шрифтов.
3.Подключение 960 Grid System (выбор сетки)в граф.редвктор.
4.Создание слоев из эскиза для будущей модели сайта.
5.Нарезка пазлов по необходимости с слоеного макета с одновременным тестированием и правкой кода на локальном сервере.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031