Конечный результат
1. Создайте новый документ размерами 900 × 1050. Во-первых, распланируйте макет вашего сайта.
2. Следом выберите инструмент Rectangle tool и нарисуйте области. На каждом слое кликайте правой кнопкой мыши, переходите в Blending Options, выбирайте Gradient Overlay (Наложение градиента) и выставляйте эти цвета: (один момент, для рыжей полосы верхнее значение градиента выбирайте что-то типа #E28E23, автор, видимо, ошибся, написав цвет #4F4F4F, ну а для большого серого блока верхнее значение цвета #FDC540 никак не может соответствовать светлому фону, я выбрал цвет #EEEEEE - прим.PS-Studio.Info)
3. Далее выберите инструмент Elliptical Marquee Tool и нарисуйте большой овал, создайте новый слой и заполните форму белым цветом. Перейдите в Blending Options, сделайте внешнее свечение с настройками, как показано ниже. Затем перемещайте круг вверх до тех пор, пока не будет видно только свечение.
4. Скачайте шрифт и напишите название компании. В параметрах наложения выставьте эти параметры для слоя с шрифтом. Для слогана используйте шрифт и напишите его белым цветом. (здесь автор на скриншоте опять напутал, указав Outer Glow, следует выбирать Inner Glow - прим.PS-Studio.Info)
5. Выберите инструмент Rounded rectange и создайте форму поиска с помощью параметров наложения как указано ниже:
6. Находясь на слое с формой поиска, удерживая Ctrl, кликните по слою с формой, чтобы выделить её. Возьмите инструмент Rectangular Marquee Tool и, удерживая клавишу Alt, удалить часть формы, как показано ниже. Со всё ещё выделенной формой перейдите в Select> Modify> Contract и установите значение на 3 пикселя.
7. Создайте новый слой и залейте выделенную форму, зайдите в Blending Options и залейте её таким же градиентом, как меню, а также примените обводку в 1px белого цвета вокруг. Используя тот же шрифт, что и для название сайта, напишите SEARCH и установите непрозрачность для слоя с шрифтом 58%.
8. Возьмите любую рисованную стрелку , скопируйте / вставьте её на холст. Нажмите Ctrl + T, чтобы повернуть и минимизировать стрелку, указывающую на строку поиска.
9. На слое со стрелкой войдите в Blending Options и примените наложение цвета, цвет белый. С помощью того же шрифта, что и для слогана, напишите текст ниже и поверните его, используя предыдущий метод. Сделайте непрозрачность для обоих слоев на 25%.
10. Теперь увеличьте строку меню, активируйте инструмент Line tool, зажмите и удерживайте shift и нарисуйте прямую линию, проходящую по холсту. Дублируйте линию 2 раза и разместите три линии, как показано ниже, цвета указаны:
11. Используя шрифт заголовка, введите названия меню белым цветом. Зайдите в стили слоя и поставьте такие настройки:
12. Используя шрифт слогана, напишите немного пояснений для каждого пункта меню черным цветом. Сделайте непрозрачность 33%.
13. Теперь выберите команду View> Rulers (или Ctrl + R), и вытащите 2 направляющие, как показано ниже в центр содержимого.
14. Имея эти линии в качестве ориентира, возьмите инструмент Rounded rectangle tool и нарисуйте прямоугольник. Перейдите в Blending Options и поставьте настройки, как указано ниже:
15. С теми же настройками нарисуйте прямоугольник поменьше и поместите его под первым, как показано ниже. (параметры градиента для малого прямоугольника указаны на скриншоте выше в правом нижнем углу - прим.PS-Studio.Info) Правый клик на слое с большим прямоугольником и растрировать слой. Получим прямоугольное выделение, удалите нижнюю часть формы, как показано ниже.
16. Используя тот же метод создания 3-х линий, сделайте 3 линии по ширине меньшего прямоугольника. Используйте цвета, как указано ниже:
17. Дублируйте малый прямоугольник 2 раза и выставьте эти параметры в Blending Options:
18. Создайте форму, как ниже, используя инструмент Rectangle tool с параметрами как ниже, и поверните форму. Растрируйте слой и удалите края с помощью Rectangular Marquee Tool.
19. Напишите слово «Featured» шрифтом, как у названия сайта, поверните его, добавьте немного черно-белого градиента и падающую вниз тень в Blending Options.
20. Далее возьмите изображение из вашего портфолио, скопируйте и вставьте его на холст. Поверните его немного или сделать чуть меньше, чтобы оно вписывалось в прямоугольник.
21. Удерживая нажатой клавишу Ctrl, кликните по слою с большим прямоугольником, чтобы выделить его форму. Перейти в Select> Modify>Contract (тут автор скромно умолчал о нужном значении, я выбрал 10px - прим.PS-Studio.Info), перейдите к изображению, вырежьте и вставьте его на новый слой.
22. Разместите ваше изображение в баннере. Сделайте также 1px белую обводку вокруг изображения. Напишите заголовок на прямоугольнике шрифтом как у названия сайта.
23. Используя предыдущие методы, добавьте несколько линий. Разместите какой-то текст со шрифтом Arial и шрифтом названия заголовка сайта. Используя шрифт заголовка и светло-оранжевый цвет, поместите в кавычки отзывы.
24. В футере добавьте некоторую информацию с использованием предыдущих шрифтов.
25. Возьмите инструмент Rectangle tool и создайте несколько блоков для контактной формы с такими настройками:
26. Напишите в блоке информацию, используя курсивный шрифт Arial.
Конечный результат
Перевод и описание: PS-Studio.Info
1. Создайте новый документ размерами 900 × 1050. Во-первых, распланируйте макет вашего сайта.
2. Следом выберите инструмент Rectangle tool и нарисуйте области. На каждом слое кликайте правой кнопкой мыши, переходите в Blending Options, выбирайте Gradient Overlay (Наложение градиента) и выставляйте эти цвета: (один момент, для рыжей полосы верхнее значение градиента выбирайте что-то типа #E28E23, автор, видимо, ошибся, написав цвет #4F4F4F, ну а для большого серого блока верхнее значение цвета #FDC540 никак не может соответствовать светлому фону, я выбрал цвет #EEEEEE - прим.PS-Studio.Info)
3. Далее выберите инструмент Elliptical Marquee Tool и нарисуйте большой овал, создайте новый слой и заполните форму белым цветом. Перейдите в Blending Options, сделайте внешнее свечение с настройками, как показано ниже. Затем перемещайте круг вверх до тех пор, пока не будет видно только свечение.
4. Скачайте шрифт и напишите название компании. В параметрах наложения выставьте эти параметры для слоя с шрифтом. Для слогана используйте шрифт и напишите его белым цветом. (здесь автор на скриншоте опять напутал, указав Outer Glow, следует выбирать Inner Glow - прим.PS-Studio.Info)
5. Выберите инструмент Rounded rectange и создайте форму поиска с помощью параметров наложения как указано ниже:
6. Находясь на слое с формой поиска, удерживая Ctrl, кликните по слою с формой, чтобы выделить её. Возьмите инструмент Rectangular Marquee Tool и, удерживая клавишу Alt, удалить часть формы, как показано ниже. Со всё ещё выделенной формой перейдите в Select> Modify> Contract и установите значение на 3 пикселя.
7. Создайте новый слой и залейте выделенную форму, зайдите в Blending Options и залейте её таким же градиентом, как меню, а также примените обводку в 1px белого цвета вокруг. Используя тот же шрифт, что и для название сайта, напишите SEARCH и установите непрозрачность для слоя с шрифтом 58%.
8. Возьмите любую рисованную стрелку , скопируйте / вставьте её на холст. Нажмите Ctrl + T, чтобы повернуть и минимизировать стрелку, указывающую на строку поиска.
9. На слое со стрелкой войдите в Blending Options и примените наложение цвета, цвет белый. С помощью того же шрифта, что и для слогана, напишите текст ниже и поверните его, используя предыдущий метод. Сделайте непрозрачность для обоих слоев на 25%.
10. Теперь увеличьте строку меню, активируйте инструмент Line tool, зажмите и удерживайте shift и нарисуйте прямую линию, проходящую по холсту. Дублируйте линию 2 раза и разместите три линии, как показано ниже, цвета указаны:
11. Используя шрифт заголовка, введите названия меню белым цветом. Зайдите в стили слоя и поставьте такие настройки:
12. Используя шрифт слогана, напишите немного пояснений для каждого пункта меню черным цветом. Сделайте непрозрачность 33%.
13. Теперь выберите команду View> Rulers (или Ctrl + R), и вытащите 2 направляющие, как показано ниже в центр содержимого.
14. Имея эти линии в качестве ориентира, возьмите инструмент Rounded rectangle tool и нарисуйте прямоугольник. Перейдите в Blending Options и поставьте настройки, как указано ниже:
15. С теми же настройками нарисуйте прямоугольник поменьше и поместите его под первым, как показано ниже. (параметры градиента для малого прямоугольника указаны на скриншоте выше в правом нижнем углу - прим.PS-Studio.Info) Правый клик на слое с большим прямоугольником и растрировать слой. Получим прямоугольное выделение, удалите нижнюю часть формы, как показано ниже.
16. Используя тот же метод создания 3-х линий, сделайте 3 линии по ширине меньшего прямоугольника. Используйте цвета, как указано ниже:
17. Дублируйте малый прямоугольник 2 раза и выставьте эти параметры в Blending Options:
18. Создайте форму, как ниже, используя инструмент Rectangle tool с параметрами как ниже, и поверните форму. Растрируйте слой и удалите края с помощью Rectangular Marquee Tool.
19. Напишите слово «Featured» шрифтом, как у названия сайта, поверните его, добавьте немного черно-белого градиента и падающую вниз тень в Blending Options.
20. Далее возьмите изображение из вашего портфолио, скопируйте и вставьте его на холст. Поверните его немного или сделать чуть меньше, чтобы оно вписывалось в прямоугольник.
21. Удерживая нажатой клавишу Ctrl, кликните по слою с большим прямоугольником, чтобы выделить его форму. Перейти в Select> Modify>Contract (тут автор скромно умолчал о нужном значении, я выбрал 10px - прим.PS-Studio.Info), перейдите к изображению, вырежьте и вставьте его на новый слой.
22. Разместите ваше изображение в баннере. Сделайте также 1px белую обводку вокруг изображения. Напишите заголовок на прямоугольнике шрифтом как у названия сайта.
23. Используя предыдущие методы, добавьте несколько линий. Разместите какой-то текст со шрифтом Arial и шрифтом названия заголовка сайта. Используя шрифт заголовка и светло-оранжевый цвет, поместите в кавычки отзывы.
24. В футере добавьте некоторую информацию с использованием предыдущих шрифтов.
25. Возьмите инструмент Rectangle tool и создайте несколько блоков для контактной формы с такими настройками:
26. Напишите в блоке информацию, используя курсивный шрифт Arial.
Конечный результат
Перевод и описание: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
