Comments 199
Ну все верно. Эх каждый бы дизайнер хранил все исходники в папке рядом, была бы сказка. Порой получаешь лишь один .psd макет и все тут.
Называй файлы с учетом версии
Бида. Про системы контроля версий они не знают, что ли?
Я сам юзаю git на сложных проектах и на маке это удобно реализовано. Для небольших проектов, как показала практика, достаточно элементарной нумерации версий.
Можете так и написать: «Используйте системы контроля версий, или хотя бы включайте нумерацию версий в имена файлов».
а что за клиент для git используете?
Я сам юзаю git на сложных проектах и на маке это удобно реализовано.
terminal лучший=), gui-клиенты не юзаю.
В чём состоит отличие(удобство реализации) консольного гита мака, от консольного гита не для мака?
Хорошие советы, спасибо! Местами есть пунктуационные и орфографические ошибки, но это мелочь, вычитаете.
Не совсем понятно про Save for Web & Devices. Неужели при обычном сохранении в jpg/gif/png нельзя подобрать параметры, чтобы размер/качество были оптимальны? Мне всегда казалось, что Save for Web & Devices упрощает сохранение для веба, но можно обойтись и без этого способа.
Не совсем понятно про Save for Web & Devices. Неужели при обычном сохранении в jpg/gif/png нельзя подобрать параметры, чтобы размер/качество были оптимальны? Мне всегда казалось, что Save for Web & Devices упрощает сохранение для веба, но можно обойтись и без этого способа.
А как вы при обычном сохранении, скажем, в jpg проконтролируете наилучший баланс качества/размера?
При сохранении в jpeg обычным способом и способом для веба я вижу разницу в двух добавочных параметрах: Blur и Matte. Мне не кажется, что эти параметры полезны.
Еще можно поставить галочку «Convert to sRGB». Неужели всё дело в ней?
Еще можно поставить галочку «Convert to sRGB». Неужели всё дело в ней?
Все дело в предпросмотре качества и размера итогового файла.
Сколько у вас уйдет времени на то, чтобы добиться оптимального варианта, сохраняя обычным способом? Ладно jpg — там можно интуитивно подобрать. А комплект иконок, который заранее непонятно, в чем получится лучше: gif, png или jpg?
Сколько у вас уйдет времени на то, чтобы добиться оптимального варианта, сохраняя обычным способом? Ладно jpg — там можно интуитивно подобрать. А комплект иконок, который заранее непонятно, в чем получится лучше: gif, png или jpg?
Разница еще в том, что сохраняя через «save for web...», можно исключить все метаданные, а это бывает необходимо.
Пишите, что не так. С удовольствием исправлю
При сохранении через Save As… фотошоп оп умолчанию записывает кучу служебной информации вроде превью картинки, информации о гайдах и т.д. что отрицательно сказывается на объёме файла.
В FF 3.6 сайт не работает.
Что-то они там намудрили с комментариями в исходном коде, которые START/END вокруг блоков с содержимым разделом (div class=«block»).
Вот и ответ: thedesignspace.net/MT2archives/000229.html
Фокс требует большой аккуратности в комментариях.
Авторам стоило бы проверить, прежде чем запускать. Айа-ай-ай.
Фокс требует большой аккуратности в комментариях.
Авторам стоило бы проверить, прежде чем запускать. Айа-ай-ай.
UFO just landed and posted this here
Автор, Вам надо было сюда писать: habrahabr.ru/blogs/i_am_advertising/
«Разумное JPEG-качество при экспорте»
…
По-умолчанию поставь качество не менее 80-ти.
Рискну предположить, что эта цифра взята явно не из фотошопа, а откуда-то вроде Adobe Fireworks. Потому что таком значении картинка будет весить неоправданно много. А всё потому, что спецификация JPEG не определяет какой-либо линейной зависимости шкалы «Качество» и итогового изображения. Поэтому у каждого редактора «своя» шкала качества и в зависимости от значения включаются разные алгоритмы оптимизации.
Для фотошопа оптимальным значением является 51 (если ниже, то включается color downsampling), а значения 60—65 хватит «за глаза» в большинстве случаев.
www.artlebedev.ru/tools/technogrette/img/jpeg-3/
НИКОГДА не ставлю на JPG ниже 90
Для меня качество картинки важнее!
Для меня качество картинки важнее!
Если мы говорим о вебе, то качество большинства проектов определяется не тем, что хочет дизайнер/кодер, а что в итоге получает конечный пользователь. JPEG с качеством 90 априори будет весить больше, чем, например, с качеством 60, а найти визуальные отличия сможет далеко не каждый (предполагаю, что это сможет сделать только автор изображения, потому что пользователям не показывают макеты в фотошопе).
Разумеется, Вы правы, весит больше…
Но уже при 80 картинка выглядит ужасно!
Вот пример: gyazo.com/c9535f5297fc9c3db43ac481205b43e5.png
Сверху качество 80, снизу 90. Сверху «грязь», снизу приемлемо…
Но уже при 80 картинка выглядит ужасно!
Вот пример: gyazo.com/c9535f5297fc9c3db43ac481205b43e5.png
Сверху качество 80, снизу 90. Сверху «грязь», снизу приемлемо…
UFO just landed and posted this here
кто бы спорил )
Не совсем от картинки, а скорей от расположения объекта по пиксельной сетке.
Например, вот одна и та же картинка, сохранённая с одинаковыми параметрами, но по-разному расположенная по восьмипиксельной сетке:
(уровни отредактированы для наглядности качества)
Я на эту тему статью хотел опубликовать, только вот карма не позволяет.
Например, вот одна и та же картинка, сохранённая с одинаковыми параметрами, но по-разному расположенная по восьмипиксельной сетке:
(уровни отредактированы для наглядности качества)
Я на эту тему статью хотел опубликовать, только вот карма не позволяет.
UFO just landed and posted this here
Я эту статью давно читал.
Конечно же, всё зависит от конкретного изображения, и где-то даже больше 90 нужно выставить, чтобы смотрелось прилично, а где-то хватит 60-и. Просто надо делать разумный выбор для каждой картинки, а не сохранять всё с одним значением параметра «Качество».
я ни разу не дизайнер, и разницы не вижу.
Спасибо
UFO just landed and posted this here
А вот для рисованой мультяшной картинки размеров 400х600 в 51 получится слишком много артефактов.
Я не предлагаю всё сохранять в JPEG с качеством 51 в фотошопе, я за то, чтобы дизайнер/разработчик включал мозг и для каждой картинки выбирал оптимальный графический формат и оптимальное соотношение размер/качество.
В моём комментарии речь идёт о том, что рекомендуемое топикстартером минимальное значение качества JPEG’а 80 является слишком большим (если речь идёт о фотошопе). Потому что большинство фотографий — а именно для них в первую очередь предназначен формат JPEG — выглядят вполне неплохо при гораздо меньших значениях этого параметра.
Вот бы такое и для других программ типа как «правила хорошего тона при работе на компьютере».
«Называй файлы по-английски или „транслитом“»
Когда я вижу файл, названный транслитом, я хватаюсь за пистолет. Тем более, что понятия о транлсите бывают весьма своебразные — «b» вместо мягкого знака, «u» вместо «и»…
Да и не помню я, когда у меня последний раз были проблемы с русскими именами файлов под *nix'ами.
«Кегль шрифта задавай целым числом»
На картинке стоит размер шрифта в pt. Правильно ли это для экранного дизайна? я бы предпочел в макете видеть размер в пикселях.
«Разумное JPEG-качество при экспорте»
А почему бы не экспортить в PNG? Большие плашки чистого цвета или градиентов он сожмет не хуже, чем джипег, да еще и без артефактов.
Когда я вижу файл, названный транслитом, я хватаюсь за пистолет. Тем более, что понятия о транлсите бывают весьма своебразные — «b» вместо мягкого знака, «u» вместо «и»…
Да и не помню я, когда у меня последний раз были проблемы с русскими именами файлов под *nix'ами.
«Кегль шрифта задавай целым числом»
На картинке стоит размер шрифта в pt. Правильно ли это для экранного дизайна? я бы предпочел в макете видеть размер в пикселях.
«Разумное JPEG-качество при экспорте»
А почему бы не экспортить в PNG? Большие плашки чистого цвета или градиентов он сожмет не хуже, чем джипег, да еще и без артефактов.
ах да, еще про текст: лучше отключать на нем антиалисинг совсем — это наиболее близко к тому, что будет в браузере.
«это наиболее близко к тому, что будет в браузере.»
Позвольте, с чего бы это?
Позвольте, с чего бы это?
А почему бы и нет? Когда я последний раз заходил в интернет, браузеры еще не поддерживали все эти замечательные режимы рендеринга текста типа «Crisp», «Smooth» и т.д.
Далеко не все сидят на MacOS под Safari.
Далеко не все сидят на MacOS под Safari.
В большинстве современных версий операционных систем сглаживание шрифтов стоит по умолчанию включено. Учитывая — это уже достаточно давно можно воспринимать именно это положение вещей как норму, а обратные случае как частные случаи, предпочтения отдельных пользователей.
Методы которые вы описали выше поддерживает фотошоп, а не браузеры.
Браузеры вообще в редких случаях используют свой рендеринг (исключение ранняя версия Сафари под винду), чаще всего браузеры используют сглаживание операционной системы: ClearType или его более продвинутую версию Natural ClearType.
Браузеры вообще в редких случаях используют свой рендеринг (исключение ранняя версия Сафари под винду), чаще всего браузеры используют сглаживание операционной системы: ClearType или его более продвинутую версию Natural ClearType.
Так я и написал вроде бы, что браузеры их не поддерживают…
Браузеры их поддерживают.
Простите, не понимаю вас. Так что же всё-таки поддерживают браузеры и к чему была фаша фраза
?
Методы которые вы описали выше поддерживает фотошоп, а не браузеры.
?
Вы написали про методы сглаживания «Crisp», «Smooth» — эти методы поддерживает только фотошоп, это его «внутренние» методы сглаживания. Тоесть их не поддерживает даже Сафари под Мак.
Браузеры поддерживают сглаживание встроенное в операционную систему (к примеру ClearType и Natural ClearType).
Поскольку дизайнеры в фотошопе не могут указать сглаживание текста СlearType они указывают один из внутренних методов сглаживания.
Браузеры поддерживают сглаживание встроенное в операционную систему (к примеру ClearType и Natural ClearType).
Поскольку дизайнеры в фотошопе не могут указать сглаживание текста СlearType они указывают один из внутренних методов сглаживания.
Да что ж такое-то.
Прочитайте внимательно мой комментарий, что ли.
Прочитайте внимательно мой комментарий, что ли.
Мой первый комментарий относится к фразе:
«Когда я последний раз заходил в интернет, браузеры еще не поддерживали все эти замечательные режимы рендеринга текста типа «Crisp», «Smooth» и т.д. Далеко не все сидят на MacOS под Safari.»
Фраза приведенная выше в качестве довода о нецелесообразности использования сглаживания не имеет смысла.
«Когда я последний раз заходил в интернет, браузеры еще не поддерживали все эти замечательные режимы рендеринга текста типа «Crisp», «Smooth» и т.д. Далеко не все сидят на MacOS под Safari.»
Фраза приведенная выше в качестве довода о нецелесообразности использования сглаживания не имеет смысла.
Каждый формат хорош для своих целей. Где-то лучше png, где-то jpeg. А в этом пункте речь об экспорте именно в jpeg.
Я бы еще добавил в качестве обязательного правила вместе с PSD-макетом делать в отдельной папочке /jpg/ все страницы, экспортированные в .jpg, поскольку не все верстальщики работают в PhotoShop, но работают в GIMP, а в них макеты разъезжаются иногда. Для верстки это не страшно, ведь нужно взять просто основные элементы, но видеть общую картину все равно надо.
Хорошо бы, только может лучше в png?
А элементы где требуется применить прозрачность они тоже гимпом из джипега будут вырезать?
Вы читаете невнимательно. Джипег нужен для просто общей оценки, где чего в макете поехало. Чтобы сравнить макет и то, как это отображается непосредственно у дизайнера. Ничего из джипегов копировать не нужно, они исключительно для визуальной оценки правильности макета. Точно также дизайнер может случайно дать не тот макет, тогда сравнив джипеги и макеты мы это увидим.
Это уже не единожды проверенный способ проконтролировать правильность макета.
Это уже не единожды проверенный способ проконтролировать правильность макета.
JPG вообще не нужен, уже все сто лет в обед в png сохраняют (для просмотра). Весит чуть больше, зато все до пикселя правильно.
Потом верстальщик из psd уже сохранит все правильно, в нужных форматах jpg/png/gif с правильной оптимизацией
Потом верстальщик из psd уже сохранит все правильно, в нужных форматах jpg/png/gif с правильной оптимизацией
Виноват,
действительно я не внимательно прочитал ваш комментарий.
действительно я не внимательно прочитал ваш комментарий.
Я ещё обычно прошу растрировать слои с эффектами, тогда ничего не ползёт. Ну и скрины обязательно.
«Перед экспортом проверь орфографию» — это пункт несколько смущает не в смысле орфографии которую нужно естественно проверять, а в смысле оправданности текстовых блоков в виде графических блоков. ИМХО при текущих возможностях работы со шрифтами в web (не говоря уже про печать) можно этого свободно избежать в большинстве случаев и от этого только выиграть.
Сайт не работает с отключённым JavaScript, хотя причин для этого никаких.
При архивном хранении старых макетов лучше использовать 7z вместо RAR (и, тем более, вместо Zip’а) — позволяет многократно сэкономить пространство на жёстком диске (вплоть до того, что, например, 200 МБ сжимаются до 1 МБ).
Вместо JPEG сохранять скриншоты макетов следует в PNG-24. Места займёт в общем случае не больше, а потерь качества не будет вовсе (JPEG — формат для фотографий). Кроме того, при потере исходника хотя бы останется плоский вариант нормального качества.
При архивном хранении старых макетов лучше использовать 7z вместо RAR (и, тем более, вместо Zip’а) — позволяет многократно сэкономить пространство на жёстком диске (вплоть до того, что, например, 200 МБ сжимаются до 1 МБ).
Вместо JPEG сохранять скриншоты макетов следует в PNG-24. Места займёт в общем случае не больше, а потерь качества не будет вовсе (JPEG — формат для фотографий). Кроме того, при потере исходника хотя бы останется плоский вариант нормального качества.
Правило всего одно:
Не делай говна.
Не делай говна.
Я видно слишком коротко и прямо выразился:
Все вышеизложенное в данном топике является не ПРАВИЛАМИ, а РЕКОМЕНДАЦИЯМИ. (Мое мнение)
В данном топике говориться про работу веб-дизайнеров, конечной целью работы которых является создание макета решающего поставленную задачу. В работе он может делать все что угодно и как угодно — главное что бы то что получилось являлось решением поставленной задачи. Это единственное правило. (Опять же — сужу по себе)
Что касается меня то вот так выглядит структура хранения моих файлов.
cl.ly/1G133p1e2v3P1K050E16
Папки:
«in» — все файлы которые мне прислал клиент по проекту;
«img» — сохраненные скриншоты;
«ai» — файлы иллюстратора;
«pds» — файлы фотошопа;
«old» — не принятые варианты или варианты до доработок.
Все вышеизложенное в данном топике является не ПРАВИЛАМИ, а РЕКОМЕНДАЦИЯМИ. (Мое мнение)
В данном топике говориться про работу веб-дизайнеров, конечной целью работы которых является создание макета решающего поставленную задачу. В работе он может делать все что угодно и как угодно — главное что бы то что получилось являлось решением поставленной задачи. Это единственное правило. (Опять же — сужу по себе)
Что касается меня то вот так выглядит структура хранения моих файлов.
cl.ly/1G133p1e2v3P1K050E16
Папки:
«in» — все файлы которые мне прислал клиент по проекту;
«img» — сохраненные скриншоты;
«ai» — файлы иллюстратора;
«pds» — файлы фотошопа;
«old» — не принятые варианты или варианты до доработок.
Угу, неплохо. Не как спор, а просто мысли вслух: zip какое-то оторжение всегда вызывал и вызывает… rar оно как-то приятнее. Не говоря уж о tar.gz и dmg :)
zip — свободный формат, rar — проприетарный.
В отличие от rar, нативная поддержка zip есть в Windows и Mac OS X.
В отличие от rar, нативная поддержка zip есть в Windows и Mac OS X.
В отличие от rar, при открытии zip'ов под линем натыкался на проблемы с кодировками.
Но лучше всего, как верно заметили выше, использовать 7z.
Но лучше всего, как верно заметили выше, использовать 7z.
Мне кажется, что проблема с кодировками в линуксе — это проблема линукса. А вернее, утилит, которые предназначены для работы с zip. Под виндой и макосью ведь таких проблем нет. Впрочем, под линуксом у меня тоже никогда не было проблем с zip'ом.
На самом деле, я и сам питаю к 7z теплые чувства :) И если людей, с которыми я обмениваюсь файлами, устраивает 7z, то я использую этот формат. Но всегда нужно помнить, что 7z недостаточно распространен.
На самом деле, я и сам питаю к 7z теплые чувства :) И если людей, с которыми я обмениваюсь файлами, устраивает 7z, то я использую этот формат. Но всегда нужно помнить, что 7z недостаточно распространен.
То, что некоторые утилиты, видя zip с именами файлов, сохранёнными в однобайтовой кодировке, не думают сразу же: «А, ну это конечно же cp866! И сомневаться не приходится!», — у меня язык не повернулся бы назвать проблемой. Даже если прирутить к ним такое предположение, если локаль системы русская, то проблему это до конца не решит. У меня вот, например, локаль английская.
Если бы я не учитывал распространённость форматов, то я бы советовал FreeArc'овский .arc. С 7z же никаких проблем: WinRAR читает, бесплатный 7-zip поставить — дело пары минут, в нормальных ОСях поддержка искаропки.
Если бы я не учитывал распространённость форматов, то я бы советовал FreeArc'овский .arc. С 7z же никаких проблем: WinRAR читает, бесплатный 7-zip поставить — дело пары минут, в нормальных ОСях поддержка искаропки.
Да я ж написал, что не спорю. Просто из-за «нативной поддержки» в Windows, точнее, из-за её реализации, это отвращение к zip'у и появилось.
Я для работы со всеми типами архивов использую 7-zip. Он довольно удобно встраивается в контекстное меню проводника и прекрасно работает с zip'ом.
Всплыл из памяти фильм «Колобаха»:
videosostav.ru/video/7532b8a3ed11994460b84caf84b76583/
Похожая тональность советов. =)
videosostav.ru/video/7532b8a3ed11994460b84caf84b76583/
Похожая тональность советов. =)
Добавлю от себя: не оставляй в макете слоев с алгоритмами смешивания отличными от «normal», масок и нерастеризованных эффектов.
Это еще почему? Я категорически не согласен со всем, сказанным вами. Если в процессе верстки понадобится что-то подтюнить, что случается нередко, то будут неприятности.
Вам говорят спасибо все верстальщики. Особенно, когда слои в режиме умножения. Да, симпатишно, но попытка нормально воссоздать эффект в браузере, где, извините конечно, нету стиля наложения «Умножение», вызывает довольно большой кулак в анальном проходе.
Как говорили выше, нарезка макета может делаться и в GIMP и еще черти-где. И версии фотошопа различные существуют. А «подтюнивать» дизайн за дизайнером — как-то это идеологически невыдержанно, ИМХО.
Вот сижу сейчас, и, извиняюсь, ебусь с макетом, в котором 70% слоев с умножением сделаны… (( Хнык…
Разумное JPEG-качество при экспорте
Лучше уберите этот пункт. Вопрос сохранения изображения в том или ином формате слишком сложен, чтобы быть раскрытым в таком простом ответе. Тот же .jpg, экспортируемый из правильно подготовленного исходника, может весить значительно меньше и иметь лучшее качество при большем проценте сжатия, чем из неподготовленного при слабом сжатии.
Раскрашивай папки
Ой, не надо… Никогда не понимал смысла этой бесполезной радуги — только отвлекает и изображает псевдоупорядоченность.
если внутри компании есть некоторые соглашения по использованию цветов для папок, то это облегчает жизнь. Допустим подвал — синий, шапка зеленая, меню — желтое и т.д. Становится легче ориентироваться
UFO just landed and posted this here
Все правильно, со всем согласен…
Эх… Вот бы еще постепенно перетянуть бы всех на Adobe Fireworks…
Многие ведь даже не знают о его (FW) существовании!
Эх… Вот бы еще постепенно перетянуть бы всех на Adobe Fireworks…
Многие ведь даже не знают о его (FW) существовании!
Что такого есть в Fireworks, что упрощает работу с макетом по сравнению с Photoshop?
Ну на эту тему есть масса материалов в сети… Я бы сказал, что Fireworks более ориентирован именно на веб-макеты, на организацию работы с ними.
Если вкратце, то это:
— многостраничность!
— Master Page
— Share Layer to Pages
— внутренние линки
— Symbols
— более качественный экспорт веб-графики (по утверждениям некоторых источников)
— экстеншены с уклоном на веб-дизайн и верстку
— интеграция с DW
Безусловно надо понимать, что FW не может (и не должен) заменить PS! В тоже время вовсе не обязательно создавать веб-макеты в PS, когда для этого имеется созданный тем же Adobe инструмент…
Моя схема проста:
— PS для создания/обработки/подготовки сложных/креативных иллюстраций и элементов сайта;
— FW для отрисовки интерфейсов и сборки дизайн-макетов сайта в целом.
Если вкратце, то это:
— многостраничность!
— Master Page
— Share Layer to Pages
— внутренние линки
— Symbols
— более качественный экспорт веб-графики (по утверждениям некоторых источников)
— экстеншены с уклоном на веб-дизайн и верстку
— интеграция с DW
Безусловно надо понимать, что FW не может (и не должен) заменить PS! В тоже время вовсе не обязательно создавать веб-макеты в PS, когда для этого имеется созданный тем же Adobe инструмент…
Моя схема проста:
— PS для создания/обработки/подготовки сложных/креативных иллюстраций и элементов сайта;
— FW для отрисовки интерфейсов и сборки дизайн-макетов сайта в целом.
А зачем, простите?
Оформляй рабочую часть страниц в пределах 1000 пикселей, если хочешь чтобы сайт одинаково хорошо смотрелся на всех экранных разрешениях. Это правило актуально и для резиновой верстки.
Только всё же не стоит забывать, что ширина самого дизайна должна быть меньше этого значения т.к полоса прокрутки ещё может возникать. Мы макет обычно в районе 980px в ширину оформляем. Уж не знаю как остальные :)
Только всё же не стоит забывать, что ширина самого дизайна должна быть меньше этого значения т.к полоса прокрутки ещё может возникать. Мы макет обычно в районе 980px в ширину оформляем. Уж не знаю как остальные :)
Кстати Save for web… вместо Save as… — это еще не панацея. Желательно в окне экспорта поставить пункт Metadata=none, ибо пишутся всякие копирайты, exif-ы и прочий мусор, увеличивающий размер файла.
Неплохо, в принципе всё и так очевидно, но все равно спасибо :)
Но этот совет тоже никогда не стоит забывать fucking-great-advice.ru/advice/1/
Но этот совет тоже никогда не стоит забывать fucking-great-advice.ru/advice/1/
детский сад какой-то
— Не плоди лишних файлов. Никогда ничего по проекту не удаляй, никогда не знаешь, что может понадобиться. Складируй это в некую папку: trash
— Исходники храни в папке /source/. Исходники храни в разных папка source_ver1, source_ver2 (к примеру) в зависимости от версий, никогда не знаешь, что куда и по какой причине придется откатывать и изменять. По завершении проекта удали все, кроме последней версии.
— Прикрепляй к проекту несистемные шрифты. Не системные шрифты можно и растеризовать, все зависит от того кому и зачем даешь исходники, что за шрифты, что за исходники.
— Файлы с учетом версии — согласен, но когда изменение касается всего проекта, лучше переложить в другую папку (новую версию) все файлы.
— Используй .zip вместо .rar — 7zip даже лучше, но здесь другая проблема…
— Не склеивай слои без необходимости — по возможности вообще не склеивай.
— Раскрашивай папки — не смешно, если у тебя 50 папок первого уровня.
— Задавай глобальные элементы + заголовки в папках первого уровня все капсом.
— Давать название всем слоям слишком накладно. Если у тебя папка второго уровня Submit_buton и в ней три слоя: стрелочка, надпись Submit и тело кнопки, зачем здесь подписи?
— Не забывай про экранные разрешения — если это важно, то бывает, что нужно в 800 на 600 влазить, а вовсе и не в 1000
— Save for Web & Devices… всегда сохраняю файлы «на показать» в PNG b Ctrl+Shift+S быстрее т.к. не появляется окошко пред. просмотра, для больших файлов это долго.
— вообще не пользуюсь ЖПЕГ-ами.
— Исходники храни в папке /source/. Исходники храни в разных папка source_ver1, source_ver2 (к примеру) в зависимости от версий, никогда не знаешь, что куда и по какой причине придется откатывать и изменять. По завершении проекта удали все, кроме последней версии.
— Прикрепляй к проекту несистемные шрифты. Не системные шрифты можно и растеризовать, все зависит от того кому и зачем даешь исходники, что за шрифты, что за исходники.
— Файлы с учетом версии — согласен, но когда изменение касается всего проекта, лучше переложить в другую папку (новую версию) все файлы.
— Используй .zip вместо .rar — 7zip даже лучше, но здесь другая проблема…
— Не склеивай слои без необходимости — по возможности вообще не склеивай.
— Раскрашивай папки — не смешно, если у тебя 50 папок первого уровня.
— Задавай глобальные элементы + заголовки в папках первого уровня все капсом.
— Давать название всем слоям слишком накладно. Если у тебя папка второго уровня Submit_buton и в ней три слоя: стрелочка, надпись Submit и тело кнопки, зачем здесь подписи?
— Не забывай про экранные разрешения — если это важно, то бывает, что нужно в 800 на 600 влазить, а вовсе и не в 1000
— Save for Web & Devices… всегда сохраняю файлы «на показать» в PNG b Ctrl+Shift+S быстрее т.к. не появляется окошко пред. просмотра, для больших файлов это долго.
— вообще не пользуюсь ЖПЕГ-ами.
Странно, что у совета нет статичной ссылки, которую можно кинуть в мессенждер.
А расскажите, друзья, как шрифты правильно из Mac OS X в Windows экспортировать?
Недавно передавал верстальщику проект, замучался. Дизайнеры прислали архив со шрифтами, внутри — файлы нулевого размера. При этом он отлично ставится на Мак, но никак не работает в Windows.
Недавно передавал верстальщику проект, замучался. Дизайнеры прислали архив со шрифтами, внутри — файлы нулевого размера. При этом он отлично ставится на Мак, но никак не работает в Windows.
Упрощенно говоря, шрифты — это физические файлы, которые имеют определенный формат. Наиболе распространенные форматы PostScript/Type 1, TrueType, Opentype. Вам надо просто взять и скопировать соответствующий файл, если он не системный.
Экспорт с Мака на Винду — это простое копирование файлов и дальнейшая их установка в систему. Я использую на Маке менеджер шрифтов — FontExplorer. Он позволяет активировать шрифт без установки в систему.
Экспорт с Мака на Винду — это простое копирование файлов и дальнейшая их установка в систему. Я использую на Маке менеджер шрифтов — FontExplorer. Он позволяет активировать шрифт без установки в систему.
UFO just landed and posted this here
Вот английский вариант: photoshopetiquette.com/
Забыли самое главное правило хорошего тона: использовать InDesign вместо Photoshop.
100%
Эээм, зачем? Индизайн предназначен для верстки POSM, а не сайтов. Но суть не в этом. Я линуксоид и верстаю в линуксе и GIMP. Как прикажете открывать ваш индизайн?
UFO just landed and posted this here
GIMP нормально откроет PSD со 150 слоями. Другое дело, что я ни разу не видел макет сайта со 150 слоями(но файл более чем с 200 слоями в GIMP я открывал). В гимпе только две проблемы:
— нету папок
— он губит маски и скрытость слоев в PSD.
Но не будем начинать холивар GIMP vs PhotoShop…
А тем, кто все страницы пихает в один макет лично я бы глаза на жопу натягивал. Отдельный файл для каждой страницы, строго и никак иначе. Это удобней и в работе с клиентами и при верстке, поскольку я не хочу каждый раз в разгребании слоев шариться между сотнями папок.
И что мне с вашим PDF делать? Нафига он мне? Разве это формат работы с растровой графикой? В чем здесь хороший тон, я не понимаю? Ладно еще, как ниже(или выше) сказали о TIFF, что более логично.
InDesign — это не инструмент для дизайна сайтов. И дизайнера, который пришлет мне макет в PDF или INDD (такое вроде там расширение) я пошлю далеко и подальше. Это тоже самое, что делать скриншот, вставлять его в ворд или чего хуже в презенташку и отсылать кому-то…
— нету папок
— он губит маски и скрытость слоев в PSD.
Но не будем начинать холивар GIMP vs PhotoShop…
А тем, кто все страницы пихает в один макет лично я бы глаза на жопу натягивал. Отдельный файл для каждой страницы, строго и никак иначе. Это удобней и в работе с клиентами и при верстке, поскольку я не хочу каждый раз в разгребании слоев шариться между сотнями папок.
И что мне с вашим PDF делать? Нафига он мне? Разве это формат работы с растровой графикой? В чем здесь хороший тон, я не понимаю? Ладно еще, как ниже(или выше) сказали о TIFF, что более логично.
InDesign — это не инструмент для дизайна сайтов. И дизайнера, который пришлет мне макет в PDF или INDD (такое вроде там расширение) я пошлю далеко и подальше. Это тоже самое, что делать скриншот, вставлять его в ворд или чего хуже в презенташку и отсылать кому-то…
Вы уж извините, но время, сэкономленное при использовании Индизайна вместо Фотошопа на достаточно большом проекте, с лихвой окупит лицензию Виндоус и ЦС5 с Индизайном.
Фотошоп это программа для ретуши и рисования с рудиментарными возможностями для работы с текстом.
Представьте, что вместо ЦСС вам приходится задавать стили для каждого элемента отдельно, а после того как пол сайта сверстано, вам нужно поменять цвет ссылки и стиль ее подчеркивания, но нельзя использовать регулярные выражения для поиска и замены. Я уже не говорю об отступах, кеглях, шрифтах и т. п.
Фотошоп это программа для ретуши и рисования с рудиментарными возможностями для работы с текстом.
Представьте, что вместо ЦСС вам приходится задавать стили для каждого элемента отдельно, а после того как пол сайта сверстано, вам нужно поменять цвет ссылки и стиль ее подчеркивания, но нельзя использовать регулярные выражения для поиска и замены. Я уже не говорю об отступах, кеглях, шрифтах и т. п.
В данном случае я сужу со стороны верстальщика. Я должен получить макет в формате, который открою в фотошопе либо гимпе со слоями. Мне не важно, в чем это сделает дизайнер, но условия для предоставляемых макетов устанавливаю именно я — верстальщик, а не дизайнер, потому что мне потом из каляк дизайнера делать рабочий сайт.
Если индизайн способен выдать итоговый результат в формате PSD или XCF, окей, делайте. Но ни в PDF, ни в INDD я макет не приму, потому что для меня, как верстальщика, это усложнит работу в разы и удлинит время верстки ровно на столько, на сколько дизайнеру ускорит.
Если индизайн способен выдать итоговый результат в формате PSD или XCF, окей, делайте. Но ни в PDF, ни в INDD я макет не приму, потому что для меня, как верстальщика, это усложнит работу в разы и удлинит время верстки ровно на столько, на сколько дизайнеру ускорит.
Вы хоть раз в жизни открывали файл Индизайна? На каком основании вы говорите, что макет в Индизайне усложнит вашу работу?
Извините, но из нормальной дизайн-студии вас просто уволят и наймут верстальщика, который способен посвятить два часа своего времени освоению новой программы.
но условия для предоставляемых макетов устанавливаю именно я — верстальщик, а не дизайнер
Извините, но из нормальной дизайн-студии вас просто уволят и наймут верстальщика, который способен посвятить два часа своего времени освоению новой программы.
Ниже читайте, это раз. Я знаю, как работать с Индизайном, я сверстал в нем несколько книг и плакатов.
Два: Вас не смущает, что Индизайн заточен для верстки печатной продукции? Конечно в нем проще и лучше работать с текстом, я не спорю. Но для верстки он не удобен. Да, там есть те же слои, там есть примерно те же инструменты. Для дизайнера — самое то, согласен. Но для верстальщика там нет нужных инструментов. Как пример: тот же инструмент сохранения изображения для Веба.
Три: При верстке сайта мне не нужен вектор, мне нужен растр, а любой вектор в любом случае переводится в растр. Следовательно растровый редактор подходит здесь как нельзя кстати. Индизайн — векторный редактор. Сайт можно дизайнить и в Кореле, и в Иллюстраторе, и даже в Кварке. Но я не буду удивлен, если количество матерящихся верстальщиков возрастет в сотни раз.
Четыре: в нормальной студии прислушиваются к мнению работников и при необходимости меняют порядки от устоявшихся. Если дизайнер всю жизнь делает говно, считая это правильным, придя в эту студию я первым делом подниму уровень выпускаемого дизайнером продукта, чтобы с этим было комфортно работать лично мне. И дизайнер будет рад поучиться и я смогу нормально работать.
Два: Вас не смущает, что Индизайн заточен для верстки печатной продукции? Конечно в нем проще и лучше работать с текстом, я не спорю. Но для верстки он не удобен. Да, там есть те же слои, там есть примерно те же инструменты. Для дизайнера — самое то, согласен. Но для верстальщика там нет нужных инструментов. Как пример: тот же инструмент сохранения изображения для Веба.
Три: При верстке сайта мне не нужен вектор, мне нужен растр, а любой вектор в любом случае переводится в растр. Следовательно растровый редактор подходит здесь как нельзя кстати. Индизайн — векторный редактор. Сайт можно дизайнить и в Кореле, и в Иллюстраторе, и даже в Кварке. Но я не буду удивлен, если количество матерящихся верстальщиков возрастет в сотни раз.
Четыре: в нормальной студии прислушиваются к мнению работников и при необходимости меняют порядки от устоявшихся. Если дизайнер всю жизнь делает говно, считая это правильным, придя в эту студию я первым делом подниму уровень выпускаемого дизайнером продукта, чтобы с этим было комфортно работать лично мне. И дизайнер будет рад поучиться и я смогу нормально работать.
Пойдите, поднимите уровень продукта: www.artlebedev.ru/everything/quto/process/ :)
Сейчас они все сайты делают в Индизайне.
В нормальной студии дизайнеры не противостоят верстальщикам, а сотрудничают с ними. Я всегда буду рад предоставить верстальщику все кнопочки, иконки, картинки и т. п. в растре, и помогу разобраться в своем макете. Но я не буду учить его верстке (хотя я тоже немного знаю html/css), как и верстальщик не подумает учить меня дизайну.
Сейчас они все сайты делают в Индизайне.
В нормальной студии дизайнеры не противостоят верстальщикам, а сотрудничают с ними. Я всегда буду рад предоставить верстальщику все кнопочки, иконки, картинки и т. п. в растре, и помогу разобраться в своем макете. Но я не буду учить его верстке (хотя я тоже немного знаю html/css), как и верстальщик не подумает учить меня дизайну.
Сейчас они все сайты делают в Индизайне.
У вас ошибка. В данном случае личное местоимение "они" нужно писать с большой буквы.
Если меня вдруг каким ветром занесет в Студию Татьяныча, я с удовольствием понаблюдаю, как фанатически в индезайне верстают верстальщики.
И как бы то ни было, но тот же Чикуенок, что является технологом у Татьяныча, все равно работает с фотошопом. Странно, да? о_О
ЗЫ: Учила меня мама, не разговаривай с фанатиками…
И как бы то ни было, но тот же Чикуенок, что является технологом у Татьяныча, все равно работает с фотошопом. Странно, да? о_О
ЗЫ: Учила меня мама, не разговаривай с фанатиками…
Я уже два года как не являюсь технологом САЛ :)
Но свои 5 копеек вставлю.
Да, действительно, в момент моего ухода дизайнеры потихоньку переходили InDesign, но вёрстка таких макетов была настоящей головной болью. Не знаю как сейчас, но раньше банально нельзя было нормально растеризовать макет: всё получалось каким-то размытым (не знаю, чья в этом вина: дизайнера или индизайна). И раньше макеты в фотошопе были самодостаточными: открыл, нарезал графику, сверстал макет. А с индизайном постоянно приходилось писать письма дизайнерам вроде «пришли мне шапку по слоям в растре», и тем более ждать, когда он это сделает.
И если уж пошла речь обо мне, то я с фотошопа никуда не слезу. Потому что мне нужны инструменты для работы с растром. Если дизайнеров, в первую очередь, интересует форма и внешний вид макета, то меня волнует его содержание. Перед нарезкой графики я сначала анализирую её всякими инструментами (Threshold, Difference, Levels, Channels), что-то вообще с нуля перерисовываю, и только потом нарезаю так, чтобы получилась оптимальные по весу и гибкости спрайты, которые слоями накладываю в html/css. Даже не представляю, как это всё можно сделать в векторном редакторе.
Но свои 5 копеек вставлю.
Да, действительно, в момент моего ухода дизайнеры потихоньку переходили InDesign, но вёрстка таких макетов была настоящей головной болью. Не знаю как сейчас, но раньше банально нельзя было нормально растеризовать макет: всё получалось каким-то размытым (не знаю, чья в этом вина: дизайнера или индизайна). И раньше макеты в фотошопе были самодостаточными: открыл, нарезал графику, сверстал макет. А с индизайном постоянно приходилось писать письма дизайнерам вроде «пришли мне шапку по слоям в растре», и тем более ждать, когда он это сделает.
И если уж пошла речь обо мне, то я с фотошопа никуда не слезу. Потому что мне нужны инструменты для работы с растром. Если дизайнеров, в первую очередь, интересует форма и внешний вид макета, то меня волнует его содержание. Перед нарезкой графики я сначала анализирую её всякими инструментами (Threshold, Difference, Levels, Channels), что-то вообще с нуля перерисовываю, и только потом нарезаю так, чтобы получилась оптимальные по весу и гибкости спрайты, которые слоями накладываю в html/css. Даже не представляю, как это всё можно сделать в векторном редакторе.
Оу, прошу прощения, не знал. =)
Спасибо, вы расписали все по полочкам, что не удалось мне объяснить в десятке абзацев. Именно это все я и имел ввиду.
Спасибо, вы расписали все по полочкам, что не удалось мне объяснить в десятке абзацев. Именно это все я и имел ввиду.
В ЦС5 пофиксили эту шнягу. Теперь еще размеры можно в пикселях задавать, и объекты сами прилипают к целым единицам координат. Но вообще, нужно следить, чтобы у всего были целые координаты.
Я не писал, что без фотошопа можно обойтись. Но информационный дизайн в нем делать это плевок в лицо здравому смыслу.
Если в макете сплошная графика, то я рисую в Иллюстраторе. В нем можно и растеризировать, и ножик там есть, и в псд экспорт со слоями. Есть, конечно, и такие дизайны, которые удобнее в фотошопе делать.
Если в макете сплошная графика, то я рисую в Иллюстраторе. В нем можно и растеризировать, и ножик там есть, и в псд экспорт со слоями. Есть, конечно, и такие дизайны, которые удобнее в фотошопе делать.
UFO just landed and posted this here
И кстати, по вине некоторых дизайнеров, нам, верстальщикам, действительно иногда приходится задавать стили для каждого элемента отдельно.
А вот на тему отсутствия поиска… Ну извините, это уже собственная способность организовывать структуру работы. Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Поскольку я и дизайном занимаюсь, то я прекрасно знаю, как работать со слоями и группировкой. И в Индизайне я тоже много работал и прекрасно понимаю разницу работы между Фотошопом и Индизайном. Именно поэтому я столь уперто утверждаю, что пусть только хоть один дизайнер посмеет сделать мне макет в индизайне, он за это получит серьезную взбучку.
А вот на тему отсутствия поиска… Ну извините, это уже собственная способность организовывать структуру работы. Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Поскольку я и дизайном занимаюсь, то я прекрасно знаю, как работать со слоями и группировкой. И в Индизайне я тоже много работал и прекрасно понимаю разницу работы между Фотошопом и Индизайном. Именно поэтому я столь уперто утверждаю, что пусть только хоть один дизайнер посмеет сделать мне макет в индизайне, он за это получит серьезную взбучку.
Ну извините, это уже собственная способность организовывать структуру работы
Расскажите мне, пожалуйста, каким образом можно организовать работу в Фотошопе, чтобы потом, при необходимости, двумя кликами поменять цвет ссылки и стиль подчеркивания на всех страницах макета?
Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Похоже, вы все-таки плохо понимаете разницу между Фотошопом и Индизайном. Я писал не про ориентацию в стилях, а про то, что в Фотошопе НЕТ никаких текстовых стилей вообще. Все прийдется менять руками. Для того я и привел пример работы без общих ЦСС и задания параметров для каждого элемента вручную.
О работе с текстом я выше написал. Да, в Фотошопе это гемор для дизайнера. Но в данном случае нужно оценивать не исключительно страдания дизайнеров, а картину в общем. Мы имеем геморрой у дизайнера в работе с текстом и мы имеем геморрой работы верстальщика при работе с Индизайном. В данном случае надо чем-то пожертвовать. Чем же нам пожертвовать? Периодической проблемой в фотшопе, которая в принципе не вызывает проблем у дизайнеров, которые давно привыкли к такой работе с текстом или к постоянной проблеме полной неприспособленности Индизайна для сайтов и верстальщиков?
Что за бред, уважаемый? Ну не тот это софт! Да, верстать можно и в блакноте. Да, верстать можно и по макету из Индизайна. Параллель находите?
Что за бред, уважаемый? Ну не тот это софт! Да, верстать можно и в блакноте. Да, верстать можно и по макету из Индизайна. Параллель находите?
Периодической проблемой в фотшопе, которая в принципе не вызывает проблем у дизайнеров, которые давно привыкли к такой работе с текстом
Практика показывает, что такие дизайнеры просто не знакомы с Индизайном. Почти любой дизайн это на 90% текст, и вполне логично, что для работы с текстом я выбираю подходящий инструмент, а для рисования картинок я использую Фотошоп с Иллюстратором и потом линкую их в Индизайн. И да, любой вектор я с легкостью превращу в пиксели :)
Работать с текстом в Фотошопе это даже хуже чем верстать в блокноте.
А про верстку и неприспособленность Индизайна я ответил выше.
UFO just landed and posted this here
Существует Fireworks!
Имена слоев на русском языке тоже не лучшая идея.
Я бы еще добавил, что при экспорте нужно не просто выбирать джейпег, но и смотреть в сторону PNG.
80% макетов, что я верстаю, меньше весят (плюс без потерь), чем джейпеги с качеством 80+. Исключение составляют сайты, где много сложных градиентов и разных иллюстраций.
80% макетов, что я верстаю, меньше весят (плюс без потерь), чем джейпеги с качеством 80+. Исключение составляют сайты, где много сложных градиентов и разных иллюстраций.
Используй .zip вместо .rar
Используй TIF вместо PSD.
Всё то же самое, только со встроенным сжатием.
Не забывать про сетки (960 и т.д.). Иногда дизайнеры про них забывают.
UFO just landed and posted this here
Еще бывает адский ад, когда дизайнер присылает макет сайта(!) в CMYK, с разрешением 300dpi и дробными размерами шрифтов в сантиметрах или точках.
UFO just landed and posted this here
@font-face и белка вам помогут решить проблемы с заголовками. Даже в IE6.
UFO just landed and posted this here
Оптимизированный шрифт без лишних литер будет весить в среднем 50Кб. Загрузится он всего один раз и будет сидеть в кеше. Это намного лучше, чем грузить 25 картинок заголовков по 2Кб.
А «проще обойтись стандартными» — это 2000 год. Давайте уже делать красивые сайте. Тем более у линуксоидов нету как правило виндовых и маковых шрифтов, у виндузятников нету нельветики и прочих. Так что не все едины и стандартные шрифты — понятие относительное.
А «проще обойтись стандартными» — это 2000 год. Давайте уже делать красивые сайте. Тем более у линуксоидов нету как правило виндовых и маковых шрифтов, у виндузятников нету нельветики и прочих. Так что не все едины и стандартные шрифты — понятие относительное.
Ещё добавления:
-делать прозрачные элементы так что бы они не меняли вид при отключении слоев «под ними», чтобы была возможность вырезать его без подложки.
А то постоянно сталкиваюсь с таким безобразием…
-делать прозрачные элементы так что бы они не меняли вид при отключении слоев «под ними», чтобы была возможность вырезать его без подложки.
А то постоянно сталкиваюсь с таким безобразием…
Будь плохим парнем… =)
Больше двух лет уже оформляю psd так, как указано на сайте. Пришел к этому сам, т.к. еще и верстаю :)
Определяйте направляющие.
Выравнивая всё по созданной сетке из направляющих, получите более гармоничную, целостную композицию и облегчите работу верстальщика по нарезке макета.
Выравнивая всё по созданной сетке из направляющих, получите более гармоничную, целостную композицию и облегчите работу верстальщика по нарезке макета.
Задумка понравилось. Всё элегантно и со вкусом.
Желаю успехов.
Желаю успехов.
Захотел поделиться через твиттер — кнопки не нашел
А я бы еще посоветовал сохранять файл с макетом в папке Dropbox. Здесь тебе и бэкап и версионность. Главное, Ctrl+S периодически нажимать.
Хочу чтобы вкладки на вашем сайте открывались колесиком мыши
Спасибо. Советы, конечно, детские,— для начинающих дизанеров, но сайт сам по себе хорош.
Ваш блог всё-же понравился больше и человек вы хороший.
Ваш блог всё-же понравился больше и человек вы хороший.
Сделанно всё относительно симпатично, но подача плохая — полезной информации мало, а кликов много. Если это станет мини-социалкой по обмену полезными советами — буду рад. Но сейчас заходить на адрес больше одного раза не вижу смысла.
Будет ли какой-тот RSS или твиттер проекта или страница в фэйсбук, чтобы следить за обновлениями?
Сделал фейсбук группу каждый теперь может присоединиться к проекту и внести свою лепту.
UFO just landed and posted this here
У себя давно писал с товарищами такую информацию — требования к дизайну
Пункт с сеткой малость некорректен по-моему. Сетка — это всего лишь один из инструментов в графдизайне. Можно делать работы и без сетки, и она не является показателем зрелости дизайнера. Как-то бы переписать что ли.
Сделана Фейсбук пейдж для отзывов и советов
Отличная штука получилась.
Еще мелочь: в палитре Layers --> Panel options снять галку «Expand New Effects» — на многослойных макетах листать слои станет значительно проще.
Еще мелочь: в палитре Layers --> Panel options снять галку «Expand New Effects» — на многослойных макетах листать слои станет значительно проще.
При сохранении в JPG для картинок где красный цвет превалирует, нужно ставить качество побольше. В красном всегда остается больше артефактов…
Sign up to leave a comment.
Правила хорошего тона при работе в «Фотошопе»