Comments 95
Я думал вложенность и именование слоёв это очевидная вещь.
Кстати, совет: именовать слои и фолдеры на английском языке — названия получаются короче. И может случиться, что верстальщик не знает русского языка.
и еще одним хорошим, замечанием, я считаю, будет — именовать файлы макетов по человечески… не по типу чтозанафиг.psd, но и это применимо к более начинающим дизайнерам, но и с такими приходится часто иметь дело…
хи… ) мне, кстати, в живую ещё ни разу не попадались макеты с «русскими» слоями…
Ужасно когда пишут транслитом (русские слова англ. буквами)!
Говорят, что в некоторых студиях за такое разрешают убийство.
Всё потому что горячие клавиши в фотошопе никак не заработают в русской раскладке
Ну это бред :(
В cs3 отлично уже все работает…
Какую версию вы используете?
это, кстати, была одна из причин по которым много лет назад начал использовать SwitchIt! и левый/правый CTRLы для переключения раскладок вместо стандартных Ctrl+shift/Ctrl+alt

З.Ы.: сейчас вместо switchIt! использую keyla. а заодно подсадил уже кучу народу на такой способ мереключения раскладки :")
Сразу бы и ссылки дали бы, особенно на вторую, не сразу например нашел. Кому лень искать: switchit.ru и code.google.com/p/keyla/wiki/ru_Main
Я думал вложенность и именование слоёв это очевидная вещь

Угу. Я тоже так думал, пока не пришёл интуитивно понятный PSD со слоями типа: «Layer 8 copy 5 copy»
В CS5 появилась спасительная кнопка «Удалить все невидимые слои».
нннн, не то. имеется ввиду — сделали слой, поексперементировали там и завтыкали удалить, а слой оч похож на какуюто из страниц…
вобщем можно наверстать лишнего )))
а чего это вы в одном месте пишете «наименование», а в другом «нейминг»? Обычно такие уродливые кальки с английского свойственны тем, кто и родной язык плохо знает. Но у вас то с русским как раз все в порядке, в чем же причина?
Приходилось иметь дело с копирайтингом, а в этой среде обычно говорят «нейминг». Вот на язык и упало.
Будет, что дизайнерам показывать. А то рисуют круто, но в слоях такой бардак ужасный. Спасибо.
Это называется творческий беспорядок :))

а если серьезно, то как правило рисуют в беспорядке, так быстрее, именуя самое ключевое и важное а потом в конце работы тратят полчаса на удаление лишнего, раскидывания по папочкам, ну и лично я выделяю специальные папки и слои активности цветом для верстальщика и в названиях слоев пишу что и где
Я же не говорю, что это сразу нужно делать. Я тоже сразу никогда не делаю ибо пока наведёшь порядок все идеи выпадут из головы. Но отдавать сложный, качественный и объёмный дизайн, где все слои в корне это слишком.
Простите, что не по теме, но откуда в русский язык пробралось выражение «нижнее подчеркивание»? Неужели есть еще и верхнее подчеркивание?
К сожалению, нет слова «надчеркивание», а потому как всякое может понадобится, иногда можно и указать где оно. Хотя, в целом, в русском языке есть выражения куда как хуже «нижнего подчеркивания».
А «надчёркивание» — это как? — т.е. я догадываюсь, что это полоска сверху, но разве есть у текста такой атрибут?
Да я уже глянул, просто ни разу не наблюдал применения в реальном проекте.
ага… полезно, вообще…
я хоть и сам верстаю то что рисую, но порой, если за верстку взялся с большим перерывом после дизайна — сам в своих же слоях путаюсь))
хоть и именую и каталогизирую, но не достаточно строго… все никак себя приучить не могу :(
А вы приучите, приучите :) Времени экономит неимоверное количество и куда как приятней работать с макетом, в котором порядок в слоях.
Я аккуратный — и слои все именую правильно, и в папочки группирую, и цвета с доп. символами иногда использую.
У меня обычно как-то все глубже корнями уходит. В итоге имеется около трех: header, main block и footer. Думаю, основные блоки «в корне» стоит называть так, чтобы было понятно, где они расположены, а потом, по мере погружения в структуру, они разворачиваются все больше и больше.
Кстати, лично меня эти цвета слоев малость раздражают, если не сказать иначе. Не могу сказать наверняка, почему же, однако предполагаю из-за того, что оно слишком ущербно смотрится и мое чувство прекрасного забивается в самый темный угол.

Хотя как сортировать папки со слоями в макете — дело хозяйское.
Цветовое выделение слоев может внести лишней сумятицы, ибо такое обозначение привычно Вам, а другой верстальщик привык, например, что красный это низ, синий – топ, и т.д.

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

И в любом случае, посмотреть что именно подразумевалось под «тень1» или «тень2», а так же все эти нижние подчеркивания и стрелки, верстальщику придется.
попробуйте хтмл… штмл не все готовы принять… даже меня немного коробит… )
UFO landed and left these words here
Одна из причин, по которой я перешёл на подчёркивание отдельным слоем, это то, что Фотошоп рисует подчёркивание на расстоянии 3px от текста, а в браузерах в мелком кегле, это расстояние всего один пиксель. Плюс подчёркивание единое с текстом, нельзя покрасить другим цветом без лишних телодвижений.
Фотошоп вообще не очень хорошо рендерит шрифты, и подчеркивания – один из моментов которое делаетеще хуже, с включеным сглаживанием на некотором наборе кеглей (пиксельная сетка не совпадает – и 1-пиксельное подчеркивание, например, становится полупрозрачным).
Тут иногда спасает Ctrl+T при большом зуме, и двигать по вертикали до получения однопиксельной линии. Но если шрифт жирный или большой кегль, то может не сработать.
Внимательнее читайте статью:
«У меня часто возникает потребность рисовать нижнее подчёркивание отдельно (без функции подчёркивания текста), так как я очень люблю экспериментировать с его цветом.»
1. нельзя изменять цвет отдельно подчеркивания
2. часто авто-подчеркивание получается размыленным на 2-3 пикселя, что выглядит неаккуратно
Понимаете ли, сначала автор пишет «О правильном», потом дальше пишет «Моя система знаков не претендует на единственно правильную.», но задрать нос и написать в заголовке надо ж было, иначе это был бы не хабр.

Вот и у нас никто не использует знаковых наименований слоев, скажем. Это вообще противоречит любым общепринятым стандартам технической документации.
По-моему, вы сейчас продемонстрировали свою логику, совершенно забыв о понимании контекста.
«Моя система знаков не претендует на единственно правильную» = «Вы не должны точь-в-точь повторять мои обозначения и цветовое кодирование, возможно вы захотите придумать что-то своё», а не «То, что я пишу в этой статье, не правильное».

Это был бы не хабр, если бы не было людей, считающих, что они говорят правду, а вместо этого просто тыкают пальцем на то, что кто-то «задирает нос».

Это статья не для консерваторов от и до соблюдающих техническую документацию и ГОСТы. Я за то, чтобы давать человеку свободу действий. Пусть он делает так, как ему удобно, если на выходе есть результат. Такой принцип я практикую в своей компании и он себя оправдывает. Поэтому то, что кто-то не практикует знаковые названия, не означает, что мои наименования не правильные и не годятся для работы.
Ну, как минимум, тут дело не в ГОСТах, а в здравом смысле, который лично мне подсказывает, что что далеко не все юникодовые символы можно отличить на глаз, а часто это критично для смысла и наполнения. Потому мы и подчеркивания, и вертикальную черту, и все остальное называем, как подобает, а не как вздумается каждому дизайнеру.
может и для новичков, да только вот даже опытным дезигнерам полезно почитать, ибо они считают, наверное, что давать имена и правильно упорядочить слои это ниже их достоинства.

Ваши опытные дезигнеры вспотеют делать макет кокого-нибудь среднего интернет портала без подобной группировки слоев, делали, делают и будут делать, ибо без этого никак.
Если сайт серьезный с кучей графики и под 500-1000 слоев и тучей изменений, то не один дизайнер не проживет в туче Layer 654 copy 256), если не придумает свою систему наименования и раскрашивания, к этому рано или поздно придет каждый, и тут дело не в достоинстве, скорее времени на начальном этапе когда нужно показать направление, получая аппрув на которое дизайнер уже приходит к порядку. А не именуются слои вначале, потому что они в ближайшее время все 50 раз изменятся, удалятся и нарисуются заново
если не сложно, вкратце обрисуйте — чем он хорош для веб-дизайнеров? :)
Есть. Из него неудобно экспортировать и там дохрена не-веб условностей.

Т.е. дизайнеру наверное понравится, а верстальщику — нет. InDesign настолько же плохо подходит для рисования веб-дизайна, как и Photoshop. Это две крайности, только вот ко второй из них все уже привыкли, а верстальщикам удобно оттуда экспортировать.

Уже обсуждал это с адептами InDesign, про верстальщиков они забывают.
Я даже в проекте, который делаю один, и макет которого никто никогда не увидит раскидываю слои по группам с логичными именами. Это как индексы в таблице БД. При разрастании меньше потери при поиске нужного
И еще на заметочку дизайнерам. При сохранении psd пожалуйста показывайте скрытые слои (например, выпадающее меню, нестандартное поведение объекта при наведении и т.п.). А то пару раз попадался, смотрю psd, оцениваю время работы, а когда уже начинаю делать, всплывают еще верстальщецкие бонусы =) Но сейчас уже привык смотреть все слои.
Тут есть одна маааленькая загвоздка. Вот буквально сейчас у меня есть макет с 12 всплывающими окнами. И все они примерно одного размера и в одном месте. Если их все открыть, то это мало вам поможет оценить объём.
Заставить людей делать все по одному единому шаблону — заранее провальная идея. Тем более что люди эти — творческие. Но, самая главная мысль все же: «Следите за порядком в слоях, символах, таймлайнах… лучше какая то система, чем бардак в материалах»
мне кажется, если дизайнер стремится стать профессионалом своего дела — у него всё должно быть high-end класса. в том числе и представление своей работы для верстальщика.
не знаю, представляете вы себе или нет, какой это ужас иметь прекрасную картинку в ста слоях размещённой, как кажется специально, в случайном порядке.
Хорошие советы даете.
Но облегчая работу верстальщика, затрудняется работа дизайнера, которому, например, нужно быстро нарисовать макет дизайна и времени разложить все слои по полочкам катастрофически нет — довольно частое явление.
Ну так надо приучать себя раскладывать по полочкам изначально. Потому как выигрыш во времени от нераскладывания нивелируется проигрышем при разбирании этой кучи.
Я не против структурирования и каталогизации, это в любом деле жирный плюс. Я говорю о срочных проектах или когда их много: дизайнеру надо придумать стиль, подобрать картинки, нарисовать макет в векторе (а это и иконки, и персонажи, и т.д.) — и ему уже по барабану разложены слои или нет, и как макет будут верстать его тоже не волнует.
это в случае если тебе за 20 минут нужно сайт сделать и забыть.
обычно работаешь несколько дней и возвращаешься к проекту, приходится что-то править — и тут уже самому невозможно разобраться в куче которую «накидал» вчера.
В процессе разработки / утверждения дизайна — пусть там хоть как в авгиевых конюшнях будет, но когда дизайнер отдает макет в верстку, он должен слои структурировать.

Ибо, получается, время дизайнера — на вес золота, а время верстальщика — так — мелочь пузатая? Давайте уважать труд друг друга, и делать каждый свою работу качественно.

Верстальщику гораздо быстрее работать именно со структурированными файлами.

Еще момент. Когда верстальщик уже верстает макет, когда он даже САМ уже внутри все структурировал, вдруг от заказчика с дизайнером приходит «незначительно-измененный-уточненный» макет. Как вы думаете, в каком случае удобнее и быстрее эти изменения «выдернуть и применить»? В случае когда макет — авгиевы конюшни, или в случае когда там все по полочкам?

