Как все грамотно распихать по слоям в Photoshop, рисуя сайт

Как все грамотно распихать по слоям в Photoshop, рисуя сайт

Вот увидел тут статью про структуру папочек в Фотошопе при рисовании сайта. Ну стал просматривать, обращая внимание больше на картинки, чем на текст. Поначалу создалось впечатление, что автор перемудрил. Наворотил кучу уровней вложенности, гору папочек... Как работать, когда все распихано по отдаленным углам? Сто раз тыкать в Layers пока не доберешься до нужной тенюшки или градиентика?

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

Веб-дизайн в Минске. Разработка сайтов.
 

Пожалуй, начну с конца. Точнее, с сути. Автор предлагает следующую структуру папок... Вернее, не так. Автор предлагает позаботиться о бедных девелоперах (бедных — это не сарказм) и раскладывать весь макет аккуратненько по папочкам. Чтобы верстальщик, желающий взять из нашего ПСДшника одну единственную кнопочку, не пучался... тьфу, не мучался и не перебирал сотню неподписанных слоев.

Предлагаемая базовая структура папок:

  • header
    • logo
    • search
    • navigation
    • слой background (бэкграунд хидера, естественно, а не всей страницы)
  • content
  • footer

С хидером все понятно, плюс-минус структура его всегда одинакова. Однако в теле страницы (content) от проекта к проекту и даже внутри одного проекта все может сильно различаться — количество колонок, деления по горизонтали, бэкграунды-фенечки-украшательства-аяксы всякие. Поэтому предалагаемый принцип организации папок таков: пусть папки отражают структуру контента.

Например, имея прототип с контентной частью, разделенной по горизонтали:

отражаем это в папках вкладывая в content папки top и bottom


папка Wireframes нужна для того, чтобы, когда начнем разукрашивать макет,
дизайн не путался с прототипом

Если будут бэкграунды, относящиеся и к top, и к bottom одновременно, то делаем снизу еще отдельную папочку background-elements или просто background:

Текст в отдельную папку

Разработчик иногда хочет наделать слайсов, и при этом чтобы не было никакого нахрен текста. Поэтому автор статьи (не я, а автор оригинальной статьи) предлагает убирать текст в папку fonts. Я не знаю, почему fonts, а не texts, особенно в свете того, что в начале статьи он написал «видите? я стараюсь называть папки как можно более просто и доходчиво». Но тем не менее, запомним — дай возможность спрятать текст, убери весь текст в отдельную папочку.

Дальше он правда советует сделать отдельные папки для просто текста и для всех заголовков:

Ну я, если честно, не уверен, что всем будет интересно и удобно городить такой огорд ради шести или даже девяти слоев. Но кусочек разума состоит в том, чтобы подписывать слои заголовков тегами h1, h2... и подписывать название шрифта, чтобы версталю не пришлось тыкать в текст и смотреть самому. Хотя тыкнуть-то может оказаться легче, чем в папки лезть. В общем, для малого количества слоев (допустим, меньше десяти) — папка «texts Georgia» или даже «тексты Georgia» и баста. Если больше, смотрите по ситуации. К слоям заголовков прибавляем префиксы h1, h2...

Навигация

Для табов и кнопок делаем папки для всех состояний, чтобы можно было потом их все за пять секунд нарезать и заняться версткой:

И опять, если текст у нас пойдет не картинками, а текстом, запихиваем его в отдельную папку, чтобы можно было за один клик спрятать:

UPD Вот написал про нарезку, а теперь сижу и думаю, сколько бы ни было табов, верстальщику все равно понадобится по три, а то и по одной картинке на каждое состояние (два уголка и градиент). Все их он получит из одного таба и тексты не сильно ему помешают эти картинки получить. Так что данный пример —  не очень удачный, но сам принцип отключаемого текста все-таки довольно положительный.

Последние напутствия

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

Чтобы не плодить лишние слои, пользуйтесь эффектом Gradient Overlay, а иллюстрации и бэкграунды слепливайте в один слой — верстальщику ведь не особо интересно, из скольки слоев сделан этот крокодил или вон тот пожарник. У меня в итоге обычно остается два файла — детализированный для меня на случай внесения изменений и лаконичный для разработчиков.

Дальше следует лирика на тему «позаботьтесь о братьях наших верстальщиках», текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст. Аминь.

Вот, вообще-то, и конец,
а кто слушал — молодец.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 25

Dr.Death
где бы такого заботливого дизайнера в природе найти :D
Саша Кириллов
ну я примерно так обычно и делаю
у Морковнина спросите :)
Grin
Моя фамилия через «а» пишется!
#
Grin  
welder
Вот, вообще-то, и конец,
а кто слушал — молодец.


тема сисек до конца не раскрыта
#
welder
Саша Кириллов
Аида Е'спика
Тему раскроет нам сисек
Получше, чем прежде

вот
#
Саша Кириллов
Алексей Сайковский
Лично мне привычнее (и быстрее) тыкать в текст и смотреть инфо о гарнитуре. Это при условии, что текст не сделан картинкой.
Сашко
Ну вы людей совсем запутали: одни в ИЛе убедительно рекомендуют делать сайты, другие в фотошопе...
#
Сашко
mongoose
И да наступит рай для нас, верстальщиков:) Памятники таким дизайнерам ставить надо. А то бывает придет макет, а в нем 60 слоев layer1...layer60 и делай с ним что хочешь:(
Alex
mongoose, 60... везет тебе по 250-300 бывает...
Zoom + move tool с отмеченным auto-select тут конечно помогает...
но как это все долго... %)

кстати, вот тут пишут все про верстальщиков, программистов - типа делайте код понятным, оставляйте комментарии для потомства и т.д... а для дизайнеров впервые вижу :) спасибо
#
Alex
mongoose
Alex, сочувствую. Мне макеты с большим количеством слоев всеже попадались только более-менее группированные
Old_Chroft
Осталось собрать всех дизайнеров в кучу и заставить их это прочитать.
Теперь буду знать, куда их слать перед тем, как макеты мне давать. Все таки на vremenno.net послать - не так жестоко, как на... ну вы поняли ;)
Валерка
тю... О_о я думал так все делают)))) а тут пишут про 60 слоев)))
#
Валерка
Саша Кириллов
Я раньше тоже думал, что все так делают. А потом мне в наследство от другого дизайнера досталась картинка, в которой несколько моментов нужно было переделать. Это был PSD аккурат слоев на 150 неподписанных. Я убил два часа, разбираясь, что из этого электричка, а что облака.
egor_bulychev
если бы все хотябы слои назвали нормально. про укладывание в папки молчу.
а то недавно прислали псд с 143 слоями аля "Layer 20"
Оолах
Что мешает тупо ткнуть по элементу с зажатым контролом/командом с Auto-Select — Layer?
Пихать по папкам элементы блоков и хидер, футер, контент — это одно. Называть каждый слой ради какого-то верстальщика, который не умеет пользоваться фотошопом это другое.
Садовский Сергей
Работаю дизайнером. Сталкивался с такими случаями, когда коллега верстальщик обращался ко мне с просьбой, отрисовать элемент сайта и нарезать его, так чтоб он мог быть резиновым.
Дизайнер предоставил макет со склеенными слоями элементов, которые должны были резиниться.
Получить другой исходный файл не удалось (Причины могут быть разными, допустим это одноразовый дизайнер с фриланса).

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

Убедился на своём опыте, что нарезку и оптимизацию графики и придумывать резиновость блоков должен дизайнер (Естественно у него должны присутствовать хотя бы теоретические знания верстки). Это уменьшит кол-во проблем при верстке и ускорит процесс. Верстальщику будет необходимо всего-лишь собрать сайт.

В идеале, это должна быть команда из 2х человек, которые работают сообща. Верстальщик помогает дизайнеру в разработке интерфейса дизайна, а дизайнер помогает верстальщику в резиновости блоков и в верстке сложных элементов (которые состоят из нескольких картинок с целью оптимизации).
Валерка
мда 150 слоев это художнику надо было конкретно извратиться)) Я бы с jpg уже лепил
#
Валерка
ContentProvider
Оолах:
> Называть каждый слой ради какого-то верстальщика,
> который не умеет пользоваться фотошопом это другое.

Типично фрилансерский подход: я на рисовал,
а что там с этим делать будут -- не моя забота.

По рукам надо таких дизайнеров, линейкой.

Когда работаешь в команде и конечный результат не безразличен, потратить 5 секунд при создании слоя для его человеческого названия становится привычкой. Это СИЛЬНО облегчает работу верстальщика и показывает профессионализм дизайнера.

Те дизайнеры, с которыми я работаю, всегда создают папки по логическим блокам и нормально называют слои.


TESKA
Это глупо. Все равно, что объяснять, как использовать папки при написании веб-проекта. Детский сад
#
TESKA
Тихонов Данил
да просто рисовать это надо в иллюстраторе и там просто раскинуть по слоям, а так больно заморочек много

имхо сайты удобнее рисовать в иллюстраторе
Макс
подписать слои и положить в папке - это уже стандарт. и ты не теряешься когда думаешь что это за "Layer 83" и уши не краснеют когда верстальщик все это дело смотрит
Владимир
Спасибо за статью. Очень интересно и грамотно)
#
Владимир  
Grafx
вычитал у Паясу идею писать имя папки капс локом, их потом когда кликаешь правой кнопкой мыши в списке слоев легче отличить слой от папки

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler