Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Простой серый дизайн сайта


1. Создайте новый документ размером 800х800 пикселей с белым фоном. Разблокируйте фоновый слой (кликните дважды на нём) и примените к нему стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Умножение, Стиль – Радиальный


Простой серый дизайн сайта

Простой серый дизайн сайта


2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии разных цветов на всю ширину холста:


Простой серый дизайн сайта

Простой серый дизайн сайта


3. Создайте фигуру инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool), потом инструментом Прямоугольная область (Rectangular Marquee Tool) обрежьте её нижнюю часть, чтобы внизу углы были острыми. Назовите этот слой “navigation”. Примениие к нему такие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Умножение):


Простой серый дизайн сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Простой серый дизайн сайта


Обводка ( Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):


Простой серый дизайн сайта


Расположите обрезанный прямоугольник, как показано ниже:


Простой серый дизайн сайта


4. Создайте новый документ с прозрачным фоном размером 4х4 пикселя. Инструментом Карандаш (Pencil Tool) нарисуйте узор, показанный ниже.


Простой серый дизайн сайта


5. Перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните ваш узор. Вернитесь в основной документ, сделайте выделение слоя с прямоугольником (Ctrl+Click), создайте новый слой (Create New Layer) и залейте выделение сохранённым узором, используя инструмент Заливка (Paint Bucket Tool). Установите Режим наложения этого слоя – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 25%.


Простой серый дизайн сайта


6. Инструментами Прямоугольная область (Rectangular Marquee Tool) и Овальная область (Elliptical Marquee Tool) создайте простое свечение на этой фигуре.


Простой серый дизайн сайта


7. Добавьте заголовок сайта, логотип, слоган, навигационный текст и область поиска:


Простой серый дизайн сайта


8. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте большую фигуру, как показано ниже.


Простой серый дизайн сайта


9. Примените к ней такие стили слоя:

Отбрасывание тени (Режим – Умножение):


Простой серый дизайн сайта


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Простой серый дизайн сайта


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Линейный):


Простой серый дизайн сайта


10. Внутри большого прямоугольника создайте ещё один:


Простой серый дизайн сайта


11. Примените к нему стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Простой серый дизайн сайта


12. В середине большого серого прямоугольника создайте две 1-пиксельные линии, как мы делали это ранее. Можете затереть края линий, используя маску слоя или ластик.


Простой серый дизайн сайта


13. Добавьте контент:


Простой серый дизайн сайта


14. Создайте ещё один прямоугольник ниже:


Простой серый дизайн сайта


15. Примените к нему такие же стили, как и к большому. Потом заполните его нужным контетом:


Простой серый дизайн сайта


16. Стрелки можете найти в стандартном наборе фигур. Скопируйте навигационную панель вниз и заполните её информацией футера:


Простой серый дизайн сайта




Ссылка на источник урока

написал : Андрей Алтунин

написал : Вячеслав

Как на 6 шаге создать свечение?

---------------


написал : positive11

В новом слое над узором создайте выделение на половину чёрного прямоугольника, залейте белым цветом и понизьте Непрозрачность слоя. у вас будет бледно-белое свечение. Сделайте это с двумя инструментами выделения.

---------------


написал : Вячеслав

На 3-м шаге как инструментом Прямоугольная область (Rectangular Marquee Tool) обрезать нижнюю часть прямоугольника с закруглёнными краями? Никак не получается. После выделения что делать?

---------------


написал : positive11

Delete нажать. важно находиться на слое той фигуры, которую нужно обрезать.

---------------


написал : Вячеслав

На слое с фигурой инструментом Прямоугольная область (Rectangular Marquee Tool) выделяю нижнюю часть прямоугольника, которую надо обрезать.
Нажимаю Delete - удаляется весь слой с фигурой. Что не так?

---------------


написал : positive11

Растеризуйте слой с фигурой, которую обрезаете. Правый клик на слое в паилитре слоёв и выберите там нужный пункт

---------------


написал : Артем

извиняюсь,не могу понять - " 2. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте две 1-пиксельные линии разных цветов на всю ширину холста "...Можно по подробнее,пожалуйста.Выбрал Rectangular Marquee Tool , что дальше? Какие именно две линии нужно создать?

---------------


написал : positive11

В данном случае для создания 1-пиксельной линии можно пойти двумя способами (ну вообще-то их больше, но не важно сейчас).
1. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) (M). В настройках инструмента на верхней панели установите Стиль (Style) - Заданный размер (Fixed Size). Справа от этого параметра введите размеры выделения. Ширина (Width) равна ширине холста, а Высота (Height) - 1 пиксель.
Затем кликните на холсте и выделение будет создано. После этого создайте новый слой (Ctrl + Shift + N) и инструментом Заливка (Paint Bucket Tool) (G) залейте выделение нужным цветом. Цвет заливки - это передняя миниатюра цвета на панели инструментов.

2. Второй способ. Чтобы создать 1-пиксельное выделение на всю ширину или высоту холста есть инструменты Горизонтальная строка (Single Row Marquee Tool) и Вертикальная строка (Column Row Marquee Tool). Оба инструмента можно найти, кликув правой кнопкой мыши на иконке инструмента Прямоугольная область (Rectangular Marquee Tool) на панели инструментов.
Этот инструмент настроен на то, чтобы создавть выделение на всю ширину или длину холста с высотой или шириной в 1 пиксель (в зависимости от инструмента). Выберите его и просто кликните на холсте. Увидите, что пройзойдёт.
Созданное этим инструментом выделение тоже нужно будет залить на новом слое.


Если у Вас будут ещё вопросы, пишите! Обязательно поможем!

---------------


написал : Артем

positive1, огромнейшее спасибо!! Очень рад,что есть такие люди,которые могут нормально всё объяснить.Яб сказал даже в ражованном варианте подать. Ещё раз огромное спасибо. Едем дальше))) Надеюсь,что больше нигде " не застряну ".

---------------


написал : Grep

Можете,пожалуйста,по подробнее описать 6 пункт.Что нужно для того,чтобы выделилась именно та часть и закрасилась именно та половина,которую я обвел. Заранние благодарю.

---------------


написал : positive11

Grep
Выберите инструмент Прямоугольная область (Rectangular Marquee Tool). Создайте выделение верхней половины чёрного меню. Создайте новый слой (Ctrl + Shift + N) и залейте его белым цветом. Понизьте Непрозрачность (Opacity) слоя, чтобы белый цвет стал полупрозрачным. Значение непрозрачности на своё усмотрение.
Далее выберите инструмент Овальная область (Elliptical Marquee Tool). Нужно создать большое выделение так, чтобы нижняя часть выделения немного "заползла" на чёрное меню. затем залить белым цветом и понизить непрозрачность.

Чтобы убрать выделение на холсте, нажмите Ctrl + D.

---------------


написал : Grep

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: