Подписка на блог

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

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Шаблон Сафари для рисования эскизов

Скриншот сайта просто на белом фоне трудно воспринимать как сайт, поэтому в почти в любом портфолио веб-дизайнера сайты показывают в браузере. Многие дизайнеры предпочитают и эскизы рисовать «как бы в браузере».

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

Дело в том, что на Маке у окон обычно нет «рамки»: сверху заголовок (возможно, с тулбаром), а под ним идёт от первого до последнего пикселя по горизонтали — внутренности окна. Если у окна нет строки состояния, то «контентная область» и снизу продолжается до конца.

Ну, ладно, на самом деле, если присмотреться, то можно обнаружить у окна рамку тоньше пикселя. Но она находится как бы за границей окна (что хорошо видно на увеличенном фрагменте):

Окно на Маке

В общем, если в Фотошопе сверху влепить «шапку» от Сафари, забив на полупиксельный рамку (фотошоп всё равно рисует рамку вокруг канвы), то а) координата X любого элемента продолжит отсчитываться с нуля, а не с трёх, допустим, пикселей; б) можно будет легко изменять canvas size по вертикали, если страницу нужно сделать длинее, без необходимости сдвигать или перерисовывать какие-то нижние элементы.

Но смысл рисования сайта внутри браузера не только в повышении реалистичности. Главное (собственно, то, ради чего я перешёл на такой формат) — это доступность строки заголовка и адресной строки. Теперь на эскизах страниц я пишу их тайтлы, вставляю фавыконку и придумываю им нормальные урлы, что позволяет заметно упростить взаимодействие с верстальщиками и технологами. И не забудешь, что это тоже надо делать. Опять же, если я имею в виду, что на какой-то странице должен быть РСС, я могу дополнительно намекнуть на это, прицепив иконку РССа в конец адресной строки.

Короче, дарю всем желающим ПСД-шаблон (68 КБ), в котором все значимые элементы браузера сделаны отдельными слоями, в т. ч. заголовок окна (с правильной рельефностью) и урл в виде текста. Ширина картинки — 1000 пикселей. В названиях слоёв используется нехитрая нотация: точкой заканчиваются слои, которые по любому должны быть, а вопросиком — те, которые можно включать/выключать по вкусу. Ещё можно вместо обычного заголовка выбрать 5 табов, чтобы реально оценивать влезабельность своего тайтла.

Добавлено в 14:32: Сергей Чикуёнок оставил полезнейший комментарий.

Подписаться на блог
Поделиться
Отправить
Запинить
23 комментария
Влад

Спасибо, пригодится :)

Дмитрий

А как пиксель может быть не однотонным? Разве это не точка с одним цветом?

Николай Товеровский

Дмитрий, сделать линию тоньше пикселя можно обманув зрение с помощью прозрачности (цвета). На этом построен антиалиазинг.

Дмитрий

без красивой прозрачной тени... :(

Илья Бирман

Она мешает рисовать.

Дмитрий

Когда рисуешь, можно скрыть слой с тенью... Жаль, что его нет.

Илья Бирман

Она мешает координаты понимать, потому, что приходится всё время 40 вычитать.

Добавить дроп-шадоу в Фотошопе не сложнее, чем написать два комментария на эту тему :-)

Александр Реушкин

Спасибо, Илья!

Дмитрий

А за время написания третьего комментария можно убрать черные уголки сверху ;-)

homm

Илья, а почему бы не добавить тени нужных размеров к слою «background-white.»? Они бы не мешали редактировать картинку, а в нужный момент можно было бы сделать «Canvas size» и сразу получить тени. И да, черные пиксели сверху слишком портят гармонию.

Илья Бирман

Была такая мысль, ага, но это ж влом делать :-) В следующей серии, видимо..

Сергей Чикуёнок

Небольшой комментарий для тех, кто верстает макеты, вписанные в окно браузера.
Чтобы упростить себе жизнь с вычислением координат надо включить Rulers и перетащить перекрестие в нужную точку. Тогда вы укажете фотошопу, где должно быть начало координат. Тогда хоть с тенями макет можно делать :)

http://chikuyonok.ru/u/coord_origin.png

