Создание четкого интерфейса приложения 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 августа 2018

Pentax K-7 – цифровой зеркальный фотоаппарат для энтузиастов-любителей и профессиональных фотографов. Шасси из магниевого сплава, обновленная 14.6-мегапиксельная матрица, монитор 921000 точек, оптическая стабилизация на сдвиге матрицы, серийная съемка 5.2 кадра/сек, HD-видеосъемка (до 1536x1024@30), внутрикамерная обработка RAW-файлов и HDR-съемка.

16 августа 2018

Байонет: Nikon F Тип объектива: универсальный Фокусное расстояние: переменное

16 августа 2018

Компания Nikon умеет удивлять. То ли так заложено в её карме, то ли маркетинговому отделу Nikon удаётся иногда выключать у себя в голове калькулятор и поддаваться воле эмоций, но факт остаётся фактом: периодически этот производитель фототехники выпускает на рынок крайне удачные модели по скромной – действительно скромной для их функциональности – цене. Последний раз такое счастливое «недоразумение» произошло при появлении в профильных магазинах Nikon D7000 – отличной цифровой «зеркалки» полупрофессионального уровня. Она заменяла собой уже слегка устаревший Nikon D90, вставая на ступеньку выше дряхлеющего Nikon D5000. Поскольку Nikon D5000 также пророчили скорую замену, эта новинка тоже могла стать приятным сюрпризом…