Как вставить таблицу в фотошопе. Изменение рамки с помощью инструмента «Кисть». Как сделают люди со знаниями

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

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

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

Естественно, мы, как профессионалы пойдем по второму пути.

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

Для точной установки направляющей линии необходимо пройти в меню «Просмотр» , найти там пункт «Новая направляющая» , задать значение отступа и ориентацию…

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

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

В открывшемся окне в выпадающем списке выбираем «Меню программы», ищем пункт «Новая направляющая» в меню «Просмотр» , кликаем по полю рядом с ним и зажимаем нужную комбинацию так, как если бы мы ее уже применили. То есть зажимаем, к примеру, CTRL , а затем «/ ». Именно такую комбинацию я и выбрал.

По завершению нажимаем «Принять» и ОК .

Затем нажимаем CTRL+/ , и в открывшемся окне прописываем значение для первой направляющей. Я хочу задать отступ в 10 пикселей от края документа.



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

Если у вас до сих пор не включены линейки, то активируйте их сочетанием клавиш CTRL+R .

У меня получилась вот такая сетка:

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

Рисовать (ну, ладно, чертить) таблицу мы будем инструментом «Линия» , он имеет наиболее гибкие настройки.

Настраиваем толщину линии.

Выбираем цвет заливки и штриха (штрих выключаем).

И теперь, на только что созданном слое рисуем таблицу.

Делается это так:

Зажимаем клавишу SHIFT (если не зажать, то каждая линия будет создаваться на новом слое), ставим курсор в нужное место (сами выберите, откуда начать) и проводим линию.

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

Таким же образом рисуем остальные линии. По завершению работы направляющие можно отключить сочетанием клавиш CTRL+H , а если они понадобятся, то снова включить этой же комбинацией.
Наша таблица:

Данный способ создания таблиц в Фотошопе поможет вам значительно сэкономить время.

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

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

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

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


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


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


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


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



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


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


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


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

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


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

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

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





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

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


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


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



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


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


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

Инструкция

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

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

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

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

Источники:

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

Умение подставить любой фон к фотографии подарит вам редкую возможность увидеть себя, своих друзей и других людей где угодно: на пляже, у Эйфелевой башни, в тропическом лесу или на крайнем севере.
Заменять фон на фотографии совсем не сложно. Если вы научитесь этому, перед вами откроется большой потенциал для творчества.

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

  • Adobe Photoshop

Инструкция

Следующий шаг к изменению - это отделение нужной от общего фона . Начинайте аккуратно вырезать свое изображение с Rectangular Lasso Tool, Pen Tool или быстрой маски. Pen Tool рекомендуется как очень удобный и простой способ выделять . Если вы случайно поставили новую точку на неверное место, достаточно нажать Backspace - это исправит . Кроме того, инструмент пера подразумевает создание векторной дуги, которая еще более четко выделит ваше изображение. Создав , щелкните на ней правой кнопкой мыши и скопируйте ее на новый слой с параметром сглаживания и без растушевки.

На этом фотомонтаж может быть закончен, но чаще всего у вашего фото и нового фонового изображения могут значительно различаться параметры и яркости, поэтому дополнительно отредактируйте эти параметры, чтобы изображение выглядело реалистично и красиво.
Откройте Levels и подтяните уровни вашей фотографии до состояния, близкого к гамме основного фона. То же самое сделайте в Hue\Saturation. Кроме того, можете отредактировать цветовую гамму в Color Balance и попробовать различные варианты смешивания слоев - Soft Light, Hard Light, Multiply, и другие. Дополнительно отретушируйте фотографию, сгладьте неровности с помощью Clone Stamp и фильтра Gaussian Blur, если это необходимо. Теперь ваш готов.

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

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

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

Как изменить фон в фотошопе? Сфотографировали себя на фоне стены в комнате, а хотелось бы на солнечном пляже или на Луне? 3 шаг. Если вы случайно поставили точку не туда,куда надо, жмем Backspace, затем нажимаем на последнюю точку, поставленную где надо, и далее продолжаем кликать как обычно. Также можно кликнуть по ненужной точке правой кнопкой и выбрать пункт “Удалить опорную точку”.

Источники:

  • как в фотошопе заменить фон фотографии

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

Инструкция

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

- таблица;
- строка;
- колонка.

Основные дополнительные атрибуты:
Border – граница;

Bordercolor – цвет рамки;
Width – ширина;
Height – высота.

Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого:








Содержимое 1-й ячейки Содержимое 2-й ячейки
Содержимое 3-й ячейки Содержимое 4-й ячейки

Картинку нужно прописывать после тега

. Если вставить изображение в первую ячейку таблицы, представленной выше, то получится:







Содержимое 2-й ячейки
Содержимое 3-й ячейки Содержимое 4-й ячейки

Дополнительные атрибуты:
Width – ширина;
Height – высота;
Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок;
Align – выравнивание по горизонтали;
Valign – выравнивание по вертикали;
Title – подпись к изображению.

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








Содержимое 2-й ячейки
Содержимое 3-й ячейки Содержимое 4-й ячейки

Дополнительные возможности изображений.

1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background="#номер цвета"" onMouseOut="this.style.background="#номер цвета""

2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""

3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):




// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

Function Carousel(){
if(document.getElementById){
for(i=0;i

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: