Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 199
Называй файлы с учетом версии
Бида. Про системы контроля версий они не знают, что ли?
Я сам юзаю 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
Фокс требует большой аккуратности в комментариях.
Авторам стоило бы проверить, прежде чем запускать. Айа-ай-ай.
Фокс требует большой аккуратности в комментариях.
Авторам стоило бы проверить, прежде чем запускать. Айа-ай-ай.
Автор, Вам надо было сюда писать: 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. Сверху «грязь», снизу приемлемо…
кто бы спорил )
Не совсем от картинки, а скорей от расположения объекта по пиксельной сетке.
Например, вот одна и та же картинка, сохранённая с одинаковыми параметрами, но по-разному расположенная по восьмипиксельной сетке:
(уровни отредактированы для наглядности качества)
Я на эту тему статью хотел опубликовать, только вот карма не позволяет.
Например, вот одна и та же картинка, сохранённая с одинаковыми параметрами, но по-разному расположенная по восьмипиксельной сетке:
(уровни отредактированы для наглядности качества)
Я на эту тему статью хотел опубликовать, только вот карма не позволяет.
Я эту статью давно читал.
Конечно же, всё зависит от конкретного изображения, и где-то даже больше 90 нужно выставить, чтобы смотрелось прилично, а где-то хватит 60-и. Просто надо делать разумный выбор для каждой картинки, а не сохранять всё с одним значением параметра «Качество».
я ни разу не дизайнер, и разницы не вижу.
Спасибо
А вот для рисованой мультяшной картинки размеров 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, экспортируемый из правильно подготовленного исходника, может весить значительно меньше и иметь лучшее качество при большем проценте сжатия, чем из неподготовленного при слабом сжатии.
Раскрашивай папки
Ой, не надо… Никогда не понимал смысла этой бесполезной радуги — только отвлекает и изображает псевдоупорядоченность.
если внутри компании есть некоторые соглашения по использованию цветов для папок, то это облегчает жизнь. Допустим подвал — синий, шапка зеленая, меню — желтое и т.д. Становится легче ориентироваться
Все правильно, со всем согласен…
Эх… Вот бы еще постепенно перетянуть бы всех на 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. Он позволяет активировать шрифт без установки в систему.
Вот английский вариант: photoshopetiquette.com/
Забыли самое главное правило хорошего тона: использовать InDesign вместо Photoshop.
100%
Эээм, зачем? Индизайн предназначен для верстки POSM, а не сайтов. Но суть не в этом. Я линуксоид и верстаю в линуксе и GIMP. Как прикажете открывать ваш индизайн?
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 пофиксили эту шнягу. Теперь еще размеры можно в пикселях задавать, и объекты сами прилипают к целым единицам координат. Но вообще, нужно следить, чтобы у всего были целые координаты.
Я не писал, что без фотошопа можно обойтись. Но информационный дизайн в нем делать это плевок в лицо здравому смыслу.
Если в макете сплошная графика, то я рисую в Иллюстраторе. В нем можно и растеризировать, и ножик там есть, и в псд экспорт со слоями. Есть, конечно, и такие дизайны, которые удобнее в фотошопе делать.
Если в макете сплошная графика, то я рисую в Иллюстраторе. В нем можно и растеризировать, и ножик там есть, и в псд экспорт со слоями. Есть, конечно, и такие дизайны, которые удобнее в фотошопе делать.
И кстати, по вине некоторых дизайнеров, нам, верстальщикам, действительно иногда приходится задавать стили для каждого элемента отдельно.
А вот на тему отсутствия поиска… Ну извините, это уже собственная способность организовывать структуру работы. Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Поскольку я и дизайном занимаюсь, то я прекрасно знаю, как работать со слоями и группировкой. И в Индизайне я тоже много работал и прекрасно понимаю разницу работы между Фотошопом и Индизайном. Именно поэтому я столь уперто утверждаю, что пусть только хоть один дизайнер посмеет сделать мне макет в индизайне, он за это получит серьезную взбучку.
А вот на тему отсутствия поиска… Ну извините, это уже собственная способность организовывать структуру работы. Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Поскольку я и дизайном занимаюсь, то я прекрасно знаю, как работать со слоями и группировкой. И в Индизайне я тоже много работал и прекрасно понимаю разницу работы между Фотошопом и Индизайном. Именно поэтому я столь уперто утверждаю, что пусть только хоть один дизайнер посмеет сделать мне макет в индизайне, он за это получит серьезную взбучку.
Ну извините, это уже собственная способность организовывать структуру работы
Расскажите мне, пожалуйста, каким образом можно организовать работу в Фотошопе, чтобы потом, при необходимости, двумя кликами поменять цвет ссылки и стиль подчеркивания на всех страницах макета?
Я в своих cssниках всегда ориентируюсь хорошо, даже когда там несколько тысяч строк, потому что комментирование и группирование стилей никто еще не отменял. Да и когда работаешь с проектом, всегда знаешь, где примерно находится нужный стиль.
Похоже, вы все-таки плохо понимаете разницу между Фотошопом и Индизайном. Я писал не про ориентацию в стилях, а про то, что в Фотошопе НЕТ никаких текстовых стилей вообще. Все прийдется менять руками. Для того я и привел пример работы без общих ЦСС и задания параметров для каждого элемента вручную.
О работе с текстом я выше написал. Да, в Фотошопе это гемор для дизайнера. Но в данном случае нужно оценивать не исключительно страдания дизайнеров, а картину в общем. Мы имеем геморрой у дизайнера в работе с текстом и мы имеем геморрой работы верстальщика при работе с Индизайном. В данном случае надо чем-то пожертвовать. Чем же нам пожертвовать? Периодической проблемой в фотшопе, которая в принципе не вызывает проблем у дизайнеров, которые давно привыкли к такой работе с текстом или к постоянной проблеме полной неприспособленности Индизайна для сайтов и верстальщиков?
Что за бред, уважаемый? Ну не тот это софт! Да, верстать можно и в блакноте. Да, верстать можно и по макету из Индизайна. Параллель находите?
Что за бред, уважаемый? Ну не тот это софт! Да, верстать можно и в блакноте. Да, верстать можно и по макету из Индизайна. Параллель находите?
Периодической проблемой в фотшопе, которая в принципе не вызывает проблем у дизайнеров, которые давно привыкли к такой работе с текстом
Практика показывает, что такие дизайнеры просто не знакомы с Индизайном. Почти любой дизайн это на 90% текст, и вполне логично, что для работы с текстом я выбираю подходящий инструмент, а для рисования картинок я использую Фотошоп с Иллюстратором и потом линкую их в Индизайн. И да, любой вектор я с легкостью превращу в пиксели :)
Работать с текстом в Фотошопе это даже хуже чем верстать в блокноте.
А про верстку и неприспособленность Индизайна я ответил выше.
Существует Fireworks!
Имена слоев на русском языке тоже не лучшая идея.
Я бы еще добавил, что при экспорте нужно не просто выбирать джейпег, но и смотреть в сторону PNG.
80% макетов, что я верстаю, меньше весят (плюс без потерь), чем джейпеги с качеством 80+. Исключение составляют сайты, где много сложных градиентов и разных иллюстраций.
80% макетов, что я верстаю, меньше весят (плюс без потерь), чем джейпеги с качеством 80+. Исключение составляют сайты, где много сложных градиентов и разных иллюстраций.
Используй .zip вместо .rar
Используй TIF вместо PSD.
Всё то же самое, только со встроенным сжатием.
Не забывать про сетки (960 и т.д.). Иногда дизайнеры про них забывают.
Еще бывает адский ад, когда дизайнер присылает макет сайта(!) в CMYK, с разрешением 300dpi и дробными размерами шрифтов в сантиметрах или точках.
@font-face и белка вам помогут решить проблемы с заголовками. Даже в IE6.
Оптимизированный шрифт без лишних литер будет весить в среднем 50Кб. Загрузится он всего один раз и будет сидеть в кеше. Это намного лучше, чем грузить 25 картинок заголовков по 2Кб.
А «проще обойтись стандартными» — это 2000 год. Давайте уже делать красивые сайте. Тем более у линуксоидов нету как правило виндовых и маковых шрифтов, у виндузятников нету нельветики и прочих. Так что не все едины и стандартные шрифты — понятие относительное.
А «проще обойтись стандартными» — это 2000 год. Давайте уже делать красивые сайте. Тем более у линуксоидов нету как правило виндовых и маковых шрифтов, у виндузятников нету нельветики и прочих. Так что не все едины и стандартные шрифты — понятие относительное.
Ещё добавления:
-делать прозрачные элементы так что бы они не меняли вид при отключении слоев «под ними», чтобы была возможность вырезать его без подложки.
А то постоянно сталкиваюсь с таким безобразием…
-делать прозрачные элементы так что бы они не меняли вид при отключении слоев «под ними», чтобы была возможность вырезать его без подложки.
А то постоянно сталкиваюсь с таким безобразием…
Будь плохим парнем… =)
Больше двух лет уже оформляю psd так, как указано на сайте. Пришел к этому сам, т.к. еще и верстаю :)
Определяйте направляющие.
Выравнивая всё по созданной сетке из направляющих, получите более гармоничную, целостную композицию и облегчите работу верстальщика по нарезке макета.
Выравнивая всё по созданной сетке из направляющих, получите более гармоничную, целостную композицию и облегчите работу верстальщика по нарезке макета.
Задумка понравилось. Всё элегантно и со вкусом.
Желаю успехов.
Желаю успехов.
Захотел поделиться через твиттер — кнопки не нашел
А я бы еще посоветовал сохранять файл с макетом в папке Dropbox. Здесь тебе и бэкап и версионность. Главное, Ctrl+S периодически нажимать.
Хочу чтобы вкладки на вашем сайте открывались колесиком мыши
Спасибо. Советы, конечно, детские,— для начинающих дизанеров, но сайт сам по себе хорош.
Ваш блог всё-же понравился больше и человек вы хороший.
Ваш блог всё-же понравился больше и человек вы хороший.
Сделанно всё относительно симпатично, но подача плохая — полезной информации мало, а кликов много. Если это станет мини-социалкой по обмену полезными советами — буду рад. Но сейчас заходить на адрес больше одного раза не вижу смысла.
Будет ли какой-тот RSS или твиттер проекта или страница в фэйсбук, чтобы следить за обновлениями?
Сделал фейсбук группу каждый теперь может присоединиться к проекту и внести свою лепту.
У себя давно писал с товарищами такую информацию — требования к дизайну
Пункт с сеткой малость некорректен по-моему. Сетка — это всего лишь один из инструментов в графдизайне. Можно делать работы и без сетки, и она не является показателем зрелости дизайнера. Как-то бы переписать что ли.
Сделана Фейсбук пейдж для отзывов и советов
Отличная штука получилась.
Еще мелочь: в палитре Layers --> Panel options снять галку «Expand New Effects» — на многослойных макетах листать слои станет значительно проще.
Еще мелочь: в палитре Layers --> Panel options снять галку «Expand New Effects» — на многослойных макетах листать слои станет значительно проще.
При сохранении в JPG для картинок где красный цвет превалирует, нужно ставить качество побольше. В красном всегда остается больше артефактов…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Правила хорошего тона при работе в «Фотошопе»