Так что — рисуй ты хоть в полном хаосе, но в работу отдай — будь добр, разложи все по полочкам.
Нет, ну, если там всего пара слоев, то все действительно может быть интуитивно понятно. Другое дело, самому ведь дизайнеру неудобно, не только верстальщику.
Я не говорю, что так должно быть, а что так есть. Почему такая реакция не понятно.
Еще полезно бывает надписи, которые предполагается выводить картинками растрировать.
На счет выпадашек и прочих интерактивностей — тут помогает 2 картинки jpg (с вывалившимся меню и с неактивным меню) высылаемые верстальщику на этапе согласования.
Ну и залог успешной и в срок сделанной верстки — это профессиональный верстальщик, который не стесняется задавать вопросы по макету, что, где и как.
куда полезнее за «надписи, которые предполагается выводить картинками» отрезать дизайнеру пальцы
Случаи, они разные бывают. Например, когда использовать картинку без текста нельзя — копирайты, авторские подписи на картинках, чтобы не уперли, фирменные названия и т.д.
исключения всегда есть, но «авторские подписи на картинках» ближе к контенту, а не к шаблону. такие картинки или будут предоставлены контентерам уже с копирайтом, или или будут генериться cms'кой — контентеры драфты не увидят, а программисту хорошо бы знать-таки какой шрифт каким размером юзать.
«Авторские подписи» = «подпись об авторстве» исключительно в целях сохранности копирайта, какой тут контент, когда фотографию могут скопипастить?
Откройте сайт студии, посмотрите в правый верхний угол, в правый нижний угол. Видим надписи картинками на логотипе и элементе дизайна. Да мало ли вариантов, когда лучше использовать картинку для гарантии, что пользователь увидит именно то, что ему нужно? Какой смысл городить огород с версткой текста там где этого не требуется?
Тех, кто использует папки в слоях нужно убивать мучительной смертью :) Также как и тех, кто это придумал.
Каждый раз когда хочется выделить слой по правому клику либо по CTRL+клик, сверху оказываются папки независимо ни от чего. В результате ты не знаешь что это имя слоя или имя папки — и это доставляет огромное неудобство.

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

Тем, у кого подчеркивание не совпадет с броузером, советую попробовать подвигать интерлиньяж на 0,1-0,5 pt :)

Вероятно пора писать статью про оптимизацию работы в фотошопе.
Крупное интернет-СМИ содержало у меня около 300 слоёв. Сомневаюсь, что навигация по ним с помощью ctrl+right click удобна. В маленьких проектах может быть и нет смысла так сильно каталогизировать содержимое. Более того, я думаю, что Adobe задумается над это проблемой и нарисует пиктограмму с директорией.
Вот пример того как я организую слои. В принципе где-то близко к вашему,
но радуга в слоях меня наоборот отвлекает.

Делать «радугу» или не делать — дело каждого. Я строг к разноцветным и пёстрым интерфейсам, а вот разноцветные ярлыки и пометки я очень люблю. Что в Photoshop, что в Cubase ими пользуюсь.
у меня точно такая система, только цветом я отмечаю элементы-ссылки

Очень редко встречается, когда дизайнеры юзают Layer Comps. А очень жаль. Намного удобнее получить один файл с набором того, как выглядят страницы (и их разновидности), между которыми легко переключаться, чем 50 файлов, неизбежно обрастающими всякими инструкциями вида «актуальную шапку брать из search.psd, но логотип из index» :)

Ну и, конечно, хинты. Дизайнеров, которые на специальных hint-слоях расписывают, что какого цвета, в какую сторону в каких рамках все должно резиниться, явно указывают межстрочные и межсимвольные отступы, следует как минимум премировать.
+10 к Layer Comps. Сам не очень давно случайно открыл для себя этот инструмент и прифигел от его мощи. Юзаю его теперь при малейшей необходимости.
Слои удобно выбирать кликом по изображению, но если слой находится в папке, то вместо слоя выбирается эта папка. Можно ли как-то сделать, чтобы выбирался слой?
Спасибо огромное. Жизнь вновь заиграла красками. Птицы поют, дети бегают по лужайке, а слои в Фотошопе выделяются как по маслу.
Хочется добавить, что мало смысла в радуге, она конечно радуга и красиво и цветное, но не юзабельно имхо и вот почему:
один цвет в куче цветов заметен в 100 раз хуже чем один цвет в бесцветии. т.е. идея такая:

Есть блоки на странице, которые скрываются, двигаются, меняются и тд. Эти блоки как отдельные элементы выделяются, например оранжевым или фиолетовым, как правило использую только один цвет, это раз. И два, есть элементы, у которых есть активность, такие элементы обычно всегда выделяю зеленым и соответствующе называю, например Active, верстальщик просто промотав все стопицот слоев за 4 секунды находит единственные, нужные ему зеленые слои, которые находятся совсем не в радуге, а в бесцветном и фиолетовом. Это и для себя удобнее, надо только попробовать. Было время — раскрашивал, радуга. да. цветное, но не удобно. :) Нужно стараться минимизировать количество цветов, т.е. это 2, может-быть 3-4 но не все. Если в раскраске нет практической цели, то нужно оставить слой бесцветным, чтобы он не бросался в глаза и не отвлекал от функциональных слоев и папок
Only those users with full accounts are able to leave comments. Log in, please.