Как стать автором
Обновить

Всем переходить на Flash CS3!

Чулан
Недавно был заказчик, фотограф. Ему требовалось сделать галерею по макету, предоставленному в psd. Это было ужасно нудно и долго переводить каждый слой в png, а затем вставлять во флеш. В голове моей металась мысль: «ну почему ты не постуался на месяц позже!».
Но вот и вышел Flash CS3. Я знаю, что многие сейчас думают «да зачем тратить 700$ на какую-то “легкую интеграцию”, лучше сэкономлю и буду ручками делать все». Так вот моя статья, показывающая один из огромных плюсов нового флеша.
Читать дальше →
Всего голосов 21: ↑19 и ↓2 +17
Просмотры 310
Комментарии 57

5 правил подготовки макетов веб-страниц

Разработка веб-сайтов *
Приходится ли Вам работать с дизайном, который присылает сам клиент (дизайн выполняется не вашей студией)? Всегда ли получается реализовать тот полёт фантазии, который изображен на PSD? Возможно даже, Вам знакома ситуация, когда, чисто технически, точно сверстать присланный материал не получалось. Припомнили?

Хотели бы Вы, чтобы дизайнер понимал верстальщика, продолжая и дальше мыслить своими художественными категориями, не вдаваясь во все эти «аштиэмэлы» и «цээсэсы»? Обеспечивал верстальщика качественным материалом для вёрстки, который является одним из основных факторов влияющих на время и качество вёрстки?

Соблюдение приведённых пяти правил достаточно, чтобы найти общее понимание с клиентом (предоставте ему эти правила и поясните, что только при их выполнении можно гарантировать 100% соответствие нарисованного со свёрстаным), а так же обеспечить продуктивную совместную работу дизайнера и кодера.

18.11.07.Раньше статья называлась «5 правил хорошего дизайна для web», однако некоторым это название показалось подменой понятий. В этой статье речь идёт не о эстетических аспектах дизайна веб-сайтов, а о технических правилах подготовки дизайна для вёрстки. Спасибо всем, кто поддержал меня и тем, кто понял, что имелось в виду в первоначальном названии.
Читать дальше →
Всего голосов 46: ↑26 и ↓20 +6
Просмотры 6.7K
Комментарии 96

SWUSE — создание дизайна (pre-)beta

Чулан
Прошло некоторое время и появилась новая версия нарезки дизайна для CMS SWUSE. На этот раз всё стало более профессионально, но еще не идеал. Не буду рассказывать что это такое, в прошлом посте я уже писал об этом, поэтому расскажу что нового появилось и что из старого обновилось.
Читать дальше →
Всего голосов 7: ↑3 и ↓4 -1
Просмотры 195
Комментарии 4

Компоненты интерфейса Safari и IE7 в .psd

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

13.30 КБ

Скачать архив с пээсдэшником (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
Всего голосов 148: ↑134 и ↓14 +120
Просмотры 1.8K
Комментарии 56

PSD — Трик с размером файла

IT-компании
Есть psd файл с N слоёв. Отключаем видимость всех слоёв:
image
Сохраняем. Получаем файл на 20% меньше. То есть, если есть 3.4Gb этого, блин, файла, то весить он будет в итоге примерно 2.6Gb. Результат на лицо.

Единственный очевидный минус — мы лишаемся превью.

Это, конечно же, довольно старый приём, но он до сих пор работает (в CS3 и в CS4).

UPD: Чуть поясню: трик не для хранения файлов (чтоб место не занимали), а для экстренных случаев неотложной помощи, когда не хватает мегабайта на флешке.
Всего голосов 105: ↑91 и ↓14 +77
Просмотры 2.3K
Комментарии 46

PSD подарок

Дизайн
imageКакое-то время назад я участвовал в конкурсе на дефолтный дизайн к CMS livestreet. Конкурс не выиграл, но в топ 3 претендентов вроде попал. Да и на хабре диз. кому то понравился. Сегодня какой-то пост напомнил об этом конкурсе и об эскизе в псд, который пылится на винче.

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

psd на народе
Всего голосов 84: ↑68 и ↓16 +52
Просмотры 827
Комментарии 30

Golden Grid CSS: PSD-шаблон

CSS *
Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.

Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.

Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.

Скачать (.zip, 20 кб)
Всего голосов 8: ↑5 и ↓3 +2
Просмотры 8.9K
Комментарии 8

Android GUI PSD v.2.0

Интерфейсы *
Элементы Android GUI и некоторые основные экраны в одном PSD-файле, версия 2.0.

Android GUI PSD v. 2.0

Взялся за проектирование интерфейса приложения под Android и понял, что первой версии Android GUI PSD от Pavel Maček мне не хватает. Тогда и решил сделать свой набор, взяв за основу первую версию. В общей сложности на отрисовку элементов в vector path в Photoshop'e затратил около 3 дней. К PSD файлу прилагаются шрифты Droid Serif, Droid Sans, Droid Sans Mono, которые желательно установить.
Ссылки и превью под катом
Всего голосов 71: ↑62 и ↓9 +53
Просмотры 5.6K
Комментарии 21

Переменные в Фотошопе или как импортировать внешние PSD-файлы влёгкую

Веб-дизайн *
Перевод
Во время работы над крупными проектами с множеством макетов и видов объекта даже минимальное изменение в повторяющемся компоненте может потребовать времени. Проход по множеству макетов и подстройка цвета или начертания у подобного повторяющегося элемента может стать изнуряющим делом. Конечно же, если у вас есть подмастерье, выполняющий всю грязную работу за вас, то вы, определённо, везунчик, но что же делать нам, фрилансерам?

Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.
Читать дальше →
Всего голосов 72: ↑70 и ↓2 +68
Просмотры 18K
Комментарии 37

Парсер PSD файлов на CoffeeScript

JavaScript *

Автор скрипта 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}"

Читать дальше →
Всего голосов 36: ↑32 и ↓4 +28
Просмотры 5.3K
Комментарии 25

StartPSD — в помощь дизайнерам сайтов, автоматизируем работу

Веб-дизайн *
Сегодня решил поделиться с вами своими материалами по автоматизации работы в photoshop. А именно это тот стартовый шаблон с которого я начинаю делать любой дизайн сайта.
Подправил, добавил, оформил в виде приятного продукта под названием — StartPSD.
Можно скачивать, редактировать, пользоваться на здоровье!

Встречайте.
image
Читать дальше →
Всего голосов 93: ↑79 и ↓14 +65
Просмотры 3.7K
Комментарии 57

Re:StartPSD или Браузеры в стиле Aero

Веб-дизайн *
Это ответ на пост StartPSD — в помощь дизайнерам сайтов, автоматизируем работу. В комментариях очень многие интересовались, почему же использовался Safari и Mac, поэтому я решил сделать аналогичную штуку только в стиле Аэро. Возможно кому-то пригодится.

Сетка взята из шаблона Firefox для «мака» от cherenkevich (там еще неплохая серия статей про модульную сетку) — cherenkevich.livejournal.com/40021.html
Читать дальше →
Всего голосов 54: ↑42 и ↓12 +30
Просмотры 2.3K
Комментарии 11

Подготовка макета для верстальщика

Разработка веб-сайтов *


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

Поскольку разработка сайта — это командная, многоэтапная работа, то для достижения качественного результата на этапе дизайн-верстка, необходимо проработать не только визуальную часть дизайна, но и продумать интерактивные элементы. То есть те, которые изменяют свое состояние от действий пользователя. Это сразу откинет много вопросов верстальщика типа: «а как эта кнопка будет подсвечиваться?».
Читать дальше →
Всего голосов 123: ↑106 и ↓17 +89
Просмотры 13K
Комментарии 88

UICloud: Самая большая база пользовательских интерфейсов

Веб-дизайн *Интерфейсы *


UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.
Всего голосов 163: ↑161 и ↓2 +159
Просмотры 34K
Комментарии 40

Новое для веб-дизайнера за октябрь 2012

Разработка веб-сайтов *CSS *
Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты


Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

Читать дальше →
Всего голосов 122: ↑114 и ↓8 +106
Просмотры 70K
Комментарии 23

Наконец-то полноценный контроль версий для дизайнеров!

GitHub *
Вчера Github объявил о поддержке PSD в дополнение к текущим графическим форматам. Появился отличный повод облегчить жизнь дизайнерам и фронтэндщикам, очень надеюсь на понимание первыми необходимости и приобщение.
Ссылка на новость в блоге гитхаба.
Всего голосов 37: ↑23 и ↓14 +9
Просмотры 15K
Комментарии 19

Switch to Sketch. Часть 1

Веб-дизайн *Работа с векторной графикой *
Tutorial


О программе Sketch я узнал еще год назад. Скачал демо тогда еще 2-й версии. Признаться, она меня совершенно не впечатлила. Какой-то слишком простой показалась. Я привык к навороченным интерфейсам софта от Adobe, а расположение панелей в стиле Apple iWork (Pages, Numbers, Keynote) мне по какой-то причине не нравится. К тому же мне оказалось комфортнее работать с темным интерфейсом, каковой нынче есть в Photoshop CC. Плюс Sketch 2 был достаточно кривоватый, содержал немало досадных багов, да и вообще впечатления не оказывал скоростью работы. В общем, поигрался с демкой и благополучно забыл. Впрочем, оказалось, что зря…

Читать дальше →
Всего голосов 73: ↑68 и ↓5 +63
Просмотры 143K
Комментарии 69

Switch to Sketch. Часть 2

Веб-дизайн *Работа с векторной графикой *
Tutorial


Итак, продолжим исследовать программу Sketch 3 с целью последующего свитчинга в нее из Фотошопа. Первую часть можно почитать здесь.

Читать дальше →
Всего голосов 43: ↑41 и ↓2 +39
Просмотры 37K
Комментарии 12
1