html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

weebr | 3 часть урока по созданию дизайна интерфейса программы

Вот и подходит к концу наш урок по созданию интерфейса. Сегодня мы рассмотрим то, как сделать нижнюю часть нашей программы. Предлагаю переходить к делу :)

ПЕРВАЯ ЧАСТЬ

ВТОРАЯ ЧАСТЬ

1. Нижняя часть

Давайте перейдем к нижней части нашего дизайна программы.

Шаг 1

Выберите инструмент Rectangle Tool (U) и нарисуйте прямоугольник высотой 108px. Назовите слой Lower 1.

63

Измените цвет прямоугольника на #19222a. В настройках слоя задайте цвет тени #2b3642 и следующие настройки:

31

Продублируйте слой Lower 1 и назовите получившийся слой Lower 2. Расположите его под первым и продублируйте еще раз, создав слой Lower 3. Разместите его под Lower 2.

51

Шаг 2

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

Создайте маленький круг размером 50px x 50px в области Lower 1и назовите его Lower Circle 1.

64

Задайте следующие настройки для слоя:

32

Установите значение Fill = 0% для слоя Lower Circle 1.

33

Теперь сконвертируйте этот слой в Smart Object - Layer > Smart Object > Convert to Smart Object.

34

Используя прием из создания главного индикатора, сделаем маленький индикатор „активным”.

При помощи инструмента Polygonal Lasso Tool (L) выделите область слоя так, как показано на скриншоте.

36

Как только вы выделите область, нажмите Layer > Layer Mask > Hide Selection.

Из Бесплатного набора иконок найдите иконку облака со стрелкой вниз. Вставьте ее в центр слоя Lower Circle 1.

Очистите слой от всех эффектов нажав правой кнопкой мыши по нему и выбрав Clear Layer Style. Задайте слою цвет #db664a.

37

Шаг 3

Теперь давайте разместим текст. Для этого выберите Type Tool (T) и кликните приблизительно 30px справа от слоя Circle 1. Задайте тексту следущие параметры:

  • Шрифт: Arial Regular
  • Размер: 12pt (не px)
  • Цвет: #5b6773

Теперь напишите “LATEST DOWNLOADS”.

65

 

Шаг 4

Теперь выберите инструмент Type Tool(T) и кликите на правую направляющую. Теперь нужно изменить настройку вывода абзаца. Для этого кликните Window > Paragraph и установите значение так, как показано на скриншоте.

text-img

После этого напишите «55.1 of 81MB»с такими настройками:

  • Шрифт: Arial Bold
  • Размер: 20pt
  • Цвет: #a8afb6

Выберите слова «of» и «MB» и задайте им такие параметры:

  • Шрифт: Arial Regular
  • Размер: 12pt
  • Цвет: #5b6773.

После всех манипуляций у вас должно получиться так:

40

Шаг 5

В слое Lower 2 нам нужно разместить такую же информацию. Создайте маленький круг размером 50px x 50px и разместите его по левой направляющей. Назовите слой Lower Circle 2. В настройках слоя задайте ему следующие значения:

img

Задайте параметр Fill = 0% для слоя Lower Circle 2. Из Бесплатного набора иконок скопируйте облако со стрелкой вверх и разместите его в центре круга.

53

Кликнув правой кнопкой мыши на иконку, выберите Clear Layer Style. Задайте иконке цвет #3c4651.

Шаг 6

Давайте добавим текст к нашему индикатору. Для этого выберите Type Tool (T) и кликните примерно 30px от иконки. Напишите «LATEST UPLOADS» с такими параметрами:

  • Шрифт: Arial Regular
  • Размер: 12pt
  • Цвет: #5b6773

66

Шаг 7

Дальше просто продублируйте текст «55.1 of 89MB», перетяните его вниз и замените содержимое на «127.4GB».

41

Разместите горизонтальную линию 1px цвета #5b6773 как показано на скриншоте:

42

Шаг 8

По тому же самому принципу создадим последнюю часть нижней панели.

Создайте круг размером 50px x 50 px. Назовите его Lower Circle 3. И установите следующие значения:

img

Задайте параметр Fill = 0% для данного слоя.

Из бесплатного набора иконок вставьте облако и разместите его в центре круга.

54

Шаг 9

Справа от индикатора разместим текст «SPACED USED» со следующими параметрами:

  • Шрифт: Arial Regular
  • Размер: 12pt
  • Цвет: #5b6773

67

Шаг 10

Продублируйте «127.4GB» и разместите его возле текста. Измените содержимое на «46.9GB».

41

Также продублируйте горизонтальную линию.

55

Заключение

В этом уроке я показал вам техники, как при помощи возможностей фотошопа создавать прототипы дизайна интерфейсов для мобильных приложений, в нашем случае менеджера закачек для iPhone.

4344

Я надеюсь, что этот урок помог вам и вы научились много полезных вещей :)

Если у вас остались вопросы – задавайте их в комментариях.

ПЕРВАЯ ЧАСТЬ

ВТОРАЯ ЧАСТЬ

Источник: https://design.tutsplus.com/tutorials/create-a-mobile-downloader-app-interface-in-photoshop—psd-37219

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с weebr.ru

13

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • weebr.ru
          • веб-дизайн
          • домен weebr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции