Comments 95
Я думал вложенность и именование слоёв это очевидная вещь.
Кстати, совет: именовать слои и фолдеры на английском языке — названия получаются короче. И может случиться, что верстальщик не знает русского языка.
Кстати, совет: именовать слои и фолдеры на английском языке — названия получаются короче. И может случиться, что верстальщик не знает русского языка.
+41
Очень хорошее замечание.
+6
хи… ) мне, кстати, в живую ещё ни разу не попадались макеты с «русскими» слоями…
+6
Ужасно когда пишут транслитом (русские слова англ. буквами)!
+6
мне, к сожалению, попадались…
0
Полным полно, вам просто везет.
+2
Всё потому что горячие клавиши в фотошопе никак не заработают в русской раскладке
0
Эммм… они вроде с CS4? преотлично работают.
0
Ну это бред :(
В cs3 отлично уже все работает…
Какую версию вы используете?
В cs3 отлично уже все работает…
Какую версию вы используете?
0
работают и в 4 и в 5м)
0
начиная с cs3 все ок, а раньше да) было дело, бесило сильно
0
это, кстати, была одна из причин по которым много лет назад начал использовать SwitchIt! и левый/правый CTRLы для переключения раскладок вместо стандартных Ctrl+shift/Ctrl+alt
З.Ы.: сейчас вместо switchIt! использую keyla. а заодно подсадил уже кучу народу на такой способ мереключения раскладки :")
З.Ы.: сейчас вместо switchIt! использую keyla. а заодно подсадил уже кучу народу на такой способ мереключения раскладки :")
0
Я думал вложенность и именование слоёв это очевидная вещь
Угу. Я тоже так думал, пока не пришёл интуитивно понятный PSD со слоями типа: «Layer 8 copy 5 copy»
+4
фиг там, это хорошо если в макете нет нерабочих слоёв…
0
а чего это вы в одном месте пишете «наименование», а в другом «нейминг»? Обычно такие уродливые кальки с английского свойственны тем, кто и родной язык плохо знает. Но у вас то с русским как раз все в порядке, в чем же причина?
+3
UFO just landed and posted this here
Это называется творческий беспорядок :))
а если серьезно, то как правило рисуют в беспорядке, так быстрее, именуя самое ключевое и важное а потом в конце работы тратят полчаса на удаление лишнего, раскидывания по папочкам, ну и лично я выделяю специальные папки и слои активности цветом для верстальщика и в названиях слоев пишу что и где
а если серьезно, то как правило рисуют в беспорядке, так быстрее, именуя самое ключевое и важное а потом в конце работы тратят полчаса на удаление лишнего, раскидывания по папочкам, ну и лично я выделяю специальные папки и слои активности цветом для верстальщика и в названиях слоев пишу что и где
0
Простите, что не по теме, но откуда в русский язык пробралось выражение «нижнее подчеркивание»? Неужели есть еще и верхнее подчеркивание?
+3
К сожалению, нет слова «надчеркивание», а потому как всякое может понадобится, иногда можно и указать где оно. Хотя, в целом, в русском языке есть выражения куда как хуже «нижнего подчеркивания».
+3
Сиё есть тайна великая!
0
ага… полезно, вообще…
я хоть и сам верстаю то что рисую, но порой, если за верстку взялся с большим перерывом после дизайна — сам в своих же слоях путаюсь))
хоть и именую и каталогизирую, но не достаточно строго… все никак себя приучить не могу :(
я хоть и сам верстаю то что рисую, но порой, если за верстку взялся с большим перерывом после дизайна — сам в своих же слоях путаюсь))
хоть и именую и каталогизирую, но не достаточно строго… все никак себя приучить не могу :(
0
Я аккуратный — и слои все именую правильно, и в папочки группирую, и цвета с доп. символами иногда использую.
+1
У меня обычно как-то все глубже корнями уходит. В итоге имеется около трех: header, main block и footer. Думаю, основные блоки «в корне» стоит называть так, чтобы было понятно, где они расположены, а потом, по мере погружения в структуру, они разворачиваются все больше и больше.
Кстати, лично меня эти цвета слоев малость раздражают, если не сказать иначе. Не могу сказать наверняка, почему же, однако предполагаю из-за того, что оно слишком ущербно смотрится и мое чувство прекрасного забивается в самый темный угол.
Хотя как сортировать папки со слоями в макете — дело хозяйское.
Кстати, лично меня эти цвета слоев малость раздражают, если не сказать иначе. Не могу сказать наверняка, почему же, однако предполагаю из-за того, что оно слишком ущербно смотрится и мое чувство прекрасного забивается в самый темный угол.
Хотя как сортировать папки со слоями в макете — дело хозяйское.
0
Цветовое выделение слоев может внести лишней сумятицы, ибо такое обозначение привычно Вам, а другой верстальщик привык, например, что красный это низ, синий – топ, и т.д.
Что действительно облегчает понимание файла, так это грамотные названия и группирование слоев, но все же на англ. языке.
И в любом случае, посмотреть что именно подразумевалось под «тень1» или «тень2», а так же все эти нижние подчеркивания и стрелки, верстальщику придется.
Что действительно облегчает понимание файла, так это грамотные названия и группирование слоев, но все же на англ. языке.
И в любом случае, посмотреть что именно подразумевалось под «тень1» или «тень2», а так же все эти нижние подчеркивания и стрелки, верстальщику придется.
+1
Вы делаете так
<img src«img693.imageshack.us/img693/802/60463341.jpg» />
Мне интересно, почему вы не делаете вот так
<img src«img707.imageshack.us/img707/1732/33744660.jpg» />
<img src«img693.imageshack.us/img693/802/60463341.jpg» />
Мне интересно, почему вы не делаете вот так
<img src«img707.imageshack.us/img707/1732/33744660.jpg» />
0
И почему хабра не приняла штмл код?
0
Одна из причин, по которой я перешёл на подчёркивание отдельным слоем, это то, что Фотошоп рисует подчёркивание на расстоянии 3px от текста, а в браузерах в мелком кегле, это расстояние всего один пиксель. Плюс подчёркивание единое с текстом, нельзя покрасить другим цветом без лишних телодвижений.
+3
Фотошоп вообще не очень хорошо рендерит шрифты, и подчеркивания – один из моментов которое делаетеще хуже, с включеным сглаживанием на некотором наборе кеглей (пиксельная сетка не совпадает – и 1-пиксельное подчеркивание, например, становится полупрозрачным).
0
Внимательнее читайте статью:
«У меня часто возникает потребность рисовать нижнее подчёркивание отдельно (без функции подчёркивания текста), так как я очень люблю экспериментировать с его цветом.»
«У меня часто возникает потребность рисовать нижнее подчёркивание отдельно (без функции подчёркивания текста), так как я очень люблю экспериментировать с его цветом.»
0
1. нельзя изменять цвет отдельно подчеркивания
2. часто авто-подчеркивание получается размыленным на 2-3 пикселя, что выглядит неаккуратно
2. часто авто-подчеркивание получается размыленным на 2-3 пикселя, что выглядит неаккуратно
0
А я вот не считаю, что ваше наименование — правильное.
0
Обоснуй.
+1
Понимаете ли, сначала автор пишет «О правильном», потом дальше пишет «Моя система знаков не претендует на единственно правильную.», но задрать нос и написать в заголовке надо ж было, иначе это был бы не хабр.
Вот и у нас никто не использует знаковых наименований слоев, скажем. Это вообще противоречит любым общепринятым стандартам технической документации.
Вот и у нас никто не использует знаковых наименований слоев, скажем. Это вообще противоречит любым общепринятым стандартам технической документации.
0
По-моему, вы сейчас продемонстрировали свою логику, совершенно забыв о понимании контекста.
«Моя система знаков не претендует на единственно правильную» = «Вы не должны точь-в-точь повторять мои обозначения и цветовое кодирование, возможно вы захотите придумать что-то своё», а не «То, что я пишу в этой статье, не правильное».
Это был бы не хабр, если бы не было людей, считающих, что они говорят правду, а вместо этого просто тыкают пальцем на то, что кто-то «задирает нос».
Это статья не для консерваторов от и до соблюдающих техническую документацию и ГОСТы. Я за то, чтобы давать человеку свободу действий. Пусть он делает так, как ему удобно, если на выходе есть результат. Такой принцип я практикую в своей компании и он себя оправдывает. Поэтому то, что кто-то не практикует знаковые названия, не означает, что мои наименования не правильные и не годятся для работы.
«Моя система знаков не претендует на единственно правильную» = «Вы не должны точь-в-точь повторять мои обозначения и цветовое кодирование, возможно вы захотите придумать что-то своё», а не «То, что я пишу в этой статье, не правильное».
Это был бы не хабр, если бы не было людей, считающих, что они говорят правду, а вместо этого просто тыкают пальцем на то, что кто-то «задирает нос».
Это статья не для консерваторов от и до соблюдающих техническую документацию и ГОСТы. Я за то, чтобы давать человеку свободу действий. Пусть он делает так, как ему удобно, если на выходе есть результат. Такой принцип я практикую в своей компании и он себя оправдывает. Поэтому то, что кто-то не практикует знаковые названия, не означает, что мои наименования не правильные и не годятся для работы.
0
Ну, как минимум, тут дело не в ГОСТах, а в здравом смысле, который лично мне подсказывает, что что далеко не все юникодовые символы можно отличить на глаз, а часто это критично для смысла и наполнения. Потому мы и подчеркивания, и вертикальную черту, и все остальное называем, как подобает, а не как вздумается каждому дизайнеру.
0
так, статья для совсем новичков.
+1
может и для новичков, да только вот даже опытным дезигнерам полезно почитать, ибо они считают, наверное, что давать имена и правильно упорядочить слои это ниже их достоинства.
+1
Ваши опытные дезигнеры вспотеют делать макет кокого-нибудь среднего интернет портала без подобной группировки слоев, делали, делают и будут делать, ибо без этого никак.
0
Если сайт серьезный с кучей графики и под 500-1000 слоев и тучей изменений, то не один дизайнер не проживет в туче Layer 654 copy 256), если не придумает свою систему наименования и раскрашивания, к этому рано или поздно придет каждый, и тут дело не в достоинстве, скорее времени на начальном этапе когда нужно показать направление, получая аппрув на которое дизайнер уже приходит к порядку. А не именуются слои вначале, потому что они в ближайшее время все 50 раз изменятся, удалятся и нарисуются заново
0
Есть ли какая-то причина, чтобы верстать в Photoshop, а не в программе для вёрстки?
+1
Есть. Из него неудобно экспортировать и там дохрена не-веб условностей.
Т.е. дизайнеру наверное понравится, а верстальщику — нет. InDesign настолько же плохо подходит для рисования веб-дизайна, как и Photoshop. Это две крайности, только вот ко второй из них все уже привыкли, а верстальщикам удобно оттуда экспортировать.
Уже обсуждал это с адептами InDesign, про верстальщиков они забывают.
Т.е. дизайнеру наверное понравится, а верстальщику — нет. InDesign настолько же плохо подходит для рисования веб-дизайна, как и Photoshop. Это две крайности, только вот ко второй из них все уже привыкли, а верстальщикам удобно оттуда экспортировать.
Уже обсуждал это с адептами InDesign, про верстальщиков они забывают.
0
Я даже в проекте, который делаю один, и макет которого никто никогда не увидит раскидываю слои по группам с логичными именами. Это как индексы в таблице БД. При разрастании меньше потери при поиске нужного
+3
И еще на заметочку дизайнерам. При сохранении psd пожалуйста показывайте скрытые слои (например, выпадающее меню, нестандартное поведение объекта при наведении и т.п.). А то пару раз попадался, смотрю psd, оцениваю время работы, а когда уже начинаю делать, всплывают еще верстальщецкие бонусы =) Но сейчас уже привык смотреть все слои.
0
Заставить людей делать все по одному единому шаблону — заранее провальная идея. Тем более что люди эти — творческие. Но, самая главная мысль все же: «Следите за порядком в слоях, символах, таймлайнах… лучше какая то система, чем бардак в материалах»
0
мне кажется, если дизайнер стремится стать профессионалом своего дела — у него всё должно быть high-end класса. в том числе и представление своей работы для верстальщика.
не знаю, представляете вы себе или нет, какой это ужас иметь прекрасную картинку в ста слоях размещённой, как кажется специально, в случайном порядке.
не знаю, представляете вы себе или нет, какой это ужас иметь прекрасную картинку в ста слоях размещённой, как кажется специально, в случайном порядке.
+1
Хорошие советы даете.
Но облегчая работу верстальщика, затрудняется работа дизайнера, которому, например, нужно быстро нарисовать макет дизайна и времени разложить все слои по полочкам катастрофически нет — довольно частое явление.
Но облегчая работу верстальщика, затрудняется работа дизайнера, которому, например, нужно быстро нарисовать макет дизайна и времени разложить все слои по полочкам катастрофически нет — довольно частое явление.
+1
Ну так надо приучать себя раскладывать по полочкам изначально. Потому как выигрыш во времени от нераскладывания нивелируется проигрышем при разбирании этой кучи.
+3
Я не против структурирования и каталогизации, это в любом деле жирный плюс. Я говорю о срочных проектах или когда их много: дизайнеру надо придумать стиль, подобрать картинки, нарисовать макет в векторе (а это и иконки, и персонажи, и т.д.) — и ему уже по барабану разложены слои или нет, и как макет будут верстать его тоже не волнует.
-3
это в случае если тебе за 20 минут нужно сайт сделать и забыть.
обычно работаешь несколько дней и возвращаешься к проекту, приходится что-то править — и тут уже самому невозможно разобраться в куче которую «накидал» вчера.
обычно работаешь несколько дней и возвращаешься к проекту, приходится что-то править — и тут уже самому невозможно разобраться в куче которую «накидал» вчера.
0
Такой подход называется «на, отъебись»
+4
В процессе разработки / утверждения дизайна — пусть там хоть как в авгиевых конюшнях будет, но когда дизайнер отдает макет в верстку, он должен слои структурировать.
Ибо, получается, время дизайнера — на вес золота, а время верстальщика — так — мелочь пузатая? Давайте уважать труд друг друга, и делать каждый свою работу качественно.
Верстальщику гораздо быстрее работать именно со структурированными файлами.
Еще момент. Когда верстальщик уже верстает макет, когда он даже САМ уже внутри все структурировал, вдруг от заказчика с дизайнером приходит «незначительно-измененный-уточненный» макет. Как вы думаете, в каком случае удобнее и быстрее эти изменения «выдернуть и применить»? В случае когда макет — авгиевы конюшни, или в случае когда там все по полочкам?
Так что — рисуй ты хоть в полном хаосе, но в работу отдай — будь добр, разложи все по полочкам.
Ибо, получается, время дизайнера — на вес золота, а время верстальщика — так — мелочь пузатая? Давайте уважать труд друг друга, и делать каждый свою работу качественно.
Верстальщику гораздо быстрее работать именно со структурированными файлами.
Еще момент. Когда верстальщик уже верстает макет, когда он даже САМ уже внутри все структурировал, вдруг от заказчика с дизайнером приходит «незначительно-измененный-уточненный» макет. Как вы думаете, в каком случае удобнее и быстрее эти изменения «выдернуть и применить»? В случае когда макет — авгиевы конюшни, или в случае когда там все по полочкам?
Так что — рисуй ты хоть в полном хаосе, но в работу отдай — будь добр, разложи все по полочкам.
+3
Нет, ну, если там всего пара слоев, то все действительно может быть интуитивно понятно. Другое дело, самому ведь дизайнеру неудобно, не только верстальщику.
0
Я не говорю, что так должно быть, а что так есть. Почему такая реакция не понятно.
0
Еще полезно бывает надписи, которые предполагается выводить картинками растрировать.
На счет выпадашек и прочих интерактивностей — тут помогает 2 картинки jpg (с вывалившимся меню и с неактивным меню) высылаемые верстальщику на этапе согласования.
Ну и залог успешной и в срок сделанной верстки — это профессиональный верстальщик, который не стесняется задавать вопросы по макету, что, где и как.
На счет выпадашек и прочих интерактивностей — тут помогает 2 картинки jpg (с вывалившимся меню и с неактивным меню) высылаемые верстальщику на этапе согласования.
Ну и залог успешной и в срок сделанной верстки — это профессиональный верстальщик, который не стесняется задавать вопросы по макету, что, где и как.
0
куда полезнее за «надписи, которые предполагается выводить картинками» отрезать дизайнеру пальцы
-2
Случаи, они разные бывают. Например, когда использовать картинку без текста нельзя — копирайты, авторские подписи на картинках, чтобы не уперли, фирменные названия и т.д.
0
«Авторские подписи» = «подпись об авторстве» исключительно в целях сохранности копирайта, какой тут контент, когда фотографию могут скопипастить?
Откройте сайт студии, посмотрите в правый верхний угол, в правый нижний угол. Видим надписи картинками на логотипе и элементе дизайна. Да мало ли вариантов, когда лучше использовать картинку для гарантии, что пользователь увидит именно то, что ему нужно? Какой смысл городить огород с версткой текста там где этого не требуется?
Откройте сайт студии, посмотрите в правый верхний угол, в правый нижний угол. Видим надписи картинками на логотипе и элементе дизайна. Да мало ли вариантов, когда лучше использовать картинку для гарантии, что пользователь увидит именно то, что ему нужно? Какой смысл городить огород с версткой текста там где этого не требуется?
0
Тоже на английском и более подробно webdesigntreasure.com/tutorials/how-to-effectively-organize-your-photoshop-layers/
0
UFO just landed and posted this here
Крупное интернет-СМИ содержало у меня около 300 слоёв. Сомневаюсь, что навигация по ним с помощью ctrl+right click удобна. В маленьких проектах может быть и нет смысла так сильно каталогизировать содержимое. Более того, я думаю, что Adobe задумается над это проблемой и нарисует пиктограмму с директорией.
0
Вот пример того как я организую слои. В принципе где-то близко к вашему,
но радуга в слоях меня наоборот отвлекает.
![](https://habrastorage.org/r/w780q1/getpro/habr/comment_images/67e/7a7/3ff/67e7a73ffafd95a5c7a9f6e77567850c.jpg)
но радуга в слоях меня наоборот отвлекает.
![](https://habrastorage.org/getpro/habr/comment_images/67e/7a7/3ff/67e7a73ffafd95a5c7a9f6e77567850c.jpg)
0
у меня точно такая система, только цветом я отмечаю элементы-ссылки
![](https://habrastorage.org/r/w780q1/getpro/habr/comment_images/a3e/3bc/1aa/a3e3bc1aaf00cc20a0182016636817a2.jpg)
![](https://habrastorage.org/getpro/habr/comment_images/a3e/3bc/1aa/a3e3bc1aaf00cc20a0182016636817a2.jpg)
0
Очень редко встречается, когда дизайнеры юзают Layer Comps. А очень жаль. Намного удобнее получить один файл с набором того, как выглядят страницы (и их разновидности), между которыми легко переключаться, чем 50 файлов, неизбежно обрастающими всякими инструкциями вида «актуальную шапку брать из search.psd, но логотип из index» :)
Ну и, конечно, хинты. Дизайнеров, которые на специальных hint-слоях расписывают, что какого цвета, в какую сторону в каких рамках все должно резиниться, явно указывают межстрочные и межсимвольные отступы, следует как минимум премировать.
Ну и, конечно, хинты. Дизайнеров, которые на специальных hint-слоях расписывают, что какого цвета, в какую сторону в каких рамках все должно резиниться, явно указывают межстрочные и межсимвольные отступы, следует как минимум премировать.
+1
Слои удобно выбирать кликом по изображению, но если слой находится в папке, то вместо слоя выбирается эта папка. Можно ли как-то сделать, чтобы выбирался слой?
0
Хочется добавить, что мало смысла в радуге, она конечно радуга и красиво и цветное, но не юзабельно имхо и вот почему:
один цвет в куче цветов заметен в 100 раз хуже чем один цвет в бесцветии. т.е. идея такая:
Есть блоки на странице, которые скрываются, двигаются, меняются и тд. Эти блоки как отдельные элементы выделяются, например оранжевым или фиолетовым, как правило использую только один цвет, это раз. И два, есть элементы, у которых есть активность, такие элементы обычно всегда выделяю зеленым и соответствующе называю, например Active, верстальщик просто промотав все стопицот слоев за 4 секунды находит единственные, нужные ему зеленые слои, которые находятся совсем не в радуге, а в бесцветном и фиолетовом. Это и для себя удобнее, надо только попробовать. Было время — раскрашивал, радуга. да. цветное, но не удобно. :) Нужно стараться минимизировать количество цветов, т.е. это 2, может-быть 3-4 но не все. Если в раскраске нет практической цели, то нужно оставить слой бесцветным, чтобы он не бросался в глаза и не отвлекал от функциональных слоев и папок
один цвет в куче цветов заметен в 100 раз хуже чем один цвет в бесцветии. т.е. идея такая:
Есть блоки на странице, которые скрываются, двигаются, меняются и тд. Эти блоки как отдельные элементы выделяются, например оранжевым или фиолетовым, как правило использую только один цвет, это раз. И два, есть элементы, у которых есть активность, такие элементы обычно всегда выделяю зеленым и соответствующе называю, например Active, верстальщик просто промотав все стопицот слоев за 4 секунды находит единственные, нужные ему зеленые слои, которые находятся совсем не в радуге, а в бесцветном и фиолетовом. Это и для себя удобнее, надо только попробовать. Было время — раскрашивал, радуга. да. цветное, но не удобно. :) Нужно стараться минимизировать количество цветов, т.е. это 2, может-быть 3-4 но не все. Если в раскраске нет практической цели, то нужно оставить слой бесцветным, чтобы он не бросался в глаза и не отвлекал от функциональных слоев и папок
+1
Sign up to leave a comment.
О правильном распределении и наименовании слоёв в Adobe Photoshop