Дизайн интерфейса Web 2.0 в Photoshop
Понимание учебника ниже - это понимание его техники, с его помощью вы можете нарисовать графический интерфейс пользователя для веб-сайта.. Боковая навигация, кнопки, заголовки, например. Весь стиль Web 2.0.
Запустить новый холст; любой размер. Что-то больше, чем 450x300px было бы хорошо. Выберите Закругленный прямоугольный инструмент и нарисуйте прямоугольник такой же большой, как показано на рисунке выше.
Дважды щелкните на слое Rounded Rectangular, чтобы запустить Параметры наложения. Измените настройки для следующих стилей.
Drop Shadow
Непрозрачность: 31% Расстояние: 1px Распространение: 0% Размер: 5px
Скос и тиснение
Глубина: 100% Размер: 0px Смягчение: 0px
Градиентное наложение
Дважды щелкните Градиент и установите следующие точки остановки. Расположение: 0%, # 1378cd Расположение: 100% # 4da5f0
Инсульт
Размер: 5px Позиция: Внутри Цвет: # 54abf6
Давайте вставим текст, слоган, URL или что-то еще. Расположите его посередине и выровняйте по правому краю, чтобы логотип мог располагаться слева. Давайте стилизовать текст. Я использую Lucida Sans Unicode; 55pt; гладкий; плавный; -120 для отслеживания символов (межбуквенный интервал). Дважды щелкните на текстовом слое и установите следующее в Параметры наложения.
Градиент наложения
Дважды щелкните Градиент и установите следующие точки остановки. Расположение: 0%, # 9ec7eb Расположение: 100% ecf6ff
Затем вам нужно будет вставить логотип на левой стороне текста. Я буду использовать прямоугольник с закругленными углами с радиусом 5 пикселей, чтобы представить логотип. Вот Вариант смешивания настройки для закругленного прямоугольника.
Внутренняя тень
Непрозрачность: 45% Расстояние: 0px Размер: 43px;
Скос и тиснение
Глубина: 100% Размер: 0px Смягчение: 0px Непрозрачность режима подсветки: 50% Непрозрачность режима тени: 100%
Градиентное наложение
Дважды щелкните Градиент и установите следующие точки остановки. Расположение: 0% # 0e2f4a Расположение: 47% # 001a31 Расположение: 48% # 002545 Расположение: 100% # 0f4b7f
Инсульт
Размер: 5px Дважды щелкните Градиент и установите следующие точки остановки. Местоположение: 0% # 1468af Расположение: 100% # 50abf8
Давайте дадим ему немного глянцевый эффект. Держать CTRL и щелкните левой кнопкой мыши на закругленном прямоугольнике Миниатюра слоя. Когда весь прямоугольник с закругленными углами выбран, изменяется на Инструмент прямоугольного выделения, держать ALT и вытягивает вторую половину выбранной области; как на картинке выше.
Создать новый слой; Перетащите его так, чтобы он располагался поверх всех слоев; залейте выделенную часть белым [#ffffff]; изменить непрозрачность до 15%.
Обучение закончится здесь. Как вы собираетесь использовать этот дизайн, полностью зависит от вас. Слегка изменив его размер и цвет, его можно использовать в качестве веб-заголовка или кнопок. Вот пример.
Заголовок веб-сайта
Кнопки сайта