Илья Бирман

Сергей, спасибо!

Поразительно, что я всю жизнь пользуюсь этой фичей в Иллюстраторе и мне ни разу даже в голову не пришло попробовать сделать то же самое в Фотошопе.

Дмитрий

Спасибо за совет! Я аж со стула подпрыгнул :)

Михаил Квакин

Есть шанс, что антиспам убьёт мой коммент, но вот мой контрибьюшн: http://www.webdesignerstoolkit.com/ На этом сайте собраны всевозможные браузеры в .psd для веб-дизайнеров. Мне очень помогает, когда нужно что-нибудь специфическое.

Илья Бирман

Тут нет антиспама.

Михаил Квакин

Вот и слава Б-гу.

bes island

А почему обязательно привязываться к конкретному существующему браузеру? Разве просто оконной рамки будет недостаточно?

Владимир

Единственное чего не нашёл — так это хрома. Иногда обрисовываю макеты именно им, притом с довольно специфическим «тюнингом».
Авось кому пригодится → http://upload.com.ua/get/900856883/

Вячеслав Ильинский

Мои рамки (сафари и хром) они отличаются от оригинальных браузеров, если нужно могу и 1000px залить.

http://habrahabr.ru/blogs/webdev/48372/

Вовка Соловьёв

Такие шаблоны это очень полезная вещь. Сафари, конечно, имеет очень красивый и простой вид, но не все знают какие-то еще браузеры кроме эксплорера. И надо добавить, что большинство начинает кликать по кнопкам и полям :)

Мы в Подходе давно так делаем. Ещё можно собрать в один псд все стандартные контролы, в другой — все частоупотребляемые иконки.

Василий

Илья а почему Сафари 4 а не 3?

zhinzher

А че, нонче скриншоты делать ровным пацанам влом? И че все в этот сафари вцепились? Средненький браузер с примитивным интерфейсом. Я понимаю, реальные скриншоты делать лениво, проще морочить голову доверчивым посетителям объемами реализованного креатиффчика, но тады «осел» будет кстати, хотя, если вы имеете в виду, что результаты ваших творений будут приемлемо смотреться в окне иноплатформенного браузера, которого и половина посетителей в глаза не видела, то, конечно да!

Вы просто стыдитесь своих работ. Они, видите ли, без морды Safari не смотрятся, OMG, вы то сами поняли что сказали? Зайчеги, если вы делаете Говно (не какое то там говно или говнецо) то никакие рамки, скины и интерфейсы вам его не спасут, даже самые невероятные.

С имбирным....

Илья Бирман

Вы смешной, спасибо.

zhinzher

Вы бы лучше книжки бы почитали, а то первая половина из вас не в состоянии без ошибок на родном языке писать, а вторая половина не знает чем sRGB от Adobe RGB отличается, зато вписать свои каракули в Safari прямо таки очередь образуется.

p.s. Zhinzher это примерно такая же кличка как и Бриман, если вы, вдруг, терпеть не сможете.
гыг :)

Николай Гурьянов

zhinzher, посмотрел ваши комментарии через Сафари. Могу заявить, что рамка Сафари все-таки спасает говно (-:

Мне непонятно, что плохого в том, что дизайнер делится с другими дизайнерами чем-то полезным и бесплатным? Это по умолчанию хорошо. Откуда же появляются такие озлобленные болваны, как zhinzher.

Роман Баранов

Некоторые люди прямо-таки обескураживают своей «логикой». (Это я об одном из комментаторов)

Панов Илья

не все прочитал. лично я делаю скрины окон стандартной функцией мака.
у меня это cmd+shift+4 жму пробел и вуаля.

Илья Бирман

Оригинальное решение!

Александр Кравчук

Приятно видеть, что у умных людей мысли сходятся: http://designerstvo.livejournal.com/9208.html :))
И ещё, почему-то в твоём макете верхние уголки заливаются черным: http://www.picamatic.com/show/2009/05/31/12/05/3828793_75x67.jpg , возможно, — проблема фотошопа (а возможно и нет).

Пользовательский интерфейс
Доступны три раздела
электронного учебника

Популярное