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

Создаем минималистичный макет в Photoshop CS6 (часть 1)

В этом уроке мы научимся создавать макет блога в минималистичном стиле, используя новые технологии  Photoshop. В этом нам помогут новые возможности создания и сохранения стилей Character Styles и  Paragraph Styles. 

 

 

Давайте посмотрим, что мы будем создавать в этом уроке.

Для выполнения урока, вам понадобится следующие ресурсы:

Подготовка холста

Шаг 1

В этом уроке мы будем использовать фреймворк  960 GS . Нужно скачать шаблон с его главной страницы и найти внутри архива файл  "12 Column Grid".

Нажмите на иконку глаза возле слоя 12 Col Grid, чтобы скрыть его видимость — пока он нам не понадобится. 

Шаг 2

Пока размер нашего холста достаточно мал. Нажимаем Image> Canvas Size (или Ctrl +Alt + C ), чтобы сделать размер немного больше и устанавливаем опорную точку в центре.

Шаг 3

Нажмите Ctrl + R , чтобы показать линейку. Нажмите View> New Guide (Просмотр — Новая направляющая), чтобы создать новую направляющую.  Выберите Vertical и Position (Положение): 185 px , чтобы создать вертикальную направляющую, которая будет сдвинута на 185 px от левого края. 

Шаг 4

Создайте еще ​​вертикальные направляющие на расстоянии в 1501095 и 1130 пикселей .

Подготовка Color Theme

Шаг 5

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

Разместите цветовую схему внутри файла Photoshop. Размещая изображения непосредственно внутри нашего шаблона, получить доступ к нему будет намного быстрее и легче.  

Подготовка фона

Шаг 6

Выберите слой Background и нажмите на значок замка, чтобы разблокировать этот слой. Дважды щелкаем по изображению, чтобы изменить цвет фона.

С помощью пипетки выберите второй цвет нашей цветовой схемы (# 948371).

Шаг 7

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

Шаг 8

Выберите созданную форму и перейдите в панель Option Bar. откройте Fill Color и нажмите иконку выбора цвета. Когда появится диалоговое окно Color Picker, выберите первый цвет. В поле Stroke выберите None

Шаг 9

Создайте новый слой и с помощью Rectangular Marquee Tool выделите верхний прямоугольник. Активируйте инструмент градиентной заливки и залейте выделенную область радиальным градиентом от белого к черному.

Измените его режим Blend mode на Screen и уменьшите непрозрачность Opacity до 37% .

Шаг 10

Создайте новый слой и назовите его «тень».

Нарисуйте прямоугольное выделение в нижней части второго фона, как показано на рисунке ниже. Нажмите Edit: Fill. Установить  Use  - Black. Нажмите OK , чтобы заполнить выделение черным.

Шаг 11

Размойте его с помощью  Gaussian Blur. Нажмите Filter> Blur> Gaussian Blur .

Шаг 12

Удерживая нажатой Alt , поместите курсор между тенью и слоем со вторым фоном. Не отпуская Al, нажмите, чтобы преобразовать слой в обтравочную маску .Преобразовав его в Clipping Mask, тени сейчас размещены внутри верхнего фона.

Шаг 13

Измените прозрачность тени  Opacity до 50%.  Ниже вы можете увидеть результат при 100% увеличении.

Шаг 14

Пришло время, чтобы разместить все слои в одну группу. Чтобы сделать это, выберите все слои и нажмите Ctrl + G .

Header

Шаг 15

Нарисуйте прямоугольник в верхней части холста, как показано на рисунке.

Шаг 16

В панели Option Bar , установите  цвет Stroke - # af9f8e .

Шаг 17

Для заливки выберите следующие цвета линейного градиента — от  # d0c4b9 к #a89c91.

Название сайта

Шаг 18

В левой стороне шаблона добавляем название нашего сайта. Обратите внимание, чтобы размещение соответствовало рисунку ниже. Дважды щелкните текст и добавьте Drop Shadow . В уроке был использован шрифт  Sansation .

Меню

Шаг 19

Используя шрифт Sansation 14 пт, создаем меню. Опять обратите внимание на место размещения.

Шаг 20

Для активного кнопки меню установите тип шрифта — bold.

Шаг 21

Активируйте инструмент создания многоугольника Polygon tool и установите количество сторон - 3 . Нарисуйте  треугольник с цветом заливки Fill: # 3d3123 и значение обводки StrokeNoneДобавляем к слою тень - Layer Style > Drop Shadow .

Шаг 22

Подчеркнем активную кнопку меню. Активируйте инструмент Линия и установить ее размер  weight - 5 пикселей . Выберите цвет # f76b6a и линия должна быть без обводки.

Разместите линию под активным меню и добавьте расстояния между линией и прямоугольной формой в 1 пиксель. 

Использование стилей символа

Шаг 23

Давайте сохраним настройки стилей для текста. Эта что-то похожее на упрощенную версию стилей символов в InDesign. Чтобы сохраним их, нужно активировать текст, а затем нажать  на иконке "New Character Style".

Дважды щелкните на новый стиль и выберете следующие настройки.

Шаг 24

Выберите следующий пункт меню, а затем нажмите кнопку Character Style для применения настроек стиля. Если вы нашли знак плюс возле стилей, это означает, что они имеют разные настройки. 

Шаг 25

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

Шаг 26

Так в чем же преимущество использования стилей символов? Они помогут нам централизовать настройки текста. Мы можем просто изменить стиль символа, чтобы отредактировать любой текст. Например, если изменить стиль Top Menu – Normal на Corbel, все элементы меню автоматически изменятся на Corbel.

Шаг 27

Создайте новый слой и поместите его под элементами меню. Нажмите  Ctrl и кликните  по меню, чтобы сделать  следующее выделение. Залейте его черным .

Шаг 28

Удалите выделение, нажав Ctrl + D. Размойте черную область, применив фильтр  Filter> Blur> Gaussian Blur .

Слайдер

Шаг 29

Нарисуйте прямоугольную форму шириной в столбцов (см. ниже).

Для цвета заливки выберите # dfd1c2 . Цвет Stroke —  # c8baac, размер 10ptНажмите на маленькую стрелку рядом с линией, чтобы убедиться, что выбрана  опция Align Insid.  

Шаг 30

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

Шаг 31

Нарисуйте еще ​​одну прямоугольную форму возле слайдер таким же цветом. Убедитесь в том, что форма будет привязана к крайней направляющей. Добавляем стили Layer Style> Pattern Overlay, используя текстуру пикселя картины. Уменьшаем непрозрачность, чтобы сделать ее мягче. 

Шаг 32

Выше созданной формы рисуем новую прямоугольную форму с заливкой Fill: # b3aca5 без обводки. НажмитеCtrl + T , а затем поверните ее на 45 °. Преобразуйте форму слоя в Clipping Mask .

Шаг 33

Дублируйте форму и измените ее размер. Измените ее заливку на более темный цвет. Преобразуйте слой с формой в Clipping Mask.

Шаг 34

Повторите  шаги, чтобы создать еще одну стрелку с другой стороны. 

Шаг 35

Нажмите Ctrl и щелкните по рамке, чтобы создать выделение. Создайте новый слой и преобразуйте его в Clipping Mask. Залейте выделение черным.

Шаг 36

Отмените выделение ( Ctrl + D ) немного размойте область с помощью Gaussian Blur.

При необходимости, можно уменьшить непрозрачность теней.

Шаг 37

В углу слайлера нарисуйте прямоугольник с закругленными углами. Установите Fill   # c8baac .

Шаг 38

Внутри фигуры нарисуйте круг. Значение обводки Stroke: цвет черныйразмер —  1 пт, значение заливки нужно удалить. 

Шаг 39

Используя инструмент Path Selection, создайте круглое выделение. Удерживая Shift + Alt, перетащите выделенную область, чтобы дублировать ее.  

Повторите это, чтобы создать четыре круга. 

Шаг 40

Выберите один из кругов.  Нажмите Ctrl + Shift + J , чтобы разместить его на новом слое.

Шаг 41

В панели  Option Bar   удалите обводку и измените  заливку на радиальный градиент от # e38989 к #bb5c5c. Добавим стили Layer Style> Outer Glow и Drop Shadow .

 

 

 

Автор - Mohammad Jeprie  

Перевод — Дежурка

 

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

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

1

      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.

          • dejurka-magazine
          • домен dejurka.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

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