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





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

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


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

Подсказка

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

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

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



Создаем стильные прайс-таблицы для сайта



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



Шрифт «Sakkal Majalla»

Шрифт «Calibri»

Шрифт «Corbel»

Шаг 1


Создайте новый документ в Фотошопе (Ctrl+N) размером 600 на 600 пикселей, разрешением 72dpi и белым фоном. Включите сетку (Вид > Показать > Сетка) (View > Show > Grid) и прикрепление к сетке (Вид > Прикрепить к > Сетка) (View > Snap To > Grid). Сейчас нам нужна сетка в каждые 5 пикселей. Перейдите в меню Редактирование > Установки > Направляющие, сетка и фрагменты (Edit > Preferences > Guides, Grid & Slices).
Нас интересует подраздел Сетка (Grid):

Линия через каждые (Gridline Every): 5 пикселей
Внутреннее деление на (Subdivision): 1
Цвет: #a7a7a7.

Создаем стильные прайс-таблицы для сайта


Нажмите OK. Сетка не будет нам мешать, напротив, облегчит работу. Откройте раздел Инфо (Window > Info) (F8) для предпросмотра размеров и положения фигур в документе.

Шаг 2


Установите основной цвет на #205d7a. Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус закругления которого должен быть 5 пикселей, нарисуйте фигуру размером 145 на 420 пикселей.

Создаем стильные прайс-таблицы для сайта


Примените следующие стили через иконку fx в нижней части палитры слоев:

Отбрасывание тени (Drop Shadow): Режим – Нормальный.

Создаем стильные прайс-таблицы для сайта


Внутренняя тень (Inner Shadow): Режим – Перекрытие.

Создаем стильные прайс-таблицы для сайта


Внешнее свечение (Outer Glow): Режим – Нормальный, Метод – Мягкий.

Создаем стильные прайс-таблицы для сайта


Внутреннее свечение (Inner Glow):

Создаем стильные прайс-таблицы для сайта


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

Создаем стильные прайс-таблицы для сайта


Сетку можно ненадолго выключить, чтобы лучше рассмотреть получившуюся фигуру: Просмотр > Показать > Сетку (View > Show > Grid).

Шаг 3


Выберите чёрный цвет, инструментом Прямоугольник (Rectangle Tool), нарисуйте фигуру размером 145 на 70 пикселей и пометьте ее так, как показано на изображении ниже.

Создаем стильные прайс-таблицы для сайта


К слою с прямоугольником примените следующие стили через иконку fx в нижней части палитры слоев:

Отбрасывание тени (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Внутренняя тень (Inner Shadow): Режим – Перекрытие.

Создаем стильные прайс-таблицы для сайта


Внешнее свечение (Outer Glow):

Создаем стильные прайс-таблицы для сайта


Тиснение (Bevel and Emboss): Стиль – Внутренний скос, Метод – Плавное, Режим подсветки – Осветление, Режим тени – Нормальный.

Создаем стильные прайс-таблицы для сайта


Наложение градиента (Gradient Overlay):

Создаем стильные прайс-таблицы для сайта


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

Создаем стильные прайс-таблицы для сайта


Шаг 4


Выберите слой с фигурой, нарисованной нами в предыдущем шаге, и сделайте его копию (Ctrl+J). По слою с копией кликните правой кнопкой мыши и выберите пункт Очистить стиль слоя (Clear Layer Style).

Создаем стильные прайс-таблицы для сайта


Выберите копию слоя, уменьшите Заливку (Fill) до 0% и примените стиль Отбрасывание тени:

Создаем стильные прайс-таблицы для сайта


Шаг 5


Сейчас для работы понадобится сетка с интервалом в каждый пиксель. Перейдите в Редактирование > Установки > Направляющие, сетка и фрагменты (Edit > Preferences > Guides, Grid & Slices):

Линия через каждые (Gridline Every): 1

Установите цвет переднего плана #ed1c24. Инструментом Прямоугольник (Rectangle Tool) нарисуйте фигуру размером 145 на 1 пиксель (получится линия толщиной в 1 пиксель), поместите ее так же, как на примере, и сделайте копию слоя с ней (Ctrl+J). Выберите слой с копией, подвиньте его на 1 пиксель вниз и замените темно-красный цвет цветом #fed700.

Создаем стильные прайс-таблицы для сайта


Шаг 6


Выберите слой с темно-красной линей, которую мы сделали в предыдущем шаге, уменьшите ее Заливку (Fill) до 0%.

Создаем стильные прайс-таблицы для сайта


Примените стиль Наложение Градиента (Gradient Overlay):

Создаем стильные прайс-таблицы для сайта


Шаг 7


Выберите желтую полосу, сделанную в шаге 5, уменьшите Заливку (Fill) до 0%.

Создаем стильные прайс-таблицы для сайта


Примените Наложение Градиента (Gradient Overlay):

Создаем стильные прайс-таблицы для сайта


Шаг 8


Верните сетке прежний параметр Линия через каждые (Gridline Every) 5 пикселей. Выберите оба слоя с линиями, которые мы редактировали в последних двух шагах, и сгруппируйте их (Ctrl+G). Создайте копию группы и перетащите ее немного вниз.

Создаем стильные прайс-таблицы для сайта


Шаг 9


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

Создаем стильные прайс-таблицы для сайта


Шаг 10


Установите основной цвет на #a1d8ff, инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U), радиус которого 3 пикселя, создайте фигуру размером 95 на 25 пикселя.

Создаем стильные прайс-таблицы для сайта


Откройте окно Стиль Слоя Layer Style для новой фигуры и примените стили:

Тень (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Внутренняя тень (Inner Shadow):

Создаем стильные прайс-таблицы для сайта


Внешнее свечение (Outer Glow):

Создаем стильные прайс-таблицы для сайта


Тиснение (Bevel and Emboss):

Создаем стильные прайс-таблицы для сайта


Наложение градиента (Gradient Overlay):

Создаем стильные прайс-таблицы для сайта


Обводка (Stroke):

Создаем стильные прайс-таблицы для сайта


Шаг 11


Выключите сетку. Откройте панель Символ (Окно > Символ) (Window > Character). Инструментом Горизонтальный текст (Horizontal Type Tool), и, пользуясь примером, напечатайте слово «BASIC».

Создаем стильные прайс-таблицы для сайта


К слову «BASIC» примените стиль Тень (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Шаг 12


Инструментом Горизонтальный текст (Horizontal Type Tool) напечатайте значение цены.

Создаем стильные прайс-таблицы для сайта


Примените к этому слою следующие стили:

Тень (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Внутренняя тень (Inner Shadow):

Создаем стильные прайс-таблицы для сайта


Внутреннее свечение (Inner Glow):

Создаем стильные прайс-таблицы для сайта


Шаг 13


Инструментом Горизонтальный текст (Horizontal Type Tool) напечатайте новый текст о характеристиках продукта.

Создаем стильные прайс-таблицы для сайта


Примените для нового текста стиль Тень (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Шаг 14


Напишите словосочетание «ORDER NOW».

Создаем стильные прайс-таблицы для сайта


К новой надписи примените стиль Тень (Drop Shadow):

Создаем стильные прайс-таблицы для сайта


Шаг 15


Все созданные надписи и векторные фигуры объедините в группу (Ctrl + G). Сделайте две копии группы и разместите их, как показано на иллюстрации. В новых группах измените текст, следуя примерам

Создаем стильные прайс-таблицы для сайта


Шаг 16


Создайте новый документ (Ctrl + N) размером 10 на 10 пикселей. Удалите слой Фон (Background) с помощью иконки мусорной корзины в нижней части панели слоев. Включите сетку Просмотр > Показать > Сетку (View > Show > Grid) и сделайте черным основной цвет. Инструментом Прямоугольник (Rectangle Tool) нарисуйте 2 квадрата со сторонами в 5 пикселей и разместите их так же, как на примере. Сейчас этот маленький документ нам нужно превратить в узор (паттерн). Перейдите в Редактирование > Определить узор (Edit > Define Pattern), задайте имя узора «First Pattern» и нажмите ОК. Закройте документ (сохранять его не нужно) и вернитесь к первоначальному документу.

Создаем стильные прайс-таблицы для сайта


Шаг 17


С помощью инструмента Прямоугольник (Rectangle Tool) нарисуйте фигуру размером 600 на 600 пикселей цветом #282828 (она будет служить фоном), отправьте ее слой за все наши слои с таблицами (Shift + Control + [) и примените стиль Наложение узора (Pattern Overlay):

Создаем стильные прайс-таблицы для сайта

Создаем стильные прайс-таблицы для сайта


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



Создаем стильные прайс-таблицы для сайта



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

написал : alexidi

Круто. Спасибо.

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


написал : vadik129

я не могу применить стили слоя к нарисованной фигуре, у меня применяется стиль ко всему изображению, а именно к фону ( например вкулючаю тень, и она отбражается по краю фона, а не по краю рисунка, включаю внутренне свечение, ввожу параметры, как указано в уроке, а светится тоже фоновый рисунок по краям, но не сам рисунок. У меня фотошоп CS5

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


написал : positive11

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

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


написал : vadik129

Та нет, у меня что то в настройках что было включено не то, при рисовании фигур нужно включать рисование фигуры - слоя, я же просто рисовал в слое фигуру. Сброс настроек помог. Но плохо, что именно этого в уроках не сказано, по скрину нашел.

В результате создания первой таблицы у меня получилось 5 груп и 11 слоев, не обьединенных в группы. Не могу создать одну группу на готовую таблицу, то есть выполнить шаг 15. Пробую обединить слои, тоже не хотят обединятстя в группу.

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


написал : positive11

vadik129, а Вы случайно, фоновый слой (заблокированный) не пытаетесь засунуть в группу? если его выбрать вместе с остальными слоями, то объединение слоёв в группу через Ctrl + G не произойдёт.

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


написал : vadik129

Нет, фон я не вставлял

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


написал : positive11

vadik129, а просто пустую группу можете создать? потом перенесёте туда слои мышкой.

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


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

Ваше Имя

Ваш E-mail

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

Введите код: