JavaScript → Парсер PSD файлов на CoffeeScript
Автор скрипта psd.js — Райан Лефевр. Скрипт, как вы уже догадались, умеет открывать photoshop документы, как в браузере, так и на стороне Node.js.
Демонстрация возможностей (ранняя beta, не удивляйтесь, что некоторые файлы не откроются. На github странице проекта многие жалуются на это).
Пример вывода информации на Node.js:
{PSD} = require 'psd.js'
psd = PSD.fromFile './path/to/file.psd'
psd.parse()
for layer in psd.layerMask.layers
console.log "Layer: #{layer.name}"
console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
console.log "Position: top=#{layer.top}, left=#{layer.left}"
Я пиарюсь → Futurico — большой пакет компонентов для создания пользовательских интерфейсов
Futurico UI Pro
Futurico UI Pro это один из самых больших наборов компонентов для создания дизайна пользовательского интерфейса. Он насчитывает более 200 элементов, которые могут быть использованы в любом веб-проекте или программе.
Все элементы в паке редактируемы и доступны в PSD, разделенного по слоям. Это делает пакет легко интегрируемым в любой концепт или проект. Итоговый архив содержит в себе 3 PSD файла в разных цветовых схемах и 2 примера использования Futurico для создания веб-сайта и интерфейса программы.
Веб-дизайн → Переменные в Фотошопе или как импортировать внешние PSD-файлы влёгкую
Во время работы над крупными проектами с множеством макетов и видов объекта даже минимальное изменение в повторяющемся компоненте может потребовать времени. Проход по множеству макетов и подстройка цвета или начертания у подобного повторяющегося элемента может стать изнуряющим делом. Конечно же, если у вас есть подмастерье, выполняющий всю грязную работу за вас, то вы, определённо, везунчик, но что же делать нам, фрилансерам?
Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».
Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.
Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».
Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.
Интерфейсы → Android GUI PSD v.2.0
Элементы Android GUI и некоторые основные экраны в одном PSD-файле, версия 2.0.
Взялся за проектирование интерфейса приложения под Android и понял, что первой версии Android GUI PSD от Pavel Maček мне не хватает. Тогда и решил сделать свой набор, взяв за основу первую версию. В общей сложности на отрисовку элементов в vector path в Photoshop'e затратил около 3 дней. К PSD файлу прилагаются шрифты Droid Serif, Droid Sans, Droid Sans Mono, которые желательно установить.
Взялся за проектирование интерфейса приложения под Android и понял, что первой версии Android GUI PSD от Pavel Maček мне не хватает. Тогда и решил сделать свой набор, взяв за основу первую версию. В общей сложности на отрисовку элементов в vector path в Photoshop'e затратил около 3 дней. К PSD файлу прилагаются шрифты Droid Serif, Droid Sans, Droid Sans Mono, которые желательно установить.
Каскадные Таблицы Стилей → Golden Grid CSS: PSD-шаблон
Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.
Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.
Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.
Скачать (.zip, 20 кб)
Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.
Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.
Скачать (.zip, 20 кб)
GTD → Сжатие Psd файлов
Вчера получил от дизайнера psd-файл (вообще, мне часто приходится иметь дело с «псдшками» — я ведь с ними работаю). Но, вчера дело было не совсем обычным :) Нестандартность ситуации заключалась в приёме сжатия файла — в нем были отключены все слои.
Честно говоря, я впервые встретил именно такой способ уменьшения размера psd-фалов, хотя на Хабре он упоминался. Ранее мне были известны некоторые иные методики сжатия psd, о которых я и хочу рассказать Вам сегодня.
Честно говоря, я впервые встретил именно такой способ уменьшения размера psd-фалов, хотя на Хабре он упоминался. Ранее мне были известны некоторые иные методики сжатия psd, о которых я и хочу рассказать Вам сегодня.
Веб-дизайн → Компоненты интерфейса Safari и IE7 в .psd
Решил поделиться файликом, который я использую каждый раз, когда рисую макет или проектирую интерфейс.
Экономит мне кучу времени.
Скачать архив с пээсдэшником (49 kb)
UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари
Ссылка от niker
designerstoolbox.com/designresources/elements/
Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/
Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners
Ссылка от 3fonov
Yahoo Design Stencil Kit
Экономит мне кучу времени.
Скачать архив с пээсдэшником (49 kb)
UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари
Ссылка от niker
designerstoolbox.com/designresources/elements/
Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/
Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners
Ссылка от 3fonov
Yahoo Design Stencil Kit
Персональные блоги → SWUSE — создание дизайна (pre-)beta
Прошло некоторое время и появилась новая версия нарезки дизайна для CMS SWUSE. На этот раз всё стало более профессионально, но еще не идеал. Не буду рассказывать что это такое, в прошлом посте я уже писал об этом, поэтому расскажу что нового появилось и что из старого обновилось.
Веб-разработка → 5 правил подготовки макетов веб-страниц
Приходится ли Вам работать с дизайном, который присылает сам клиент (дизайн выполняется не вашей студией)? Всегда ли получается реализовать тот полёт фантазии, который изображен на PSD? Возможно даже, Вам знакома ситуация, когда, чисто технически, точно сверстать присланный материал не получалось. Припомнили?
Хотели бы Вы, чтобы дизайнер понимал верстальщика, продолжая и дальше мыслить своими художественными категориями, не вдаваясь во все эти «аштиэмэлы» и «цээсэсы»? Обеспечивал верстальщика качественным материалом для вёрстки, который является одним из основных факторов влияющих на время и качество вёрстки?
Соблюдение приведённых пяти правил достаточно, чтобы найти общее понимание с клиентом (предоставте ему эти правила и поясните, что только при их выполнении можно гарантировать 100% соответствие нарисованного со свёрстаным), а так же обеспечить продуктивную совместную работу дизайнера и кодера.
18.11.07.Раньше статья называлась «5 правил хорошего дизайна для web», однако некоторым это название показалось подменой понятий. В этой статье речь идёт не о эстетических аспектах дизайна веб-сайтов, а о технических правилах подготовки дизайна для вёрстки. Спасибо всем, кто поддержал меня и тем, кто понял, что имелось в виду в первоначальном названии.
Хотели бы Вы, чтобы дизайнер понимал верстальщика, продолжая и дальше мыслить своими художественными категориями, не вдаваясь во все эти «аштиэмэлы» и «цээсэсы»? Обеспечивал верстальщика качественным материалом для вёрстки, который является одним из основных факторов влияющих на время и качество вёрстки?
Соблюдение приведённых пяти правил достаточно, чтобы найти общее понимание с клиентом (предоставте ему эти правила и поясните, что только при их выполнении можно гарантировать 100% соответствие нарисованного со свёрстаным), а так же обеспечить продуктивную совместную работу дизайнера и кодера.
18.11.07.Раньше статья называлась «5 правил хорошего дизайна для web», однако некоторым это название показалось подменой понятий. В этой статье речь идёт не о эстетических аспектах дизайна веб-сайтов, а о технических правилах подготовки дизайна для вёрстки. Спасибо всем, кто поддержал меня и тем, кто понял, что имелось в виду в первоначальном названии.
Персональные блоги → Всем переходить на Flash CS3!
Недавно был заказчик, фотограф. Ему требовалось сделать галерею по макету, предоставленному в psd. Это было ужасно нудно и долго переводить каждый слой в png, а затем вставлять во флеш. В голове моей металась мысль: «ну почему ты не постуался на месяц позже!».
Но вот и вышел Flash CS3. Я знаю, что многие сейчас думают «да зачем тратить 700$ на какую-то “легкую интеграцию”, лучше сэкономлю и буду ручками делать все». Так вот моя статья, показывающая один из огромных плюсов нового флеша.
Но вот и вышел Flash CS3. Я знаю, что многие сейчас думают «да зачем тратить 700$ на какую-то “легкую интеграцию”, лучше сэкономлю и буду ручками делать все». Так вот моя статья, показывающая один из огромных плюсов нового флеша.