Comments 49
А почему нельзя использовать Free Transform для векторных объектов?
Ну нельзя же так критично, а то новички примут на веру и никогда этого делать не будут. Да, при ресайзе не попадешь в пиксель, но кто потом мешает передвинуть отдельные узлы так, чтобы все встало ровно?

Я к тому, что ресайзить можно, но только с умом.
Почему же нельзя, можно, но, например, бокс со скругленными углами растянется неправильно. Давно жду когда Adobe добавит эту фичу в фотошоп как и иллюстраторе, чтобы углы не деформировались.
Окей, равномерно — да, можно, а если только по горизонтали или только по вертикали — нет?
Есть инструмент «Стрелка». Выделяйте ей нужные точки фигуры и двигаете их по горизонтали. Хотя, тоже надо быть внимательным, чтобы полупрозрачного пикселя не осталось.

Есть маленький хак. Чтобы не осталось полупрозрачного пикселя нужно двигать точки при масштабе отображения 100%
А при зажатом Shift в любом масштабе не будет пикселить, но двигает сразу на 10px =)
в фотошопе я пользуюсь белой стрелкой, чтобы у шейп-лейеров края пиксель в пиксель подгонять.

А в иллюстраторе есть небольшая хитрость: для прямоугольника со скругленными углами я никогда не пользуюсь инструментом Rounded rectangle, а рисую простой прямоугольник и применяю в нему эффект Effect > Stylize > Round Corners..., где вы в режиме превью можете задавать абсолютно любой радиус скругления, и, что самое важное, ваш прямоугольник, а точнее, его углы скругленные, будут трансформироваться пропорционально. Потом, при необходимости, эффект можно разобрать.
Класс, давно заметил, всё строится на мельчайших деталях, если не лениться и учитывать их, то гарантированно получишь хороший результат. Это относится не только к построению реалистичных интерфейсов. Я даже думаю, что все люди умеют рисовать, просто ленятся, т.к. рисунок — это просто куча мелочей соединённых воедино.
Отличная статья! Много интересных, и на мой взгляд, правильных заметок. Привычное глазу, всегда воспринимается лучше.
Мое мнение, интерфейс в первую очередь должен быть удобным и только потом красивым. Без должного проектирования и продумывания интерфейс не получится привлекательным.
Должное проектирование и продумывание + грамотное графическое исполнение = действительно хороший Интерфейс
Ну почему же, мне кажется, при должных навыках можно достаточно быстро набросать привлекательный на глаз интерфейс, и с ним даже можно будет работать. Проблемы появятся, если с этим интерфейсом прийдётся работать много и часто! Тут я с вами согласен, в первую очередь интерфейс должен быть удобен.
поэтому, чтобы все по феншую было, надо сначала прототип сделать в индизайне, у которого есть многостраничность, инструменты рисования и возможность использования интерактивных кнопок и ссылок внутри документа и на урлы. а потом уже шкурку для интерфейса рисовать. Часто, к сожалению, дизайнеры задумываются только о внешней части интерфейса, забывая, что удобство пользователя стоит во главе угла.
Очень здорово, спасибо, крайне пригодится для разработки интерфейсов, пусть не приложений, а курсов дист. обуч, но тут тоже полезно)))
Блин, всегда завидовал людям, которые умеют так рисовать!

Обожаю подобные статьи со вкусными картинками — очень вдохновляет! Спасибо.
*ушел рисовать*
Хорошая статья приятно иллюстрирована. Думаю, что тем, кто изучал «основы дизайна» в Вузе тоже будет полезно соотнести свои знания именно с веб-средой. В общем, спасибо автору. :)
Ох, это-ж гениальный сайт. А я коллекцию свою собирал таких частей
В разделе «Действуйте тоньше» первый абзац лучше не включать в список ) Судя по контексту.
Спасибо, очень полезная статья. Я хоть и программист, а рисовать приходится довольно часто. Теперь не страшно будет смотреть на свои работы:)
Очень полезный совет о конвертировании слоя в SmartObject с последующей его растеризацией для сохранения режима смешивания цвета при сохранении в PNG.
Не знал об этом, спасибо!
Тоже не знал.

А я перед сохранением склеиваю слои. Кустарно, но эффект тот же :)
А если нужно сохранить какое-то полупрозрачное свечение с нестандартным режимом смешивания цвета?
и я не знал, склеивать тоже нужно, чтобы что то на нижнем слое было… не удобно (
теперь буду SmartObject пользоваться, спасибо :)
Все достаточно верно написано, хотя ничего принципиально нового тут не исследовано, но новичкам будет полезно.
Я тоже плотно занимаюсь интерфейсами, сейчас осваиваю iPhone 4 с новым разрешением и iPad — там вообще все дико интересно. обычные айфоны, Blackberry и Android уже освоены — с ними проблем нету. Кнопочки-фусечки получаются нормуль…
кстати, для того, чтоб заслайсить кнопку, я не растеризую ее, а создаю новый слой поверх, выделяю нужные мне слои вместе с этим пустым (например, слой самой векторной кнопки, иконка и текст на ней), Cmd+E сливаю в один слой, все эффекты, тени и прочая — растеризуются корректно. далее Cmd+щелчок на имени этого слоя, чтобы выделить все его составляющие (включая едва видимые прозрачности от теней), Image > Crop, чтобы отсечь все ненужное. И далее Cmd-щелчок на иконке глаза в палитре слоев, чтобы сделать невидимыми все слои, кроме этого одного. И далее — File > Save for Web, PNG-24 = уже на автомате делаю все такие операции (надо будет экшен написать), и любую кнопку перегоняю в полупрозрачный PNG за считанные секунды.
Сложно как-то :)
Попробуйте выделить все слои -> Duplicate Layers… -> File — New, и в новом документе Image -> Trim -> Transparent pixels
Ну и всё, отдельный документ, обрезанный до непрозрачных пикселей и со всеми слоями.
Если в экшн эти два действия записать, вообще моментом получается.

Возможно, мне изменяет память, но при сливании эффекты нижнего слоя применяются ко всему объединённому изображению. Поправьте, если не так.
Если выделяете верхний и нажимаете Ctrl+E — то применятся эффекты нижнего. Если выберете оба — эффекты останутся, как есть, но если под ними фон, увидите, что слетели режимы наложения. По возможности лучше оставить все с эффектами до конца, а потом выделить все слои и слить.
Спасибо.
Собственно, поэтому и стараюсь копировать все слои без слияния.
Чтобы сохранить объект в формате PNG или GIF, сперва конвертируйте слой в Smart Object, а затем растеризуйте его. Это сохранит установленные режимы смешивания цвета.

Можете объяснить/проиллюстрировать в чем тут смысл? Я всегда без зазрения совести использовал Save For Web и не замечал никаких искажений.
Only those users with full accounts are able to leave comments. Log in, please.