Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 49
Прям в тему, как раз искал подобную статью. Спасибо)
А почему нельзя использовать Free Transform для векторных объектов?
В пиксел не попадешь
В пиксель не попадёте.
Почему же нельзя, можно, но, например, бокс со скругленными углами растянется неправильно. Давно жду когда Adobe добавит эту фичу в фотошоп как и иллюстраторе, чтобы углы не деформировались.
Шифт?
Shift нажми
в фотошопе я пользуюсь белой стрелкой, чтобы у шейп-лейеров края пиксель в пиксель подгонять.
А в иллюстраторе есть небольшая хитрость: для прямоугольника со скругленными углами я никогда не пользуюсь инструментом Rounded rectangle, а рисую простой прямоугольник и применяю в нему эффект Effect > Stylize > Round Corners..., где вы в режиме превью можете задавать абсолютно любой радиус скругления, и, что самое важное, ваш прямоугольник, а точнее, его углы скругленные, будут трансформироваться пропорционально. Потом, при необходимости, эффект можно разобрать.
А в иллюстраторе есть небольшая хитрость: для прямоугольника со скругленными углами я никогда не пользуюсь инструментом Rounded rectangle, а рисую простой прямоугольник и применяю в нему эффект Effect > Stylize > Round Corners..., где вы в режиме превью можете задавать абсолютно любой радиус скругления, и, что самое важное, ваш прямоугольник, а точнее, его углы скругленные, будут трансформироваться пропорционально. Потом, при необходимости, эффект можно разобрать.
Класс, давно заметил, всё строится на мельчайших деталях, если не лениться и учитывать их, то гарантированно получишь хороший результат. Это относится не только к построению реалистичных интерфейсов. Я даже думаю, что все люди умеют рисовать, просто ленятся, т.к. рисунок — это просто куча мелочей соединённых воедино.
Отличная статья! Много интересных, и на мой взгляд, правильных заметок. Привычное глазу, всегда воспринимается лучше.
Мое мнение, интерфейс в первую очередь должен быть удобным и только потом красивым. Без должного проектирования и продумывания интерфейс не получится привлекательным.
Должное проектирование и продумывание + грамотное графическое исполнение = действительно хороший Интерфейс
Ну почему же, мне кажется, при должных навыках можно достаточно быстро набросать привлекательный на глаз интерфейс, и с ним даже можно будет работать. Проблемы появятся, если с этим интерфейсом прийдётся работать много и часто! Тут я с вами согласен, в первую очередь интерфейс должен быть удобен.
поэтому, чтобы все по феншую было, надо сначала прототип сделать в индизайне, у которого есть многостраничность, инструменты рисования и возможность использования интерактивных кнопок и ссылок внутри документа и на урлы. а потом уже шкурку для интерфейса рисовать. Часто, к сожалению, дизайнеры задумываются только о внешней части интерфейса, забывая, что удобство пользователя стоит во главе угла.
Может кому пригодится, создание реалистичных кнопок на CSS3.
Уже есть перевод на Хабре: habrahabr.ru/blogs/webdev/91372/
Очень здорово, спасибо, крайне пригодится для разработки интерфейсов, пусть не приложений, а курсов дист. обуч, но тут тоже полезно)))
Блин, всегда завидовал людям, которые умеют так рисовать!
Обожаю подобные статьи со вкусными картинками — очень вдохновляет! Спасибо.
*ушел рисовать*
Обожаю подобные статьи со вкусными картинками — очень вдохновляет! Спасибо.
*ушел рисовать*
Хорошая статья приятно иллюстрирована. Думаю, что тем, кто изучал «основы дизайна» в Вузе тоже будет полезно соотнести свои знания именно с веб-средой. В общем, спасибо автору. :)
Автор. Спасибо! Статья супер. В закладки! Жду ещё :)
Ну вот, всем все рассказал :)
Черт, а этот приём с шумом хорош!
прерватив свечение в четкие линии.
превратив, все-таки )
В разделе «Действуйте тоньше» первый абзац лучше не включать в список ) Судя по контексту.
Спасибо, очень полезная статья. Я хоть и программист, а рисовать приходится довольно часто. Теперь не страшно будет смотреть на свои работы:)
Очень полезный совет о конвертировании слоя в SmartObject с последующей его растеризацией для сохранения режима смешивания цвета при сохранении в PNG.
Не знал об этом, спасибо!
Не знал об этом, спасибо!
Спасибо за перевод, но не плохо бы было добавить ссылку на оригинал flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
Все достаточно верно написано, хотя ничего принципиально нового тут не исследовано, но новичкам будет полезно.
Я тоже плотно занимаюсь интерфейсами, сейчас осваиваю iPhone 4 с новым разрешением и iPad — там вообще все дико интересно. обычные айфоны, Blackberry и Android уже освоены — с ними проблем нету. Кнопочки-фусечки получаются нормуль…
кстати, для того, чтоб заслайсить кнопку, я не растеризую ее, а создаю новый слой поверх, выделяю нужные мне слои вместе с этим пустым (например, слой самой векторной кнопки, иконка и текст на ней), Cmd+E сливаю в один слой, все эффекты, тени и прочая — растеризуются корректно. далее Cmd+щелчок на имени этого слоя, чтобы выделить все его составляющие (включая едва видимые прозрачности от теней), Image > Crop, чтобы отсечь все ненужное. И далее Cmd-щелчок на иконке глаза в палитре слоев, чтобы сделать невидимыми все слои, кроме этого одного. И далее — File > Save for Web, PNG-24 = уже на автомате делаю все такие операции (надо будет экшен написать), и любую кнопку перегоняю в полупрозрачный PNG за считанные секунды.
Я тоже плотно занимаюсь интерфейсами, сейчас осваиваю 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
Ну и всё, отдельный документ, обрезанный до непрозрачных пикселей и со всеми слоями.
Если в экшн эти два действия записать, вообще моментом получается.
Возможно, мне изменяет память, но при сливании эффекты нижнего слоя применяются ко всему объединённому изображению. Поправьте, если не так.
Попробуйте выделить все слои -> Duplicate Layers… -> File — New, и в новом документе Image -> Trim -> Transparent pixels
Ну и всё, отдельный документ, обрезанный до непрозрачных пикселей и со всеми слоями.
Если в экшн эти два действия записать, вообще моментом получается.
Возможно, мне изменяет память, но при сливании эффекты нижнего слоя применяются ко всему объединённому изображению. Поправьте, если не так.
Чтобы сохранить объект в формате PNG или GIF, сперва конвертируйте слой в Smart Object, а затем растеризуйте его. Это сохранит установленные режимы смешивания цвета.
Можете объяснить/проиллюстрировать в чем тут смысл? Я всегда без зазрения совести использовал Save For Web и не замечал никаких искажений.
Омен?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Разработка привлекательных реалистичных пользовательских интерфейсов