Как задать расстояние между объектами в фотошопе
8 полезностей в Photoshop для быстрой верстки сайта
Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.
Конечно же, при частой верстке сайтов у вас будет оттачиваться мастерство, и с опытом приходят свои наработки. У каждого свои фишки и плюшки, но возможно мои советы помогут вам, хотя некоторые из них очевидны, но все же, возможно кто-то не знал. В первую, очередь данная статья будет полезна начинающим верстальщикам.
Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:
Горячие клавиши Фотошопа.
Горячие клавиши в любой программе уменьшают ваше драгоценное время. Поэтому запоминайте их. Чтобы Вам было легче, посмотрите основные полезные горячие клавиши.
Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.
Необходимый набор.
У многих блогов, например как у моего, есть превьюшки для статей. И они все как один на лицо по размерам. И Вам нет необходимости постоянно в фотошопе создавать набор из нужных размеров.
Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».
Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.
Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.
Расстояние и размеры элементов в фотошопе.
Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.
Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок. Смотрим во вкладку «Инфо» в Photoshop.
Таким же способом определяем расстояние между блоками.
Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.
Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.
Цвет в фотошопе.
Узнать цвет очень просто.
Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты» появится выбранный цвет. Кликайте по квадрату с цветом.
И копируйте цвет в нужном формате.
Второй способ. С помощью специальных программ. Например, Pixie. Для этого необходимо навести на объект и записать нужный формат цвета.
Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.
Рабочая среда в фотошопе.
При написании разметки сайта, когда уже фотошоп нужен лишь чтобы смотреть размеры и как должен выглядить сайт, многие блоки в фотошопе нам, в принципе, не нужны. Можно и нужно их убрать. Для этого давайте создадим новую рабочую среду в photoshop’e.
Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно ->Уберите галочку.
Нажмите на стрелочки в правом верхнем углу (показано на картинке) и выберите строку «Новая рабочая среда…». Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Очень удобно.
Прозрачность слоев.
Иногда при сохранении слоя конечная картинка отличается от оригинала своей прозрачностью, поэтому всегда обращаем внимание на непрозрачность и заливку слоя.
При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).
Выбор необходимого слоя.
Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:
Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.
Оптимизированное сохранение изображения
Именно так я решил назвать этот пункт, так как необходимо не просто сохранить файл, но и оптимизировать его.
Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».
Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.
Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.
А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. .
Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.
Подскажите, как Photoshop можно точно измерить расстояния между элементами. Стоит задача попиксельной верстки, поэтому нужна точность.
Смотрел в интернете примеры как верстают, такое чувство что на глаз отмеряют, т.е. инструмент "прямая" берут и смотрят приблизительное расстояние. Это нормально?
- Вопрос задан более трёх лет назад
- 23084 просмотра
Простой 1 комментарий
Скачай Adobe XD (что-то около 250Мб) и все твои проблемы решатся. Выделяешь объект, зажимаешь alt и вуаля.
Если фотошоп не совсем старый, то там есть Extras. При зажатом CMD (или Ctrl) они показывают расстояния до ближайших элементов в макете.
Если у вас версии фотошопа 2015 и ниже, то поставьте плагин guideguide. На более новые что-то подобное.
Плагин автоматически расставляет направляющие под заданные вами параметры. И уже по такой сетке будет удобно работать.
Senseich, тем, что вы не в ручную будете это делать. Просто я так вас поняла, что сетку вам не предоставили, но зная параметры, ее можно сделать.
Включите пиксельную сетку в меню «Просмотр» - «Показать» - «Пиксельная сетка».
При достаточном увеличении картинки она будет отображаться.
В меню настроек (CTRL+K) в пункте «Единицы измерения и линейки» выставьте для линейки «Пиксели». Тогда можно будет ориентироваться по линейке (CTRL+R, если выключена). И прямоугольником можно измерять расстояние.
На глаз и отмеряют, раскидывают блоки по расположению, потом нужен плагин пискельперфекта для браузера, накладываете картинку и начинаете подправлять размеры.
3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D-функциями, рекомендуется ознакомиться с новой коллекцией Adobe Substance 3D, которая представляет собой новое поколение 3D-инструментов от Adobe.
Дополнительную информацию о прекращении поддержки 3D-функций Photoshop можно найти здесь: Photoshop 3D | Распространенные вопросы об упраздненных 3D-функциях.
В Photoshop CS6 функциональные возможности 3D были доступны в Photoshop Extended. Все возможности Photoshop Extended доступны в Photoshop. Photoshop не имеет специальной версии Extended.
С помощью функции «Измерения» Photoshop можно измерять размеры любых областей, используя инструмент «Линейка» или инструмент выделения, включая области неправильной формы, выбранные инструментами «Лассо», «Быстрый выбор» или «Волшебная палочка». Можно также вычислять высоту, ширину, площадь и периметр одного или нескольких изображений. Данные измерений сохраняются на панели «Журнал замеров». Столбцы палитры «Журнал замеров» можно настроить, данные в пределах столбца можно отсортировать, а также экспортировать их из журнала в текстовый файл Unicode с разделителями табуляцией.
Шкала измерений
Установка шкалы измерений задает определенное число пикселов в изображении, равное целому количеству единиц измерения шкалы, например дюймам, миллиметрам или микронам. После создания шкалы можно измерять области и принимать результаты и журнал расчетов в выбранных единицах измерения шкалы. Можно создать несколько стилей шкал измерения, однако одновременно к документу может применяться только одна шкала.
Маркеры масштаба
Для рендеринга шкалы измерения на изображении можно размещать маркеры масштаба. Маркеры масштаба могу отображаться с заголовком, соответствующим единицам измерения шкалы измерения, или без.
Для настройки шкалы измерений документа используйте инструмент «Линейка». Для часто используемых шкал измерения можно создавать стили шкал измерения. Стили добавляются с помощью подменю «Изображение» > «Анализ» > «Задать шкалу измерений». Текущая шкала измерений документа проверяется в этом подменю и отображается на панели «Инфо».
Настройка шкалы измерений для файлов DICOM происходит автоматически. См. раздел Сведения о файлах формата DICOM.
Для возврата к шкале измерений по умолчанию (1 пиксел = 1 пиксел) выберите команду меню «Изображение» > «Анализ» > «Задать шкалу измерений» > «По умолчанию».
Установка шкалы измерений
Выберите команду меню «Изображение» > «Анализ» > «Задать шкалу измерений» > «Пользовательский. ». Автоматически выбирается инструмент «Линейка». Перетащите этот инструмент для измерения расстояния между пикселами изображения или введите значение в текстовое поле «Длина в пикселах». После закрытия диалогового окна «Шкала измерений» восстанавливаются текущие настройки инструмента.
Введите значения «Логическая длина» и «Логические единицы», которые необходимо установить равными значению поля «Длина в пикселах».
Например, если значение «Длина в пикселах» равно 50 и необходимо установить шкалу 50 пикс/мкм, введите «1» в поле «Длина в пикселах» и выберите микроны в поле «Логические единицы».
Для отображения масштаба на панели «Инфо» выберите «Параметры панели» в меню панели , а затем выберите «Шкала измерений» в области «Информация о статусе».
Для отображения шкалы измерения внизу окна документа выберите «Показать» > «Шкала измерения» в меню окна документа.
Создание стиля шкалы измерения
Выберите команду меню «Изображение» > «Анализ» > «Задать шкалу измерений» > «Пользовательский. ».
Удаление стиля шкалы измерения
Выберите команду меню «Изображение» > «Анализ» > «Задать шкалу измерений» > «Пользовательский. ».
Маркеры шкалы измерений отображают масштаб измерения, используемый в документе. Установите шкалу измерений для документа до создания маркера масштаба. Можно устанавливать длину маркера в логических единицах, добавлять текст заголовка, уточняющий длину, и устанавливать черный или белый цвет маркера и заголовка.
Создание маркера масштаба
Выберите команду меню «Изображение» > «Анализ» > «Разместить маркер масштаба».
Введите значение для установки длины маркера масштаба. Длина маркера в пикселах зависит от шкалы измерения, которая в текущий момент выбрана для конкретного документа.
Выберите шрифт отображаемого текста.
Выберите размер шрифта отображаемого текста.
Выберите этот параметр для отображения логической длины и единиц для маркера масштаба.
Отображает заголовок выше или ниже маркера масштаба.
Устанавливает черный или белый цвет маркера и заголовка.
Маркер масштаба помещается в нижнем левом углу изображения. Маркер добавляет группу слоев в документ, содержащий текстовый (если выбран параметр «Показать текст») и графический слой. Для перемещения маркера масштаба можно использовать инструмент «Перемещение», а для редактирования заголовка и изменения размера текста, шрифта и цвета — инструмент «Текст».
Добавление или замена маркеров масштаба
В документ можно поместить несколько маркеров масштаба или заменить уже существующие в нем маркеры.
Дополнительные маркеры помещаются на изображении в ту же самую позицию и могут перекрывать друг друга в зависимости от их длины. Для просмотра нижележащих маркеров отключите набор слоев маркеров масштаба.
Выберите команду меню «Изображение» > «Анализ» > «Разместить маркер масштаба».
Удаление маркера масштаба
На панели «Слои» выберите группу слоев «Маркер шкалы измерений», относящуюся к маркеру масштаба, который необходимо удалить.
Щелкните правой кнопкой мыши группу слоев и выберите из контекстного меню пункт «Удалить группу» либо нажмите кнопку «Удалить слой».
Измерения можно выполнять с помощью инструментов выделения Photoshop: инструмента «Линейка» или инструмента «Счетчик». Выберите инструмент измерения, который соответствует типу данных, записываемых в журнал замеров.
Создайте область выделения для измерения значений, например высоты, ширины, периметра, площади или оттенка пикселов. Одновременно можно измерять одну или несколько областей выделения.
Для измерения линейного расстояния и угла нарисуйте линию с помощью инструмента «Линейка».
Для подсчета элементов в изображении используйте инструмент «Счетчик», а затем запишите число подсчитанных элементов. См. раздел Подсчет объектов на изображении.
За один раз можно получить один или несколько результатов обработки данных. Выбранные результаты обработки данных содержат информацию, записываемую в журнал измерений. Результаты обработки данных соответствуют типу инструмента, с помощью которого было проведено измерение. Площадь, периметр, высота и ширина являются результатами обработки данных, получаемых инструментами выделения. Длина и угол — это результаты обработки данных, получаемые с помощью инструмента «Линейка». Для ускорения рабочего процесса можно создавать и записывать наборы результатов обработки данных определенного типа измерений.
В Adobe Photoshop имеется простой и действенный способ перемещений объектов на точное расстояние. Причём мы можем не только перемещать объект по холсту на заданное расстояние, но и перемещать с копированием. Всё это можно проделать с помощью инструмента «Свободное трансформирование» (Free Transform).
Например, у меня имеется объект — слой с небольшим изображением ёлочного шара на прозрачном фоне. Мне необходимо создать орнамент из множества клонов этой игрушки, причём, таким образом, чтобы клоны соприкасались:
Для выполнения этой задачи я воспользуюсь инструментом «Свободное трансформирование» (Free Transform).
Для начала, активирую инструмент, нажав комбинацию горячих клавиш Ctrl+T, после чего вокруг шара появилась рамка. Кроме того, открылись опции трансформации в панели Параметров:
Мне необходимо переместить шар вправо точно на ширину шара, но для этого я должен узнать ширину шара в пикселях. В этом мне поможет панель Инфо (Info), которая открывается нажатием клавиши F8.
Т.к. на данный момент активен инструмент «Свободное трансформирование», в панели Инфо будет показан размер рамки трансформирования, а этот размер равен габаритам шара:
Итак, ширина равна 65 пикселей. Теперь мне осталось ввести это значение в соответствующее поле в панели Параметров, не забудьте перед вводом нажать на значок треугольника. Шар сразу после ввода передвинется на 65 пикселей:
Для принятия действия инструмента нажимаем Enter, рамка исчезает, шар остаётся на новом месте.
Но мне не нужно перемещать сам слой, мне необходимо переместить клон слоя. В этом мне помогут опции «Свободной трансформации».
Отменяю действие, нажав Ctrl+Z. Шар занял начальную позицию.
Примечание. Т.к. в дальнейшем у меня появиться много клонов слоя с шаром, для того, чтобы в панели слоёв у меня был порядок, целесообразно поместить слой в группу, нажав Ctrl+G. На данный момент во вновь созданной группе один слой, но в дальнейшем их будет несколько. Затем в панели слоёв нажимаем на слой, чтобы он вновь стал активным.
Продолжим. У инструмента «Свободное трансформирование» имеются две очень важные опции — повторение последнего трансформирования (запускается клавишами Ctrl+Shift+T) и создание клона с повторением последнего трансформирования, но трансформируется не исходный объект, а клон. Эта опция запускается комбинацией клавиш Ctrl+Shift+Alt+T. Ей мы и воспользуемся.
Нажимаем Ctrl+Shift+Alt+T, после чего в панели слоёв в группе появится новый слой, который будет перемещён вправо на 65 пикселей:
Повторное нажатие Ctrl+Shift+Alt+T будет применено к активному слою, а активным у нас является слой с клоном, расположенным правее исходного изображения на 65 пикселей. Таким образом после повторного нажатия у нас появится второй клон:
Далее нам необходимо просто нажать комбинацию столько раз, сколько нам нужно шаров. Для удобства, можно постоянно удерживать клавиши Ctrl+Shift+Alt и нажимать только одну клавишу T.
Цель достигнута. При желании, все вышеописанные действия можно записать в Action Photoshop. Подробности здесь.
Одно из значимых нововведений в Photoshop CC 2014, которое будет полезно многим пользователям и особенно веб-дизайнерам — это умные (смарт) направляющие. Они дают пользователю возможность динамически определять расстояния между границами объектов и краями документа.
Кроме того, обычные быстрые направляющие по умолчанию теперь активны при запуске программы.
Измерение расстояния между элементами на разных слоях и и границами документа
Быстрые направляющие показывают расстояние между векторными и пиксельными фигурами, находящимися на разных слоях, кроме того, можно узнать расстояние от края фигуры до края всего документа.
Для того, чтобы определить это расстояние, в панели слоёв выберите слой с нужной фигурой, возьмите инструмент «Перемещение» (Move Tool) и наведите курсор на фигуру другого слоя или на фоновый слой. На рисунке активным является слой с оранжевым квадратом:
Если Вы при этом нажмёте на клавиши клавиатурных стрелки, то фигура будет передвигаться (одно нажатие — один пиксель), а расстояние на указателях изменяться соответственно перемещению.
Копирование объектов на заданное расстояние при помощи умных направляющих
Как известно, слой можно скопировать методом перемещения, перетаскивая слой инструментом «Перемещение» (Move Tool) при зажатой клавише Alt.
Теперь мы можем видеть, на какое расстояние мы перемещаем копию. Кроме того, программа показывает не только расстояние, но и продолжение краёв объектов, а также, габаритные рамки. Теперь точное позиционирование копий существенно облегчено:
Множественное копирование объекта на заданное расстояние
Распространённая задача в Photoshop, особенно для веб-дизайнеров — копирование объекта несколько раз на одно и то же расстояние для создания, например, решётки.
Новые смарт-направляющие существенно упрощают эту задачу, т.к. перемещение объекта на одно и то же расстояние автоматизируется.
Выполнения задачи состоит из двух этапов. Сначала инструментом «Перемещение», при зажатой Alt, мы делаем первую копию объекта, перетаскивая его, скажем, на двадцать пикселей вправо. Photoshop запоминает это действие. Далее мы тащим копию вправо, и, когда расстояние между копиями приближается к двадцати пикселям, Photoshop СС 2014 автоматически выставляет новую копию на расстояние 20 пикселей и при этом отображает расстояние между всеми копиями. Теперь надо отпустить клавишу мыши и повторить копирование:
Вы можете изменить цвет смарт-направляющих через вкладку Редактирование —> Настройки —> Направляющие, сетки и фрагменты (Edit —> Preferences —> Guides, Grids & Slices). Отображение направляющих отключается клавишами Ctrl+H.
Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]
Читайте также: