Создание четкого интерфейса приложения Twitter. Часть 2

Шаг 41
Прочертите вертикальную линию шириной 1 пиксель, цвета #aab6c2 между первой и второй иконкой. Применением Тени, создайте эффект ее вдавленности. Создайте слой-маску и прокрасьте ее верхнюю и нижнюю часть, смешивая ее с фоном.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 42
Дублируя линию смещением ее при удерживаемой клавише Alt, разделите между собой остальные иконки.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 43 – Окно поиска

Активируйте Прямоугольник со скругленными углами с очень большим радиусом скругления. Нарисуйте с его помощью окошко поиска, вслед за последней иконкой. Примените стили слоя Тень, Внутренняя тень, Внешнее свечение и Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2


Шаг 44
Скомбинировав круг и скругленный прямоугольник цвета #8696a8, создайте иконку лупы внутри окна поиска.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 45 – Окно с высказываниями
Нарисуйте прямоугольник цвета #e2e4e7. Примените стили слоя Внутреннее свечение и Наложение градиента.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 46
Нарисуйте 1-пиксельную линию цвета #a8b1ba под последним прямоугольником и придайте ей эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 47
Нарисуйте белый скругленный прямоугольник с радиусом скругления 3 пикселя. Примените стили слоя Наложение градиента и Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 48
Внутри этого прямоугольника нарисуйте еще один меньшего размера, цвета #202020. Примените Тень и Обводку.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2




Шаг 49
Поверх последней фигуры поместите изображение профиля. Нажатием Ctrl + Alt + G конвертируйте его в обтравочную маску, как бы погружая изображение внутрь контейнера из прямоугольников.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 50
Инструментом Горизонтальный текст (Type tool) наберите имя пользователя, высказывание, время и дату. Не забудьте выделить цветом ссылку на учетную запись автора.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 51
В правом нижнем углу окна с высказываниями нарисуйте круг цвета #aab7c3. Затем, при помощи инструмента Многоугольник (Polygon) нарисуйте звезду и установите ее режим “Вычитание из области фигуры” (Subtract). Мы используем ее для кнопки “Избранное”.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 52

Этим же способом создаем кнопку “Ответить”.

Создание четкого интерфейса приложения Twitter. Часть 2


Шаг 53
Поместите слои, относящиеся к одному высказыванию в группу, выделив их, и нажав Ctrl + G. Затем удерживая Alt и смещая группу, создайте ее дубликат. Измените изображение учетной записи и прилагающийся текст, чтобы сымитировать другие высказывания.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 54
Продублируйте базовую фигуру приложения и измените ее цвет на черный. В ее верхней части нарисуйте прямоугольник и установите режим “Область пересечение фигур” (Intersect). Примените стили слоя Внутреннее свечение, Наложение градиента, Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 55
Добавьте информацию API на нижней панели. При помощи стиля слоя Тень придайте ей эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 56
Нарисуйте 12 скругленных прямоугольников различного размера. Вручную распределите их и поверните по принципу делений на циферблате. Придайте им эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 57 – Полоса прокрутки
Нарисуйте длинный белый скругленный прямоугольник с радиусом скругления 1 пикс. Расположите его вдоль правой направляющей и примените Обводку.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2


Шаг 58
Теперь нарисуйте скругленный прямоугольник с таким же радиусом скругления, только покороче. Задайте ему цвет #8b9eb3, примените стили слоя Внутреннее свечение и Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2


Шаг 59 – Располагаем дополнительные направляющие
С основой интерфейса мы закончили. Далее, создаем окно нового высказывания и интерфейс загрузки фотографий. Для начала расставляем не холсте дополнительные направляющие. Для определения нужных позиций, смотрите пример ниже.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 60 – Окно ввода нового высказывания
Начнем с рисования скругленного прямоугольника с радиусом скругления 5 пикселей и цвета #e2e4e7.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 61
Теперь создайте прямоугольный контур в левой части окна. Нажмите Ctrl + T и поверните его на 45 градусов. Задайте режим “Добавить к области фигуры” (Add to Shape). Примените стили слоя Тень и Обводка.


Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2




Шаг 62
Продублируйте фигуру-основу и измените ее цвет на черный. В верхней ее части нарисуйте прямоугольник и установите режим “Пересечение с областью фигуры” (Intersect). Примените стили слоя Внутреннее свечение, Наложение градиента и Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2




Шаг 63
В правом верхнем углу панели заголовка нарисуйте маленький круг. Задайте цвет #707070. По центру круга разместите два перекрещивающихся скругленных прямоугольника и задайте режим “Вычитание из области фигуры” (Subtract). Поверните оба прямоугольника на 45 градусов. Эта кнопка “Закрыть” в нормальном состоянии.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 64
Продублируйте кнопку и измените цвет дубликата на #a4a4a4. Это будет кнопка в активном состоянии.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 65
Продублируйте основную фигуру и измените ее цвет на черный. В нижней ее части нарисуйте прямоугольный контур и задайте режим “Пересечение с областью фигуры” (Intersect). Примените стили слоя Внутреннее свечение, Наложение градиента, Обводка.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 66
Теперь нарисуйте голубой скругленный прямоугольник с радиусом скругления 3 пикселя в правом нижнем углу интерфейса. Примените Наложение градиента и Обводку.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 67
Нанесите на кнопку надпись “Отправить”. Применением темной 1-пиксельной тени, придайте ей эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 68
Продублируйте кнопку вместе с ее текстом. Для активного состояния мы создадим новую. Все что нам для этого нужно – просто увеличить непрозрачность (opacity) ее стиля слоя Наложение градиента до 40%.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 69
Я советую вам разместить каждую кнопку в отдельной группе. Это улучшит структуру слоев.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 70
Нанесите символ “|”, который будет обозначать курсор. В левом нижнем углу индикатор оставшегося количества символов.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 71 – Окно загрузки фотографий
Повторите предыдущие шаги для создания интерфейс загрузки изображений.

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 72
По центру окна нарисуйте скругленный прямоугольник с радиусом скругления 3 пикселя, цвета #d9dde1. Затем, внутри этого прямоугольника нарисуйте еще один прямоугольный контур. Установите режим наложения “Вычитание из области фигуры” (Subtract).

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 73
Нарисуйте несколько горизонтальных прямоугольников и задайте режим “Вычитание из области фигуры” (Subtract). Выделите все эти прямоугольники и кликните по пиктограммам “Распределение центров по вертикали” (Distribute Vertical Center) и “Распределение центров по горизонтали” (Distribute Horizontal Center).

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 74
Проделайте то же самое, нанося вертикальные прямоугольники. Задайте режим “Вычитание из области фигуры” (Subtract).

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 75
Придайте вдавленный эффект.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 76
По центру окна нарисуйте скругленный прямоугольник радиусом скругления 3 пикселя и цвета #cdd2d8. Внутри него начертите еще один прямоугольник и задайте режим “Вычитание из области фигуры” (Subtract).

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 77
При помощи Пера нарисуйте круглый контур и многоугольник. Задайте для них обоих режим “Добавить к области фигуры” (Add to Path).

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 78
Примените стиль слоя Тень.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Шаг 79
Напечатайте короткую инструкцию и придайте надписи эффект вдавленности.

Создание четкого интерфейса приложения Twitter. Часть 2

Создание четкого интерфейса приложения Twitter. Часть 2



Законченная композиция

Создание четкого интерфейса приложения Twitter. Часть 2

Ключевые теги: уроки примеры photoshop онлайн бесплатно


Ретушируем фото

Вас может также заинтересовать:

16 декабря 2017

Tamron SP AF 90mm F/2.8 Di Macro 1:1 - новая версия 90мм макро-объектива для цифровых и пленочных фотокамер, иногда называемого макро-портретником. Объектив совместим с пленочными камерами, но его конструкция оптимизирована для использования с цифровыми зеркальными фотокамерами.

16 декабря 2017

Байонет: micro 4/3 Тип объектива: стандартный Фокусное расстояние: постоянное

16 декабря 2017

Дата анонса: 2010-01-19 Эффективное разрешение, МП: 12 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 245