Рубрики
Дизайнеру

Не забывайте о favicon для ретина-дисплев

Favicon (фавикон) — неловкие шаги Интернета, пережиток первых дней Internet Explorer, немного неудобные в обращении, так как не используют известные и любимые веб-технологии, а скорее возвращаются к используемому в Windows формату файла .ico. Однако это важная часть вашего веб-сайта, и буквально первая вещь, которую видят пользователи в URL строке в браузере.  Значки веб-сайта также используются в разных местах, например во вкладках и закладках браузера. Те, кто хочет больше узнать о том, как вывести favicon для сайта может почитать эту статью, а ниже рассказывается о том, как подготовить favicon именно для ретина-дисплея.

Рубрики
Верстальщику Полезности

Парочка инструментов для того, чтобы работать быстрее

Здравствуйте. Сегодня я хотел бы поделится с вами инструментами, которые помогают мне работать более продуктивно, как верстальщику и фрилансеру. Без лишних вступлений перейду сразу к делу.

1. XRefresh

XRefresh — это плагин для браузера, который производит обновление текущей веб-страницы после изменения файлов в отдельных папках. Это значительно упрощает процесс верстки страниц. Теперь больше не нужно постоянно наживать F5!!!

Плагин состоит из двух небольших приложений. Первое — инсталлируется на компьютере и является по сути  монитором событий, который «висит» в трее системы. Вторая часть — это либо интегрируемый в FireBug плагин (если вы работаете с Firefox), либо  тулбар для Internet Explorer.

Рубрики
Дизайнеру Теория

Дизайнерам-мудакам или…

Советы дизайнерам веб-сайтов за которые верстальщик скажет спасибо

Отмечу сразу — не все дизайнеры мудаки. Но написать этот пост меня сподвиг один из последних заказов по верстке, где макет был сделан все-таки не хорошим дизайнером. Получив от заказчика макет дизайна сайта, я подумал, что верстка должна быть гладкой и приятной, но я ошибся.

Ошибка моя заключалась в том, что взглянув на превью макета и увидев довольно неплохой чистый дизайн, я до начала работы не открыл предоставленный послойный .psd макет в редакторе для более детального изучения. Да, говно я верстальщик после этого, но приходится учится на своих ошибках и делиться опытом с другими.

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

Что было не так в макете? Самое плохое было то, что от него так и веяло «плакатом». Помимо этого были нарушены все основные требования грамотного дизайна макетов сайтов: полное отсутствие структуры макета, использовались нестандартные шрифты, при этом к исходнику не были предоставлены эти самые шрифты, помимо этого графика и текстовые материалы были смешаны, а местами вообще сведены в единые слои. Ну… Естественно о сетке, каких либо направляющих и линейках я вообще и не говорю, ими там и не «пахло».

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

Итак, изначально давайте обозначим основные моменты о которых мы будем говорить далее.

  • Сетка макета
  • Структура макета
  • Разделение графики и текстов
  • Шрифты
  • Единицы измерения
  • Обязательные элементы макета

Собственно, далее подробно по каждому моменту.

Рубрики
Дизайнеру

Подборка иконок для оформления Интернет магазина

glossy-ecommerce-icons

Здравствуйте. Электронная коммерция становится все более и более популярной. Количество Интернет магазинов и разнообразие товаром, которые в них продаются не может не восхищать. Лично я часто пользуюсь услугами Интернет магазинов для покупки книг онлайн. В принципе, все устраивает в таком способе покупок, но… Лично мне кажется, что нашим интернет магазинам очень не хватает грамотного оформления. На сегодняшний день системы интернет коммерции предлагают пользователям различные варианты оплаты продаж через Интернет, но пользователь зачастую лишен возможности делать это удобно.

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

Рубрики
Полезности Проги для вебмастера

Полезные бесплатные плагины для Photoshop

Вдохновленный статьей Smashing magazine про кучу плагинов к Photoshop, я решил рассказать о нескольких бесплатных плагинах к Photoshop, которые будут весьма полезными именно для веб-мастера. А учитывая то, что сам редактор удовольствие не из дешевых, полезные и бесплатные плагины хоть как-то компенсируют затраты на продукт:)

В общем, сегодня я расскажу про три плагина, которые лично для меня очень полезны, и я использую данные плагины очень часто при решении производственных задач. SuperPNG — плагин, который значительно расширяет возможности работы с .png в Photoshop. Icon Plugin — позволяет создавать .ico файлы прямо в редакторе. AlphaWorks — позволяет вычитать определенные участки изображения в пользу альфа-прозрачности.