Advanced Photoshop Techniques for UI (Продвинутые техники в фотошопе)

Создание тени различными способами, отделение эффектов в слои, заготовки текстур, стилей, векторных объектов и многое другое.

Advanced Photoshop Techniques for UI from Edward Sanchez on Vimeo.

Quick Photoshop Tips for UI (Советы по UI в фотошопе)

Продолжение первого видео с новыми советами и техниками

Quick Photoshop Tips for UI from Edward Sanchez on Vimeo.

Photoshop + Keyboard Macros (Фотошоп и использование макросов на клавиатуре)

какие макросы можно создать для удобного использования фотошопа

Photoshop + Keyboard Macros from Edward Sanchez on Vimeo.

Photoshop Preferences(Настройки фотошопа)

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

Photoshop Preferences from Edward Sanchez on Vimeo.

Понравилась статья

Каждая платформа уникальна и не нужно создавать iPhone приложение под BlackBetty, каждая система имеет свой гайдлайн, которому нужно следовать.

• iPhone Human Interface Guidelines – PDF version
• iPad Human Interface Guidelines – PDF version
• UI Guidelines for BlackBerry 6.0 Smartphones – PDF version
• UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version
• Android User Interface Guidelines
• BlackBerry Browser Content Design Guidelines (PDF)
• Motorola’s Best Practices for Android UI
• Nokia Design & User Experience Library
• Symbian3 UI Style Guidelines (PDF)
• Forum Nokia Design Portal (PDF)
• Symbian UI Wiki
• Nokia Series 40 UI Style Guide
• Bada Application UI Guide
• Sony Ericsson UI Rulebook
• UI Guidelines for Windows Mobile
• Windows Touch UI Guideline
• UI Design & Interaction Guide for Windows Phone 7 (PDF)
• webOS UI Guidelines
• Hildon UI Guidelines for Nokia Maemo
• MeeGo UI Design Guidelines

Вольный перевод: ui-guidelines-mobile-tablet-design

Понравилась статья

Фреймворк поделен на три основные части:

1. GUI library – Сотни векторных элементов для дизайна интерфейсов.
2. Minimal UI icons set – 260 векторных иконок на все случаи жизни, выполненные в едином стиле.
3. Styles library – 200 стилей для применения в иллюстраторе.

Инструмент для проектирования UI для веб дизайнеров.

• Позволяет быстро создавать wireframes в формате AI.
• Используя фреймворк, проектировать удобные интерфейсы стандартными элементами управления очень просто. Нужно просто перетащить или выбрать из панели примитивов нужный элемент и его можно использовать в проекте. Bсе браузерные контролы, модальные окна,  кнопки, переключатели, и множество других стандартных элементов современного интернет приложения вы там найдете без труда. Этот факт делает фреймворк очень привлекательным.
• Если необходимо модернизировать векторные объекты, это очень легко делать, просто меняя форму векторного объекта, цвет, размер,  а так же создать новые контролы из уже готовых не составит особого труда.

Фреймворк будет очень полезен людям, которые уже используют illustrator.

Скачать с сайта автора.

Понравилась статья

Adobe:“Smart Objects это слои, которые содержат векторную или растровую графику так же как .psd или .ai файлы. Смарт объект всегда помнит начальные характеристики изображения, что позволяет не деструктивно редактировать слой.”

Минди Вагнер: “Smart Objects это магические контейнеры. Они могут содержать изображения, векторную графику или целый набор слоев. Вы можете сделать множество копий смарт объекта в своем документе, потом обновить Smart Object один раз для изменения всех копий в один момент. Вы можете применять фильтры на свой Smart Object и это не уничтожит первоначальный вид, в любой момент вы сможете убрать фильтры. При использовании трансформации (масштабирование, скручивание, вращение и т.д.) вы сохраните первоначальное изображение без потери качества.»

Как они работают

Существует несколько возможных вариантов создания смарт объекта:

• Вектор. Вы можете нажать “File” > “Place” для внедрения векторной графики сделанной в иллюстраторе в ваш фотошоп файл. Альтернативный способ – скопировать вектор в иллюстраторе и вставить в фотошоп в диалоговом меню выбрать “Smart Object”. Когда вы это проделаете,  фотошоп создаст прямую связь с оригинальной графикой, и если вы захотите что то изменить, векторный смарт объект откроется в иллюстраторе.
• Используя слой: иногда одиночный слой может быть хорошим кандидатом в смарт объекты. Пример: у вас есть растровая картинка, у которой вы хотите изменить размер, но вы не уверены, какой точно размер вам подойдет. Обычно при изменении размера картинка стремительно теряет качество и становится непригодной для использования, но если конвертируете её в смарт объект,  вы не столкнетесь с этой проблемой. Конвертировать очень просто: правой кнопкой мышки кликните по слою и выберете “convert to smart object”.
• Множество слоев: Вы можете обернуть выбранные группы и слои в смарт объект, создав объект,  который можно будет использовать много раз, так же уменьшить количество слоев, что облегчит навигацию по палитре слоев. Как это сделать? Очень просто, снова правый клик и “convert to smart object”.

Создав смарт объект, вы найдете его в палитре слоев. Выглядит он так:

Для редактирования ранее созданного смарт объекта, сделайте двойной клик на слое. Откроется новое окно для редактирования. После редактирования не забудьте нажать File > Save, иначе ваши изменения не будут применены. Как только вы нажмете сохранить, все копии этого смарт объекта в вашем файле обновятся.

Как использую их я

Если я работаю над макетом, где есть повторяющиеся элементы, я использую смарт объект. Например: я делаю макет для главной страницы, где надо показать 3 наиболее читаемые статьи из блога, они будут иметь один и тот же размер и длину. В таком случае, я решу просто копировать один вариант, чтобы посмотреть, как это будет смотреться в дизайне. Это превосходный случай для использования смарт объекта.

Я сделаю один дизайн для первой статьи, где будет заголовок, иконка даты, текст, ссылка и разделитель, что-то похожее на это:

Я просто выделю все нужные слои в палитре и далее правая кнопка мышки > “convert to smart object”

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

Теперь я могу сделать две копии первоначального смарт объекта и разместить их на макете:

Теперь, если я захочу сделать заголовок жирным, я сделаю изменение только один раз, а оно применится в трех местах сразу. Так же я могу менять градиенты и добавлять новые элементы в смарт объект, и они будут появляться сразу во всех копиях.

Так же я применяю смарт объект на слои, которые я собираюсь не деструктивно редактировать. Которые буду поворачивать, масштабировать, скручивать используя все возможные фильтры без потери свойств оригинального изображения. Так же все фильтры останутся редактируемыми и их можно изменять и удалять. Это очень полезно, когда вы работаете над дизайном фото галереи и делаете набор привью для неё.

Продвинутое вторичное использование.

Для одной простой страницы это не так полезно. Но когда вы начинаете делать дизайн для большого сайта с десятками экранов, использовать смарт объекты просто необходимо.

Когда Минди работала над проектом X-Fit, она подготовила 20 макетов и каждый макет использовал множество повторяющихся элементов. Чтобы упростить и ускорить процесс, Минди создала PSD тулкит с различными элементами. Смарт Объекты были ключевым элементом тулкита. Для каждого вторично использованного элемента был создан свой смарт объект, это дало возможно, копировать нужный объект в новый макет очень быстро.

В одном .psd файле было примерно по 5 макетов страниц, что давало наибольшую гибкость в использовании смарт объектов. Смарт объект становиться практически как класс CSS, если вы правильно его используете.

Вы можете экспортировать в отдельный .psd все содержимое смарт объекта. К сожалению, вы не можете использовать этот файл как включенный файл в .psd документ. Но вы можете ускорить многократно свою работу. Например, клиент захотел сделать иконку календаря красной вместо оранжевой. Представьте, у вас 10 файлов с макетами .psd обычно вам пришлось бы открыть каждый из десяти и в ручную сделать изменения. Но если вы использовали смарт объекты, вы можете сделать изменения один раз и экспортировать в отдельный файл .psd. Далее нужно в макет, выделить ваш смарт объект с датой,  и нажать правой кнопкой в палитре слоев > “replace content” указывайте путь к вашему внешнему обновленному файлу и… Вуаля! Иконки с датой в этом файле обновились.

Советы для повышения эффективности Смарт Нинзи:

• Если что-то будет использовано вторично где угодно, в этом документе или в другом, используйте смарт объекты.
• Не бойтесь вкладывать их друг в друга.
• Используйте их для кнопок, иконок, бэкграунда, разделителей и так далее.
• Настройте специальные «горячие кнопки» для быстрого доступа Select Edit > Keyboard Shortcuts > Layer > Smart Objects > Group Into New Smart Object > ваша комбинация.

Минусы смарт объектов

• Увеличивается размер файла и фотошоп начинает больше тормозить.
• Некоторые люди не любят работать с макетом, который состоит из нескольких файлов.
• Вы не можете использовать маски на смарт объекте. Х-м-м, просто поместите смарт объект в папку и примените маску к ней.
• Некоторые фильтры работают некорректно со смарт объектами.

Вольный перевод: Smart ways to use adobe photoshops smart objects

Понравилась статья

Twg.ca

Glyphish

Наверно самый известный набор иконок для iPad и iPhone отлично подходят для тулбаров и таб баров.

Glyphish.com

App Bit

App-bits.com

Free iPhone Toolbar Icons 2

Pixelpressicons.com

iconsweets

Iconsweets

Gesturecons

Набор иконок для демонстрации мультитач возможностей приложения. Отлично подойдет для презентаций проекта и для создания wireframe  схем и другой документации.

Gesturecons

Понравилась статья

35mm from Pascal Monaco on Vimeo.

»35mm« это короткий фильм о фильмах.  Создатели собрали 35 любимых фильмов и постарались упростить их на сколько возможно. Вышло 120 секунд путешествия по истории расказаной авторами. У меня не получилось узнать все фильмы.. Возможно получиться у вас.

Concept / Layout: Sarah Biermann, Torsten Strer, Felix Meyer, Pascal Monaco
Animation: Felix Meyer, Pascal Monaco
Sound: Torsten Strer

Понравилась статья

Начать поможет отрисованный GUI для iPad, практически все элементы управления в psd файле. Все элементы векторные легко редактируются. Очень помогает разобраться с размерами элементов управления и шрифтов в этом чудо устройстве. Устройство специфическое так, что стоит посмотреть.

GUI для Ipad в PSD спасибо Teehan+Lax

Векторный набор от iconshock в .AI

Огромная часть UI для iPada в векторе. Очень качественно все сделанно тоже легко редактировать. Все в файле для иллюстратора.

GUI для iPad в ai спасибо Iconshock

Ipad cтенсилы для OmniGraffle

Очень быстро позволяет «накидать» приложение без дизайна для демонстрации проекта заказчику, команде и дизайнеру. Кстате, тоже базируеться на разработке ребят из Teehan+Lax.

Ipad stencil для OmniGraffle Спасибо iA

Сам  iPad в psd

Редактируемый iPad как и все элементы в файле

Редактируемый iPad

Понравилась статья

• Rolling Stone
• Texas Monthly
• TV Guide
• Boston Globe
• Time
• theNew York Daily News

Сайт Pablo

Понравилась статья