С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Простой табличный графический ценник в Фотошопе

Простой табличный графический ценник в Фотошопе

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

 

Предварительный просмотр

 

Посмотрите на это окончательное изображение, которое мы будем создавать.

 

Простой табличный графический ценник в Фотошопе

 

Ресурсы

 

Sakkal Majalla шрифт

Calibri Шрифт

Corbel шрифт

 

Шаг 1


 

Откройте Photoshop и нажмите комбинацию клавиш Ctrl + N, чтобы создать новый документ. Введите все данные, как показано на рисунке ниже и нажмите кнопку OK.

 

Включите сетку (Просмотр> Показать> Сетку (View> Show> Grid)) и привязку к сетке (Просмотр> Привязать к> Линиям сетки (View> Snap To> Grid)). 

 

Теперь необходимо настроить сетку нужным нам образом, для этого перейдите в меню Редактирование> Установки> Направляющие, сетка и фрагменты (Edit> Preferences> Guides, Grid & Slices) и отредактируйте нужным образом раздел с настройками сетки. Введите значения, как показано на изображении ниже и измените цвет сетки на # a7a7a7.

 

После того как вы установите все эти настройки, нажмите кнопку ОК. Данная сетка облегчит вашу работу позже. 

 

Вы также должны открыть панель Инфо (Info), для этого перейдите в меню Окно> Инфо (Window> Info). Эта панель предназначена для предварительного просмотра размеров и положений ваших форм.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 2

 

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

 

Перейдите к панели слоев и дважды щелкните по слою с прямоугольником, чтобы открыть окно Стили слоя (Layer Style).

 


Активируйте стили Тень (Drop Shadow), Внутренняя тень (Inner Shadow), Внешнее свечение (Outer Glow), Внутреннее свечение (Inner Glow) и Обводка (Stroke), затем установите настройки, как показано на изображениях ниже.

 

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

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 3

 

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

 

Перейдите к панели слоев и дважды щелкните по слою с прямоугольником, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 4

 

Выберите слой, созданный в предыдущем шаге, и дублируйте его (Ctrl + J).

 

Щелкните правой кнопкой мыши на этой копии и в контекстном меню выберите команду Очистить стиль слоя (Clear Layer Style).

 

Снова выберите эту копию и снизьте Заливку (Fill) до 0%, откройте окно Стили слоя (Layer Style) и введите настройки, показанные на изображении ниже.

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 5

 

На этом этапе вам нужно сетку с шагом в 1 пиксель. Для этого перейдите в меню Редактирование> Установки> Направляющие, сетка и фрагменты (Edit> Preferences> Guides, Grid & Slices) и отредактируйте нужным образом раздел с настройками сетки. 

 

Измените цвет переднего плана # ed1c24 и возьмите инструмент Прямоугольник (Rectangle Tool). Создайте форму размером в 145 на 1 пиксель, поместите ее как показано в первом изображении, а затем скопировать её (Ctrl + J).

 

Выберите копию, переместите её на 1 пиксель вниз и замените цвет на # fed700.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 6

 

Выберите слой с красной линией и снизьте Заливку (Fill) до 0%, откройте окно Стили слоя (Layer Style) и введите настройки, показанные на изображении ниже.

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 7

 

Выберите слой с желтой линией, сделанной в пятом шаге, снизьте Заливку (Fill) до 0%, откройте окно Стили слоя (Layer Style) и введите настройки, показанные на изображении ниже.

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 8

 

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

 

Выберите оба слоя с линиями и сгруппируйте их (Ctrl + G).

 

Щелкните правой кнопкой мыши на этой группе и в контекстном меню выберите команду Дублировать группу (Duplicate Group).

 

Выберите эту копию группы и перетащите линии вниз, как показано на следующем рисунке.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 9

 

Аналогично предыдущему шагу сделайте пять новых копий группы и разместите их так , как показано на следующем рисунке.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 10

 

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

 

Перейдите к панели слоев и дважды щелкните по слою с прямоугольником, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 11

 

Отключите сетку (Просмотр> Показать> Сетку (View> Show> Grid)).

 

Откройте панель Символ (Character) (Окно> Символ (Window> Character)), выберите инструмент Текст (Type Tool (T)), установите цвет # ddf1ff и добавьте надпись «BASIC», как показано на следующем рисунке.

 

Измените шрифт на «Sakkal Majalla» и установите размер на уровне в 20 пунктов. Перейдите к панели слоев и дважды щелкните по слою с текстом, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 12

 

Снова выберите Текст (Type Tool (T)), измените цвет на # 205d7a и добавьте надпись с ценой, как показано на следующем рисунке.

 

Измените шрифт на «Calibri» и установите размер на уровне в 35 пунктов. Перейдите к панели слоев и дважды щелкните по слою с текстом, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 13

 

Опять выберите Текст (Type Tool (T)), измените цвет на # ddf1ff и добавьте новый текст, как показано на первом изображении.

 

Измените шрифт на «Corbel» и установите размер на уровне в 11 пунктов.

 

Перейдите к панели слоев и дважды щелкните по слою с текстом, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 14

 

Опять выберите Текст (Type Tool (T)), измените цвет на # 205d7a, добавьте надпись «ORDER NOW», как показано на первом изображении.

 

Используйте шрифт на «Corbel» и установите размер на уровне в 12 пунктов.

 

Перейдите к панели слоев и дважды щелкните по слою с текстом, чтобы открыть окно Стили слоя (Layer Style).

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Шаг 15

 

Выделите все векторные фигуры и фрагменты текста и сгруппируйте их (Ctrl + G).

 

Сделайте две копии этой группы и переместите их вправо, как показано ниже.

 

Сосредоточьтесь на этих новых группах и просто отредактируйте текст, как показано на следующем рисунке.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 16

 

Нажмите комбинацию клавиш Ctrl + N, чтобы создать новый документ. Введите размеры в 10 на 10 пикселей и нажмите кнопку ОК.

 

Переместитесь в панель слоев и удалите фоновый слой.

 

Включите сетку (Просмотр> Показать> Сетку (View> Show> Grid)) и измените цвет переднего плана на черный.

 

Возьмите инструмент Прямоугольник (Rectangle Tool).  

 

Создайте два квадрата со стороной в 5 пикселей и разместите их, как показано на следующем рисунке.

 

Перейдите в меню Редактирование> Определить узор (Edit> Define Pattern), выберите имя для вашего шаблона и нажмите кнопку ОК.

 

Закройте этот документ (вам не нужно его сохранять) и вернитесь к первому документу.

 

Простой табличный графический ценник в Фотошопе

 

Шаг 17

 

Возьмите инструмент Прямоугольник (Rectangle Tool) и измените цвет переднего плана на # 282828. Создайте форму размером в 600 на 600 пикселей, разместите её ниже всех слоёв (Shift + Ctrl + [), а затем дважды щелкните по слою с формой, чтобы открыть окно Стили слоя (Layer Style).

 

Используйте шаблон, сделанный в предыдущем шаге.

 

Простой табличный графический ценник в Фотошопе

 

Простой табличный графический ценник в Фотошопе

 

Финальное изображение

 

Вот как должен выглядеть финальный результат.

 

Простой табличный графический ценник в Фотошопе

 

На этом всё. Надеемся вам понравился этот урок, и вы нашли его для себя полезным. Урок по теме - Музыкальный плеер для сайта в Фотошопе.

 


Автор урока: photoshopstar.com

 

Переводчик урока: Ирина Шипилова 

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



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 01.02.2013
  •   Просмотров: 4973
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки