Как нарисовать таблицу в фотошопе?

Как в Фотошопе вставить таблицу

Вам понадобится

Графический редактор Adobe Photoshop, табличный редактор Microsoft Office Excel.

Инструкция

Подготовьте в Excel таблицу, которую нужно поместить на редактируемое в Photoshop изображение.

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

Не забывайте о возможности объединять ячейки в Excel — это позволяет создать сложные структуры в колонках и строках.

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

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

Например, вы можете раскрасить ячейки в порядке возрастания значений переходом цвета от красного к зеленому, выделить цветом минимальное и максимальное значения и т.д. Кнопка с выпадающим списком, содержащим настройки условного форматирования, помещена в группу команд «Стили» на вкладке «Главная» табличного редактора.

Закончив с наполнением таблицы, подберите цвет рамки, фона, текста и других элементов оформления. Выберите один из имеющихся вариантов оформления — их список раскрывается щелчком по кнопке «Стили ячеек» в группе команд «Стили» на вкладке «Главная».

Если все размещенные там варианты вам не подходят, выделите всю таблицу, кликните выделение правой кнопкой мыши и выберите в контекстном меню пункт «Формат ячеек».

В открывшемся окне на вкладках «Шрифт», «Граница» и «Заливка» помещены инструменты оформления, с помощью которых вам надо придать нужный вид таблице.

Поместите созданную таблицу в буфер обмена. Для этого установите курсор в крайнюю правую нижнюю ячейку (Ctrl+End), выделите все заполненные клетки (Ctrl+Shift+Home) и скопируйте их (Ctrl+C).

Переключитесь в графический редактор и выберите в списке слоев тот, выше которого нужно поместить таблицу. Затем вставьте содержимое буфера обмена — нажмите сочетание клавиш Ctrl+V. Photoshop добавит скопированную таблицу в центр изображения, создав для нее отдельный слой. После этого вы можете приступать к позиционированию и обработке вставленной таблицы.

Источники:

Как в Excel 2013 сделать красивые границы таблицы

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

Инструкция

Первоначально необходимо создать таблицу, если ее еще нет. Это действие совершается в атрибуте . Для этого используются теги (закрывающий тег обязателен):•

— таблица;•

— строка;•

Обратите внимание

Это урок о том, как вставить картинку в HTML, как её оформить, как сделать обтекание картинки текстом и т.д.

Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег «IMG» и его атрибуты весьма пригодится в современном Интернете.

Но, главное тут — чувство меры! Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки.

Полезный совет

Если эта область будет не соответствовать реальному размеру картинки, которую вы хотите вставить, то рисунок будет соответственно растянут или сужен, до заданного в html теге Img размера.

Тем не менее, не следует использовать это способ, скажем, для уменьшения размера вставляемого в Html документ рисунка.

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

Источники:

как вставить картинку без фона html

Источник: https://www.kakprosto.ru/kak-125177-kak-v-fotoshope-vstavit-tablicu

Таблица в фотошопе

Если вы решили посвятить свою жизнь веб-дизайну, рано или поздно вам придется столкнуться такой проблемой: как нарисовать таблицу в фотошопе. Разумна мысль, что создать таблицу для сайта было бы гораздо проще с помощью html кода. Но вы представьте себе такую ситуацию.

Вы готовите дизайн макет для верстальщика. Передаете ему законченный вариант, в котором есть все… кроме таблицы. Вы обладаете вкусом, быстро можете подобрать подходящую толщину линий, цвета, варианты выделения. Но для верстальщика это порой непосильная задача.

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

Да и вообще, работу всегда следует доводить до конца, как бы сложна они ни была.

Для начала создаем рабочий документ, размеров 1000 на 1000 пикселей. Давайте создадим таблицу в фотошопе с помощью направляющих, линейки и вспомогательных линий. Для этого во вкладке «окно» включаем инструмент «линейки».

Линейки появились. Ставим курсор на них и вытаскиваем вспомогательные линии. Расставляем их в соответствии с нужным размером ячейки по горизонтальной и вертикальной линейке.

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

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

Теперь выбираем инструмент «линия», делаем клик по рабочей области и протягиваем ее до нужной отметки. Дабы линия была ровной и не отклонялась, зажимаем клавишу shift.

Кстати говоря, толщина линии задается на верхней панели.

Вы могли бы начертить несколько горизонтальных линий, для того, чтобы нарисовать таблицу в фотошопе. Но я вам настоятельно советую их продублировать, дабы после не пришлось выравнивать их. Для этого в окне слоев мы выбираем слой с нашей линией, кликаем правой клавишей мыши и из выпадающего списка выбираем «создать дубликат слоя».

А теперь ставим курсор на появившуюся линию, зажимаем левую клавишу мыши и кнопку shift и тащим ее вниз. Проделываем это маневр несколько раз горизонтальными линиями.

После чего создаем новый слой:

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

Убираем вспомогательные линии. Ставим курсор на них и оттаскиваем к линейкам.

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

Допустим, нам нужна таблица соответствия размеров одежды. Ставим курсор в ячейку и пишем. После чего нажимаем клавишу enter и переходим к следующей строке. Настройки шрифта и его размеров опять же находим на верхней панели.

Вот, что мы имеем теперь:

Как видите, совпала только первая ячейка. Остальные же строчки встали мимо. Это легко исправить. Выделяем текст, проводя от последней написанной буквы к первой и на панели инструментов «текст», вызвать которую вы можете на верхней панели, задаем нужный интерлиньяж.

Повторяем те же действия для других ячеек.

Вот такая таблица у нас получилась. Давайте выделяем первый столбец цветом. Возвращаемся к палитре цветов, выбираем нужный.

А теперь в окне слоев выбираем первый, фоновый слой. И только после этого создаем новый.

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

Появившуюся выделенную область мы заливаем цветом, при помощи инструмента «заливка». Выбираем его на панели инструментов и кликаем по выделенной области.

Комбинацией клавиш ctrl+d снимаем выделение.

Наша таблица готова! Как видите, нарисовать ее в photoshop оказалось довольно просто. Мы разобрали самый простой пример. Если вы расширите область своих познаний и задействуете фантазию, вы сможете сделать таблицу гораздо красивей. Но основные принципы останутся теми же.

Источник: http://photoshop-work.ru/tablica-v-fotoshope

Как нарисовать красивую таблицу в фотошопе

Доброго дня всем посетителям сайта pixelbox.ru!В предыдущих уроках мы говорили о Сетке в фотошопе и направляющих. Эти знания вам пригодятся, чтобы нарисовать таблицу в Photoshop.Нарисовать таблицу можно при помощи разных программ — Power Point, Excel, Word и т.п. Но в случае, если таблица содержит в себе изображения, лучшим вариантом будет программа Adobe Photoshop.

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

Создавать эскиз таблицы при помощи Направляющих и Сетки
Рисовать таблицу с помощью инструмента Линия
Добавлять в таблицу текст и изображения

Подготавливаем таблицу, расставляем направляющие

Давайте создадим таблицу с породами собак. Открываем в фотошоп (Ctrl + O) подготовленный фон для таблицы:

Переходим в меню Просмотр — Линейки (View — Rulers) и включаем Линейки.

Снова переходим в меню Просмотр для отображения Направляющих (Просмотр — Показать — Направляющие (View — Show — Guides)):

Для большего удобства можно включить Сетку в фотошопе. Сделать это можно, перейдя в меню Просмотр — Показать — Сетку (View-Show-Grid) либо же нажать сочетание клавиш Ctrl + “ («Э» в русской раскладке клавиатуры):

Переходим в меню Редактирование — Установки — Направляющие, сетка и фрагменты (Edit- Preferences — Guides, Grid & Slices) либо нажимаем сочетание клавиш Ctrl+K и Ctrl+8.

Настраиваем Сетку:

Я изменила настройки на следующие, поменяв только частоту расположения линий на 200 пикселей:

При помощи Направляющих «чертим» набросок нашей будущей таблицы. Чтобы добавить Направляющую, при любом активном инструменте подведите мышь к Линейке (горизонтальной или вертикальной, это зависит от того, какая направляющая нужна), щелкните левой клавишей мышки по линейке и вытащите Направляющую. Перетаскиваем ее в нужное место и отпускаем клавишу мышки.

Совет: чтобы направляющие «прилипали» к линиям сетки и было проще их расставлять, не забудьте включить функцию «Привязка к…» Более подробно об этом в уроке о сетках.

Чтобы изменить положение уже добавленной направляющей, активируйте инструмент Перемещение (Move Tool) клавишей V на клавиатеру и перетащите Направляющую.

Вот какой эскиз таблицы получился в итоге:

«Ну все, готово» с облегчением выдохнете вы. Нет, пока не все. Направляющие и Сетка будут видны только в документах в формате PSD или TIFF, если же сохранить изображение в форматах jpg, png, gif — все нарисованные ранее линии не будут видимы.

Рисуем таблицу в фотошопе

Чтобы нарисовать видимые линии таблицы, активируем инструмент Линия (Line Tool):

В верхней панели настроек инструмента изменяем цвет (1) и толщину линий (2), включаем или отключаем обводку (3):

Рисуем линии. Чтобы нарисовать ровную линию, зажмите клавишу Shift, сделайте клик левой клавишей мыши в начале линии, проведите линию к ее окончанию, отпустите клавишу мыши и Shift.

Вот какая таблица у нас получилась в итоге:Осталось только при помощи инструмента Текст (Type Tool) (можно активировать клавишей T)написать текст и вставить картинки.При необходимости снова используем Направляющие, чтобы ровно расположить текст и картинки.

Чтобы добавить картинки, перейдите в меню Файл — Поместить (File-Place) и поочередно выберите изображения с собаками.

Трансформируйте картинки (Ctrl + T) и расположите в документе, при необходимости измените их размер, как это сделать показано в уроке «Как изменить размер слоя».

Отключить направляющие и таблицу в фотошопе, чтобы они не мешали обзору таблицы.

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

Источник: https://pixelbox.ru/kak-narisovat-krasivuyu-tablitsu-v-fotoshope

Как рисовать в фотошопе. Рисование фигуры

Как создать свой сайт → Уроки Photoshop → Как рисовать фигуры в фотошопеИнструменты рисования позволяют создавать и редактировать векторные фигуры. С ними легко создавать различные элементы для веб-страниц. Создайте новый файл для тренировки.

Нажмите левой клавишей мыши на инструмент -фигуры- на панели инструментов, откроется окно выбора инструмента:Здесь представлены основные фигуры, которыми мы можем воспользоваться.

Выберете любую и посмотрите на панель параметров:Для любой фигуры можно выбрать:

режим рисования:
стиль и цвет фигуры
задать параметры, характерные для этой фигуры

Рисуем прямоугольники Выберем первую фигуру — прямоугольник. На панели выберем режим — слой-фигура.

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

Теперь можно задать геометрические параметры:

Произвольно — как нарисуете, так и будет.
Квадрат — при растягивании мышкой фигуры, ширина и высота будут всегда одинаковы.
Заданный размер — можно задать ширину и высоту прямоугольника (в см) и щелкнуть по холсту. Появится прямоугольник с заданными размерами.
Задать пропорции — можно задать во сколько раз ширина будет меньше (или больше) высоты. При растягивании фигуры пропорция будет сохраняться.
От центра — рисует прямоугольник от центра.
Привязать к пикселам — края прямоугольника привязываются к границам пикселов.

Теперь выберите -произвольно- и растяните мышкой ваш прямоугольник на холсте. Вот, например, что получилось у меня при использовании стилей Button, Glass Buttons и Web Styles.Достаточно полезный инструмент для создания кнопочек и менюшек для ваших web-страниц, не правда ли?

Рисуем прямоугольники со скругленными углами

Выберем вторую фигуру — прямоугольник со скругленными углами. На панели выберем режим — слой-фигура, радиус скругления углов — например, 15 и цвет (можно стиль, как хотите).Геометрические параметры такие же, как у прямоугольника. Вот, что получилось у меня при различных комбинациях радиуса и стиля.Чем не блоки новостей и кнопочки меню?

Рисуем окружности

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

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

Вот, что получилось у меня:

Рисуем многоугольники

Выберем фигуру — многоугольник. На панели выберем режим — слой-фигура, количество сторон в диапазоне от 3 до 100 (например, 3 — для треугольника, 6 — для шестиугольника), цвет и стиль. Рассмотрим геометрические параметры:

Радиус — радиус многоугольника.
Сгладить внешние углы — со снятой галочкой углы острые, с поставленной галочкой углы округлые.
Звезда — со снятой галочкой многоугольник выпуклый, с поставленной галочкой многоугольник вогнутый.
Глубина лучей — если многоугольник вогнутый, то его вершины как бы образуют лучи. Этот параметр показывает какая часть радиуса многоугольника будет занята лучами. Чем больше %, тем длиннее и острее лучи.
Сгладить внешние углы — со снятой галочкой углы острые, с поставленной галочкой углы округлые.

Например:Первый девятиугольник имеет радиус 3см, остальные галочки сняты. Второй девятиугольник имеет радиус 3см, галочка у -звезда-, глубина лучей — 25%, остальные галочки сняты.

Третий девятиугольник имеет радиус 3см, глубина лучей — 50%, стоят все галочки. Ко всем применен стиль.

Рисуем линии

Выберем фигуру — линии. На панели выберем режим — слой-фигура, толщину линии (в пикселах), цвет и стиль. Рассмотрим геометрические параметры:

Если все галочки сняты будет просто линия, параметры задают стрелки на концах этой линии.

Начало — стрелка в начале линии.
Конец — стрелка в конце линии.
Ширина — пропорции стрелки в процентном отношении к толщине линии (от 10% до 1000%).
Длина — пропорции стрелки в процентном отношении к толщине линии (от 10% до 5000%).
Кривизна — определяет степень изогнутости самой широкой части стрелки в месте, где она встречается с линией (от -50% до +50%).

Например:У первой линии все галочки сняты, ширина — 500%, длина — 1000%, толщина — 2 пиксела. У второй линии все тоже самое, но стоит галочка у -начало- и кривизна — 5%. У третьей линии все тоже самое, но стоит галочка у -конец- и снята галочка у -начало-. У четвертой линии стоят обе галочки, ширина — 500%, длина — 1000%, кривизна — 15%, толщина — 5 пикселов. Ко всем применен стиль.

Рисуем произвольные фигуры

Выберем фигуру — произвольная фигура. На панели выберем режим — слой-фигура, цвет и стиль. Геометрические параметры такие же как у прямоугольника. Зато здесь есть выбор самой фигуры:Если щелкнуть по треугольничку в кружочке (справа), то в открывшемся контекстном меню можно выбрать дополнительные фигуры.

Рисуем несколько фигур в одном слое

Принцип здесь такой же, как и с инструментами прямоугольного выделения (на первом уроке мы делали нестандартную область выделения, применяя инструменты на панели параметров: добавить к выделению, вычесть из выделения и т.д.). Такие же инструменты есть и на панели параметров фигур.

Например, создайте фигуру прямоугольник, теперь на панели параметров щелкните по иконке “добавить к области фигуры”, а теперь выберите фигуру эллипс. Подведите курсор мыши к верхней границе нашего прямоугольника, нажмите левую клавишу мыши и, не отпуская, растяните эллипс.

Должно получится примерно так:Если эллипс растянулся не так, как хотелось, можно это поправить. Для этого возьмите на панели инструментов инструмент -выделение контура-:Подведите курсор к границе эллипса и, удерживая нажатой левую кнопку мыши, перетащите эллипс куда следует.

Используя все эти инструменты, можно рисовать фигуры различной сложности.

Сохраняем фигуры

Предположим нам понравилась последняя фигура, которую мы создали и мы хотим использовать ее в дальнейшем. Для этого ее нужно сохранить. Для этого меню Редактирование -> Определить произвольную фигуру. Задайте имя для новой фигуры.Теперь наша фигура появилась в раскрывающейся панели выбора произвольных фигур.

На этом урок закончен. В следующей раз займемся контурами и растровыми изображениями.

Урок 2. Слои и текст

Урок 3. Фильтры

Урок 6. Трансформация

Урок 7. Рисование — кисть и карандаш

Урок 11.

Рисование — инструмент перо

Предыдущий урок Вернуться в раздел Следующий урок

Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.Код кнопки: Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.

Источник: http://www.site-do.ru/photoshop/photoshop9.php

Создаем простую таблицу цен в Adobe Photoshop

В этом уроке Вы научитесь создавать простую таблицу цен, используя Photoshop.

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

Как всегда, показываем, какое изображением мы будем создавать:

Источники

Шаг 1

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

Включаем сетку Grid (View> Show> Grid) и привязку к сетке (View> Snap To> Grid). Для перемещений Вам необходима сетка через каждые 5 рх. Переходим в меню Edit> Preferences> Guides, Grid & Slices и фокусируемся на секции Grid.

Вводим значение 5 в окно Gridline Every и значение 1 — в окно Subdivision. Также устанавливаем цвет сетки #a7a7a7.
После того, как Вы ввели все эти значения, нажимаем ОК. Не пугайтесь всех этих сеток. Они нам помогут в дальнейшей работе.

Также Вам необходимо открыть панель Info (Window> Info) для просмотра размеров и расположения фигур в реальном времени.

Шаг 2

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

Активируем Drop Shadow, Inner Shadow, Outer Glow, Inner Glow и Stroke, а затем вводим все настройки, показанные на следующих изображениях.

В конце концов, это должно выглядеть так, как показано на втором изображении. Вы можете временно отключить сетку (View> Show> Grid or Control + ” ), если Вы хотите получше рассмотреть фигуру.

Шаг 3

Устанавливаем цветом переднего плана черный цвет, берем инструмент Rectangle Tool, создаем фигуру с размерами 145 на 70px и располагаем её так, как показано на первом изображении.
Перемещаемся на панель слоев, открываем окно стилей слоя для этой новой фигуры и вводим все настройки, показанные на следующих изображениях.

Шаг 4

Выделяем векторную фигуру, созданную в предыдущем шаге, и дублируем её (Control + J).
Фокусируемся на панели слоев, нажимаем правой кнопкой на этой копии и нажимаем Clear Layer Style.
Выделяем эту копию, снижаем уровень заливки до 0%, затем открываем окно стилей слоя и вводим настройки, показанные на следующем изображении.

Шаг 5

Для этого шага Вам необходима сетка через каждый 1рх. Просто переходим в меню Edit> Preferences> Guides, Grid & Slices и вводим значение 1 в окно Gridline Every.

Устанавливаем цветом переднего плана цвет #ed1c24 и берем инструмент Rectangle Tool. Создаем фигуру с размерами 145 на 1рх, располагаем её, как показано на первом изображении, а затем дублируем эту фигуру (Control + J).

Выделяем эту копию, перемещаем на 1рх вниз и заменяем темно-красный цвет цветом #fed700.

Шаг 6

Снова выделяем красную векторную фигуру, созданную в предыдущем шаге, снижаем её заливку до 0%, затем открываем окно стилей слоя и вводим настройки, показанные на следующем изображении.

Шаг 7

Снова выделяем желтую векторную фигуру, созданную в пятом шаге, снижаем уровень её заливки до 0%, затем открываем окно стилей слоя и вводим настройки, показанные на следующем изображении.

Шаг 8

Возвращаемся к сетке через каждые 5рх. Для этого переходим в меню Edit> Preferences> Guides, Grid & Slices и вводим 5 в окно Gridline Every.

Снова выделяем два тонких прямоугольника, отредактированных в предыдущем шаге, и группируем их (Control + G).
Перемещаемся на панель слоев, нажимаем правой кнопкой на новой группе, а затем нажимаем на Duplicate Group.

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

Шаг 9

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

Шаг 10

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

Шаг 11

Отключаем сетку (View> Show> Grid).

Открываем панель символов (Window> Character), берем инструмент Type Tool(T), устанавливаем цвет #ddf1ff и добавляем часть текста “BASIC”, как показано на следующем изображении.

Используем шрифт Sakkal Majalla, стиль шрифта — полужирный и размер — 20pt. Переходим на панель слоев, открываем окно стилей слоя для этой маленькой части текста и вводим настройки, показанные на следующем изображении.

Шаг 12

Берем инструмент Type Tool(T), устанавливаем цвет #205d7a и добавляем цены, как показано на следующем изображении.
Используем шрифт Calibri, стиль шрифта — полужирный и размер — 35pt. Переходим на панель слоев, открываем окно стилей слоя для этой новой части текста и вводим настройки, показанные на следующем изображении.

Шаг 13

Берем инструмент Type Tool(T), устанавливаем цвет #ddf1ff и добавляем новый текст, как показано на первом изображении.
Используем шрифт Corbel, стиль шрифта — обычный и размер — 11pt. Переходим на панель слоев, открываем окно стилей слоя для этой новой части текста и вводим настройки, показанные на следующем изображении.

Шаг 14

Берем инструмент Type Tool(T), устанавливаем цвет #205d7a и добавляем текст “ORDER NOW”, как показано на первом изображении.
Используем шрифт Corbel, стиль шрифта — полужирный и размер — 12pt. Переходим на панель слоев, открываем окно стилей слоя для этой новой части текста и вводим настройки, показанные на следующем изображении.

Шаг 15

Снова выделяем векторные фигуры и части текста, созданные недавно, и группируем их (Control + G). Создаем две копии этой группы и перемещаем их вправо, как показано ниже.

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

Шаг 16

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

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

Берем инструмент Rectangle Tool и устанавливаем черный цвет в качестве цвета переднего плана. Создаем два квадрата с размером 5рх и располагаем их, как показано на следующем изображении. Затем Вам необходимо превратить этот маленький документ в узор.

Просто переходим в меню Edit> Define Pattern, вводим имя нашего узора и нажимаем ОК.

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

Шаг 17

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

Результат

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

Перевод: http://www.4webmaster.ru/

Рекомендуем почитать:
• Как создать реалистичные слезы в Photoshop
• Создание логотипа в стиле Web 2.0 в Photoshop
• Как создать пули в Photoshop

Источник: http://www.4webmaster.ru/lessons/5508/

Как нарисовать таблицу в Photoshop

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

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

А посему не следует удивляться тому факту, что с помощью Фотошопа можно даже нарисовать таблицу.

Конечно, кто-то скажет, что для этих целей больше подходит Word или Excel, и будет прав отчасти. Дело в том, что в Photoshop можно получить яркую и красочную табличку, чего не получится добиться в вышеуказанных программках! Поэтому не буду ходить вокруг да около, и расскажу вам о том, как нарисовать таблицу в Фотошопе.

Для того чтобы нарисовать табличку красиво и максимально быстро, предлагаю вам воспользоваться следующей инструкцией:

