В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)
The Art Institute Photoshop Template
В этом уроке я расскажу, как сделать вот такой шаблон сайта.
Рисуем1. Для начала создаем новый документ. Я выбрал размер 1404x1300 px.
2. Используя инструмент Rectangle Tool (U) создайте прямоугольник и залейте его цветом #161f24. Не заполняйте этим цветом весь документ, верхнюю часть оставьте.
3. Снова выбираем Rectangle Tool (U), создаем выделение в той области, которую оставили пустой во втором пункте, и закрашиваем его цветом #161e23, различие между двумя этими цветами небольшое, но все же заметное.
4. Снова создаем выделение при помощи Rectangle Tool (U), на этот раз внизу документа, закрашиваем цветом #0f1619, в этой области будет расположен текст об авторских правах.
5. Сначала будем работать с нижней частью. Чтобы было лучше видно, увеличиваем масштаб изображения. Затем выделяем нижнюю область и создаем новый слой. Выбираем инструмент Gradient Tool (G) и создаем линейный градиент от черного к прозрачному. На новом слое создаем объекту тень.
6. Затем, используя инструмент Line Tool (U) вдоль края нижней части рисуем белую линию шириной 1 px. Понижаем Opacity до 10%.
7. Я использую шрифт Helvetica Neue (Light) для написания текста, его Opacity понижаем до 50%.
8. Теперь займемся верхней частью. Создаем новый слой и загружаем выделение верхней части. Как и пятом пункте используем Gradient Tool (G) и создаем тень.
9. Сделайте выделение, как на изображении ниже. Снова с помощью Gradient Tool (G) создаем градиент, только на этот раз от белого к прозрачному и понижаем Opacity до 30%.
10. С помощью Eraser Tool (E) стираем края градиента, сделанного в предыдущем пункте.
11. Выбираем Line Tool (U) и цветом #de0000 рисуем линию толщиной 1 px, она должна проходить точно по краю верхней области.
12. С линией нужно сделать то же, что и с градиентом в десятом пункте, но для начала ее необходимо растрировать.
13. Затем создадим на линии небольшие световые вспышки. Для этого создаем новый слой и с помощью Elliptical Marquee Tool (M) создаем выделение как на изображении ниже.
14. Заполняем овал таким же цветом, который использовали для линии и затем идем в меню Filter - Blur - Gaussian Blur и устанавливаем радиус размытия равным 4.1.
15. С помощью Ctrl + T немного трансформируем полученную фигуру.
16. После этого меняем Blending Options на Lighten и дублируем этот слой еще три раза. Изменяем прозрачность и расположение копий, чтобы сделать их разными.
17. Пришло время делать кнопки. Создаем новую группу и называем ее buttons. Чтобы сделать кнопки будем использовать Rounded Rectangle Tool (U) с радиусом 5 px, цвет #bb0101.
Рисуем фигуру, как на изображении ниже, для удобства увеличиваем масштаб.
18. Используя тот же инструмент необходимо отсечь часть формы, удерживая клавишу Alt.
19. Устанавливаем следующие параметры Blending Options.
20. Затем добавляем текст. Я использовал шрифт Arial.
21. Теперь придадим кнопкам большей стилистики 2.0. Создаем новый слой выше слоя с текстом Home и загрузим выделение.
22. Используя Gradient Tool (G) создайте градиент от белого к прозрачному.
23. Не снимая выделения идем в меню Filter - Blur - Gaussian Blur и устанавливаем радиус размытия равным 3.0.
24. Немного преобразуем полученный блеск и понизим Opacity до 40%.
25. Используя Elliptical Marquee Tool (M) создаем выделение.
26. Создаем новый слой и заливаем выделение белым цветом.
27. Выделяем саму кнопку и нажимаем Ctrl + Shift + I, чтобы удалить ненужные края.
28. Затем понижаем Opacity до 10%.
29. Выбираем инструмент Line Tool (U) шириной 2 px и рисуем линию, как на изображении ниже.
30. Затем с помощью Eraser Tool (E) немного стираем левый и правый края. Для этого слой нужно растрировать, просто кликнем Eraser Tool (E) в любом месте изображения.
31. Идем в Blending Options и устанавливаем следующие параметры.
32. Далее я увеличил количество кнопок до пяти и изменил цвет некоторых: текста на черный, а фона на #69747b.
33. Теперь дублируем все кнопки для того, чтобы сделать отражение (дублируем только кнопки, без свечения, возданного в двадцать девятом пункте). Трансформируем их.
34. У серых дублированных кнопок удаляем текст.
35. Далее стираем часть кнопок, чтобы сделать их более похожими на отражение и понижаем Opacity до 60 %.
36. Создаем выделение с помощью Rectangular Marquee Tool (M) и создаем новый слой выше слоя с отражением, который сделали только что. Выбираем Gradient Tool - Radial Gradient, красный цвет (тот же, что использовался для линии), создаем градиент и меняем режим смешивания на Soft Light.
37. Теперь просто дублируем слой, который создали в предыдущем шаге и передвигаем его.
38. Повторяем последние два шага ко всем кнопкам, только теперь используем белый цвет.
39. Теперь, когда мы закончили с кнопками, приступим к созданию основного шаблона. Выбираем инструмент Rounded Rectangle Tool (U), радиус 5px, и создаем выделение, которое закрашиваем цветом #d40101.
40. Удерживая Ctrl при помощи Elliptical Marquee Tool отсекаем часть изображения.
41. Не снимая выделения создаем новый слой и создаем на нем градиент от черного к прозрачному, Opacity понижаем до 33%.
42. Повторяем предыдущий шаг, только на этот раз в другом месте.
43. Создаем выделение и добавляем с помощью Gradient Tool (G) немного черного.
44. Добавляем некоторый текст. Я использовал шрифт Helvetica Neue, тот же что и для кнопок.
45. Далее используя Rounded Rectangle Tool (U), цвет #161f24, создаем форму, как на изображении ниже. Пишем там текст.
46. Добавляем больше содержимого в наш шаблон. Я сделал простой логотип, используя шрифт Harrington, а так же два блока для ввода данных. Чтобы все элементы были выровнены относительно друг друга, я использовал координатную сетку (Ctrl + R), скрыть или показать линии можно с помощью Ctrl + H.
Я надеюсь, что показал вам, как несколькими несложными действиями сделать простой, приятный дизайн сайта. Продолжайте эксперименты и совмещайте знания, полученные в этом уроке, со своими собственными!
Автор: Tutzor
Перевод: Alta Vista
Источник
В этом уроке я расскажу, как сделать вот такой шаблон сайта.
Рисуем1. Для начала создаем новый документ. Я выбрал размер 1404x1300 px.
2. Используя инструмент Rectangle Tool (U) создайте прямоугольник и залейте его цветом #161f24. Не заполняйте этим цветом весь документ, верхнюю часть оставьте.
3. Снова выбираем Rectangle Tool (U), создаем выделение в той области, которую оставили пустой во втором пункте, и закрашиваем его цветом #161e23, различие между двумя этими цветами небольшое, но все же заметное.
4. Снова создаем выделение при помощи Rectangle Tool (U), на этот раз внизу документа, закрашиваем цветом #0f1619, в этой области будет расположен текст об авторских правах.
5. Сначала будем работать с нижней частью. Чтобы было лучше видно, увеличиваем масштаб изображения. Затем выделяем нижнюю область и создаем новый слой. Выбираем инструмент Gradient Tool (G) и создаем линейный градиент от черного к прозрачному. На новом слое создаем объекту тень.
6. Затем, используя инструмент Line Tool (U) вдоль края нижней части рисуем белую линию шириной 1 px. Понижаем Opacity до 10%.
7. Я использую шрифт Helvetica Neue (Light) для написания текста, его Opacity понижаем до 50%.
8. Теперь займемся верхней частью. Создаем новый слой и загружаем выделение верхней части. Как и пятом пункте используем Gradient Tool (G) и создаем тень.
9. Сделайте выделение, как на изображении ниже. Снова с помощью Gradient Tool (G) создаем градиент, только на этот раз от белого к прозрачному и понижаем Opacity до 30%.
10. С помощью Eraser Tool (E) стираем края градиента, сделанного в предыдущем пункте.
11. Выбираем Line Tool (U) и цветом #de0000 рисуем линию толщиной 1 px, она должна проходить точно по краю верхней области.
12. С линией нужно сделать то же, что и с градиентом в десятом пункте, но для начала ее необходимо растрировать.
13. Затем создадим на линии небольшие световые вспышки. Для этого создаем новый слой и с помощью Elliptical Marquee Tool (M) создаем выделение как на изображении ниже.
14. Заполняем овал таким же цветом, который использовали для линии и затем идем в меню Filter - Blur - Gaussian Blur и устанавливаем радиус размытия равным 4.1.
15. С помощью Ctrl + T немного трансформируем полученную фигуру.
16. После этого меняем Blending Options на Lighten и дублируем этот слой еще три раза. Изменяем прозрачность и расположение копий, чтобы сделать их разными.
17. Пришло время делать кнопки. Создаем новую группу и называем ее buttons. Чтобы сделать кнопки будем использовать Rounded Rectangle Tool (U) с радиусом 5 px, цвет #bb0101.
Рисуем фигуру, как на изображении ниже, для удобства увеличиваем масштаб.
18. Используя тот же инструмент необходимо отсечь часть формы, удерживая клавишу Alt.
19. Устанавливаем следующие параметры Blending Options.
20. Затем добавляем текст. Я использовал шрифт Arial.
21. Теперь придадим кнопкам большей стилистики 2.0. Создаем новый слой выше слоя с текстом Home и загрузим выделение.
22. Используя Gradient Tool (G) создайте градиент от белого к прозрачному.
23. Не снимая выделения идем в меню Filter - Blur - Gaussian Blur и устанавливаем радиус размытия равным 3.0.
24. Немного преобразуем полученный блеск и понизим Opacity до 40%.
25. Используя Elliptical Marquee Tool (M) создаем выделение.
26. Создаем новый слой и заливаем выделение белым цветом.
27. Выделяем саму кнопку и нажимаем Ctrl + Shift + I, чтобы удалить ненужные края.
28. Затем понижаем Opacity до 10%.
29. Выбираем инструмент Line Tool (U) шириной 2 px и рисуем линию, как на изображении ниже.
30. Затем с помощью Eraser Tool (E) немного стираем левый и правый края. Для этого слой нужно растрировать, просто кликнем Eraser Tool (E) в любом месте изображения.
31. Идем в Blending Options и устанавливаем следующие параметры.
32. Далее я увеличил количество кнопок до пяти и изменил цвет некоторых: текста на черный, а фона на #69747b.
33. Теперь дублируем все кнопки для того, чтобы сделать отражение (дублируем только кнопки, без свечения, возданного в двадцать девятом пункте). Трансформируем их.
34. У серых дублированных кнопок удаляем текст.
35. Далее стираем часть кнопок, чтобы сделать их более похожими на отражение и понижаем Opacity до 60 %.
36. Создаем выделение с помощью Rectangular Marquee Tool (M) и создаем новый слой выше слоя с отражением, который сделали только что. Выбираем Gradient Tool - Radial Gradient, красный цвет (тот же, что использовался для линии), создаем градиент и меняем режим смешивания на Soft Light.
37. Теперь просто дублируем слой, который создали в предыдущем шаге и передвигаем его.
38. Повторяем последние два шага ко всем кнопкам, только теперь используем белый цвет.
39. Теперь, когда мы закончили с кнопками, приступим к созданию основного шаблона. Выбираем инструмент Rounded Rectangle Tool (U), радиус 5px, и создаем выделение, которое закрашиваем цветом #d40101.
40. Удерживая Ctrl при помощи Elliptical Marquee Tool отсекаем часть изображения.
41. Не снимая выделения создаем новый слой и создаем на нем градиент от черного к прозрачному, Opacity понижаем до 33%.
42. Повторяем предыдущий шаг, только на этот раз в другом месте.
43. Создаем выделение и добавляем с помощью Gradient Tool (G) немного черного.
44. Добавляем некоторый текст. Я использовал шрифт Helvetica Neue, тот же что и для кнопок.
45. Далее используя Rounded Rectangle Tool (U), цвет #161f24, создаем форму, как на изображении ниже. Пишем там текст.
46. Добавляем больше содержимого в наш шаблон. Я сделал простой логотип, используя шрифт Harrington, а так же два блока для ввода данных. Чтобы все элементы были выровнены относительно друг друга, я использовал координатную сетку (Ctrl + R), скрыть или показать линии можно с помощью Ctrl + H.
Я надеюсь, что показал вам, как несколькими несложными действиями сделать простой, приятный дизайн сайта. Продолжайте эксперименты и совмещайте знания, полученные в этом уроке, со своими собственными!
Автор: Tutzor
Перевод: Alta Vista
Источник
@темы: Уроки, Web-дизайн