откройте графический редактор, после чего кликните на кнопку «Файл», которая располагается на Панели инструментов;
в выпавшем контекстном меню выберите строчку «Создать», дабы открыть новый документ;
теперь нужно добавить новый слой, на котором, собственно говоря, и будет нарисована ваша таблица. Для этого нужно на клавиатуре одновременно зажать комбинацию клавиш Ctrl+Shift+N или же на Панели слоев нажать на кнопку «Создать новый слой»;
далее в поле «Цвет» появившегося окна выберите любой оттенок, которые впоследствии будет фоном таблицы. Сделав это, нажмите «ОК»;
следующий шаг — инструмент «Прямоугольник», который надо выбрать на вертикальной панельке с левой стороны программы. С его помощью нарисуйте будущую ячейку вашей таблицы. Обратите внимание, что для того чтобы она получилась квадратной, параллельно нужно зажать кнопку Shift. Для того чтобы переместить ячейку в другое место, нужно зажать клавишу Ctrl;
после того, как выстроите все ячейки в требуемом порядке, жмите на инструмент «Управление выделением». Затем кликните правой мышиной кнопкой по контрольным узелкам последней ячейки и выберите пункт «Удалить точки привязки»;
следующее действие заключается вот в чем: на Панели инструментов выберите «Кисть» и вручную установите ее диаметр, который будет соответствовать ширине границ таблички. Потом опять — «Прямоугольник» и кликните правой кнопкой по таблице, чтобы вызвать контекстное меню. Там нажмите на строчку «Обводка».

Другие способы

Нарисовать таблицу в Photoshop можно и другими способами, например, посредством инструмента «Линия». Просто активируйте его и рисуйте таблицу с нужным количеством строк и столбиков.

А для того чтобы линии получались ровными, не забывайте удерживать Shift.

По итогу кликните правой мышиной кнопкой и в контекстном меню выберите пункт «Обводка», предварительно установив параметры кисти.

Вот и все, с помощью таких нехитрых рекомендаций можно легко и просто нарисовать табличку в графическом редакторе Photoshop.

Источник: https://userologia.ru/kak-narisovat-tablicu-v-photoshop.html

Создаем прайс-таблицу в Photoshop

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

Софт: Adobe Photoshop CS6
Сложность:Intermediate
Время: 1 час

Исходники к туториалу

Следующий исходник будет использоваться при создании урока

Шаг 1

Давайте начнем с создания нового файла (Command / Ctrl + N) размером 800 пикселей × 600 пикселей.

Шаг 2

Добавляем корректирующий слой Adjustment Layer с цветом #f7f8eb, который будет использоваться как слой фона.

Шаг 3

Возьмите бесплатный узор со скачанного исходника PSDfreemium. Дважды щелкните на корректирующем слое Adjustment Layer,чтобы добавить Pattern Overlay, использую скачанный шаблон.

Шаг 4

Добавляем новый слой и заливаем его черным цветом. Нажмите Filter> Noise> Add Noise.

Шаг 5

На панели слоев установите его режим наложения Screen.

Шаг 6

Нарисуйте прямоугольник с закругленными углами с радиусом 10 пикселей. Установите для заливки светло-голубой цвет без обводки.

Шаг 7

Дважды нажмите на слое, чтобы добавить к слою Layer Style. Применяем обводку и Inner Shadow, используя следующие параметры.

Шаг 8

Копируем форму и изменяем ее цвет. Добавляем прямоугольник к нижней части и устанавливаем для него режим Subtract Теперь у нас есть поле для заголовка.

Шаг 9

Добавляем Stroke, Inner Glow и Gradient Overlay, используя следующие параметры.

Ниже вы можете увидеть результат.

Шаг 10

Добавляем названия. Применяем к тексту Drop Shadow.

Шаг 11

Добавляем текст серого цвета с ценой. Применяем Inner Shadow и Drop Shadow, чтобы добавить эффект Emboss.

Ниже вы можете увидеть разницу до и после добавления стилей Layer Styles.

Шаг 12

Добавить еще информацию ниже текста с ценой.

Шаг 13

Дублируем изначальную таблицу и устанавливаем цвет # f0f0f0. На вершину верхнего прямоугольника добавляем круг и выбираем режим Subtract.

Шаг 14

Добавить стили слоя Stroke, Inner Glow и Gradient Overlay.

Шаг 15

В верху верхней части формы добавляем новый слой и заливаем его белым цветом. Нажимаем Command/Ctrl + Alt + G , чтобы преобразовать слов в обтравочную маску. Под формой создайте новый слой и залейте его черным цветом, чтобы таким образом добавить тень к форме.

Шаг 16

Добавляем список с необходимого текста, используя инструмент Type tool.

Шаг 17

Между каждым элементом списка добавляем линию размером 1 пиксель.

Шаг 18

Убедитесь, что линии по прежнему выбраны, нажмите кнопку More Options, а затем измените опцию Stroke, выбрав пунктирную линию.

Шаг 19

Добавляем маску слоя к слою с линиями, и закрасьте левые и правые края черным цветом, чтобы создать плавный переход.

Шаг 20

Нарисуйте прямоугольник с закругленными краями с цветом # a7bed5.

Шаг 21

Добавляем стили слоя Stroke, Inner Glow и Gradient Overlay.

Шаг 22

Дублируем кнопку и помещаем копию за оригинальным слоем. Смещаем копию на несколько пикселей вниз.

Шаг 23

Используйте те же стили слоя, но на этот раз нужно увеличить Gradient Overlay Opacity, чтобы сделать форму его более темной.

Мы также добавляем Drop Shadow, чтобы добавить мягкие тени вокруг кнопки.

Кнопка будет иметь следующий вид.

Шаг 24

Добавляем текст с белой тенью (Drop Shadow ).

Шаг 25

Выберите все слои прайс-таблицы и нажмите Command/Ctrl + G, чтобы объединить их в группу. Дублируйте группу два раза.

Шаг 26

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

Шаг 27

Мы хотим выделить одну из таблиц. Размещаем ее немного выше остальных.

Шаг 28

Мы также хотим, чтобы убедиться, что элементы списка все выравнивается.

Шаг 29

Переставляем кнопку в соответствующую позицию таблицы.

Шаг 30

Изменяем размеры базовой формы, чтобы сделать таблицу выше.

Шаг 31

Добавить несколько элементов списка.

Шаг 32

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

Шаг 33

Ниже вы можете видеть результат до и после редактирования формы.

Шаг 34

Для того, чтобы добавить к таблице эффект того, что она размещена выше остальных, добавляем к ней тени. Удерживая Command / Ctrl. нажимаем на форме таблицы, чтобы создать выделение.

Шаг 35

Создайте новый слой и заполните выделение черным. Смягчить его, добавив Gaussian Blur.

Шаг 36

Уменьшите непрозрачность слоя.

Шаг 37

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

Шаг 38

Нажмите Command / Ctrl + T, а затем нажмите кнопку Warp. Доя его режима выберите Arch.

Шаг 39

Поверните искривленную линию и разметите ее, как показано на скриншоте ниже.

Шаг 40

Уменьшите его непрозрачность.

Шаг 41

К другой стороне тоже добавляем тень.

Шаг 42

Удерживая Command / Ctrl создайте выделение нижних таблиц. Разметите слои с тенями в группе слоев. Нажмите кнопку Add Layer Mask, чтобы добавить маску слоя к слоям группы.

Шаг 43

Чтобы создать контраст между таблицами, изменяем цвет верхней. Изменяем цвет названия на оранжевый. Чтобы цвета нормально сочетались, нужно также изменить настройки стилей слоя Layer Styles.

Шаг 44

Изменить цвет названия на белый и тень на черный.

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

Источник: http://www.dejurka.ru/tutorial/pricing_table/