Как посмотреть отступы в фотошопе
Gtalk.kz
Наверстываю упущенное …
8 полезностей в Photoshop для быстрой верстки сайта
Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.
Конечно же, при частой верстке сайтов у вас будет оттачиваться мастерство, и с опытом приходят свои наработки. У каждого свои фишки и плюшки, но возможно мои советы помогут вам, хотя некоторые из них очевидны, но все же, возможно кто-то не знал. В первую, очередь данная статья будет полезна начинающим верстальщикам.
Не будет тянуть кота за хвост, и начнем, пожалуй 😐
Горячие клавиши Фотошопа.
Горячие клавиши в любой программе уменьшают ваше драгоценное время. Поэтому запоминайте их. Чтобы Вам было легче, посмотрите основные полезные горячие клавиши.
Если Вам этого мало, то наберите в 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 в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.
Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.
Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.
На десерт сегодня девушка читает rap 
Форматирование абзацев
Форматирование абзацев
В начале набора каждая строка представляет собой отдельный абзац. В типе абзаца каждый абзац может состоять из нескольких строк в зависимости от размеров ограничительной рамки.
Для настройки параметров форматирования одного или нескольких абзацев (или для всех абзацев слоя) можно выделить их и воспользоваться панелью «Абзац».
Обзор панели «Абзац»
Для задания числовых значений параметров на панели «Абзац» можно воспользоваться стрелками вверх и вниз или ввести значение непосредственно в текстовом поле. После непосредственного изменения значения нажмите клавишу «Ввод» («Return»), чтобы сохранить значение, «Shift» + «Ввод» («Shift» + «Return»), чтобы сохранить и выделить его, или «Tab», чтобы сохранить значение и перейти к следующему полю панели.
A. Выравнивание и выключка B. Отступ слева C. Отступ слева первой строки D. Отбивка перед абзацем E. Расстановка переносов F. Отступ справа G. Отбивка после абзаца
В меню панели «Абзац» можно получить доступ к дополнительным командам и параметрам. Чтобы воспользоваться этим меню, щелкните треугольник в правом верхнем углу панели.
Задание выравнивания
Выравнивание текста производится к одному из краев абзаца (для горизонтального текста — влево, по центру или вправо, для вертикального — вверх, по центру или вниз). Параметры выравнивания доступны только для типа абзаца.
Для горизонтального текста это следующие параметры.
Выключка текста влево
Выравнивает текст влево, оставляя правый край абзаца неровным.
Выключка текста по центру
Выравнивает текст по центру, оставляя оба края абзаца неровными.
Выключка текста вправо
Выравнивает текст вправо, оставляя левый край абзаца неровным.
Для вертикального текста это следующие параметры.
Выключка текста вверх
Выравнивает текст по верхнему краю, оставляя нижний край абзаца неровным.
Выключка текста по центру
Выравнивает текст по центру, оставляя низ и верх абзаца неровными.
Выключка текста по нижнему краю
Выравнивает текст по нижнему краю, оставляя верхний край абзаца неровным.
Указание выключки для типа абзаца
Текст считается выключенным, если он выровнен с обеих сторон. Можно произвести выключку всего текста абзаца, включая и последнюю строку, или же всего текста абзаца за исключением последней строки. Параметры, которые выбираются для выключки абзаца, определяют горизонтальные интервалы внутри строк и эстетическую привлекательность текста на странице.
Параметры выключки доступны только для типа абзаца и определяют интервалы между словами, буквами и глифами. Параметры выключки строки применимы только к символам латиницы. К двухбайтовым символам китайских, японских и корейских шрифтов они не применяются.
Для горизонтального текста это следующие параметры.
Выключка последней строки влево
Выравнивает все строки, кроме последней, которая выравнивается по левой стороне.
Выключка последней строки по центру
Выравнивает все строки, кроме последней, которая выравнивается по центру.
Выключка последней строки вправо
Выравнивает все строки, кроме последней, которая выравнивается по правой стороне.
Выравнивает все строки, включая и последнюю, которая также выравнивается.
Для вертикального текста это следующие параметры.
Выключка последней строки по верхнему краю
Выравнивает все строки, кроме последней, которая выравнивается по верху.
Выключка последней строки по центру
Выравнивает все строки, кроме последней, которая выравнивается по центру.
Выключка последней строки по нижнему краю
Выравнивает все строки, кроме последней, которая выравнивается по нижней стороне.
Выравнивает все строки, включая и последнюю, которая также выравнивается.
Выключка текста (вправо, влево, по центру и полная) по контуру производится от курсора вставки и до конца контура.
Настройка межсловного и межбуквенного интервала при выключке текста
Возможна точная настройка интервалов между словами и буквами и изменение размера символов. Настройка интервалов особенно полезна для текста, выключенного по ширине, хотя возможна также и для невыровненного текста.
Интервал между словами, получающийся при сжатии пробелов. Значения параметра «Межсловный интервал» могут меняться от 0% до 1000%. При значении 100% между словами дополнительный интервал не добавляется.
Ширина символов (глиф — это любой символ шрифта). Значения могут меняться от 50 % до 200 %. При значении 100 % высота символов не масштабируется.
Параметры интервалов всегда применяются ко всему абзацу. Чтобы настроить интервалы для нескольких символов, а не для всего абзаца, воспользуйтесь параметром «Трекинг».
Отступы абзацев
Отступ задает величину интервала между текстом и ограничительной рамкой или линией, на которой размещается текст. Отступы действуют только для выделенных абзацев, поэтому для разных абзацев могут быть заданы разные отступы.
Отступ от левого края
Величина отступа от левого края абзаца. Для вертикального текста этот параметр управляет отступом от верхнего края абзаца.
Отступ от правого края
Величина отступа от правого края абзаца. Для вертикального текста этот параметр управляет отступом от нижнего края абзаца.
Отступ первой строки
Величина отступа первой строки текста абзаца. Для горизонтального текста отступ первой строки определяется относительно отступа от левого края, для вертикального текста — относительно отступа от верхнего края. Чтобы создать висячий отступ (выступ), введите отрицательное значение.
Настройка интервалов между абзацами
Задание висячей пунктуации для шрифтов латиницы
Параметр Висячая пунктуация управляет выравниванием знаков пунктуации для определенного абзаца. Если параметр «Висячая пунктуация европейских шрифтов» включен, то за пределы полей могут выступать следующие символы: одинарные и двойные кавычки, апострофы, запятые, точки, символы переноса, длинные и короткие тире, двоеточия и точки с запятой. Если за знаком пунктуации следует закрывающая кавычка, оба символа будут висячими.
Помните, что размер полей, на которые может выступать висячая пунктуация, определяется выравниванием абзаца. Для абзацев, выключенных влево, символы пунктуации «висят» слева, а для выключенных вправо — справа. Для абзацев, выключенных по верхней или нижней границе, знаки пунктуации «висят» сверху и снизу соответственно. Для абзацев, выровненных по центру или по ширине, символы пунктуации «висят» с обеих сторон.
При выборе параметра «Висячая пунктуация европейских шрифтов» двухбайтовые символы пунктуации в китайских, японских и корейских шрифтах «висеть» не будут. Вместо этого параметра следует использовать либо пункт «Стандартный бурасагари», либо «Строгий бурасагари». Эти пункты доступны только в том случае, если выбран параметр «Показывать параметры азиатского текста» в диалоговом окне «Параметры шрифтов».
Настройка автоматической расстановки переносов
Параметры, которые выбираются для расстановки переносов в абзаце, влияют на горизонтальные интервалы внутри строки и на эстетическую привлекательность текста на странице. Параметры расстановки переносов определяют возможность и способ переноса слов.
В словах длиннее, чем _ букв
Указывает минимальное число символов в переносимых словах.
После первых _ букв и перед последними _ буквами
Указывает минимальное число символов в начале и в конце слова, которые можно разбивать переносом. Например, если указать для этих параметров значение 3, то слово aromatic будет переноситься как aro‑ matic, но не ar‑ omatic или aromat‑ ic.
Указывает максимальное число строк подряд, которые могут быть перенесены.
Зона расстановки переносов
Указывает расстояние от правого края абзаца и ограничивает фрагмент строки, в которой переносы не допускаются. Установка значения 0 разрешает переносы в любом месте строки. Этот параметр применяется только при использовании построчного компоновщика Adobe.
Расстановка переносов в словах, набранных заглавными буквами
Снимите этот флажок, чтобы предотвратить перенос слов, набранных прописными буквами.
Параметры переноса применяются только к символам латиницы. На двухбайтовые символы китайских, японских и корейских шрифтов эти настройки влияния не оказывают.
Предотвращение разрыва слов
Можно предотвратить появление разрыва в словах на конце строк — например, в собственных именах или в словах, значение которых меняется при добавлении дефиса. Также можно обеспечить неразрывное написание нескольких слов или групп слов, например инициалов и фамилии.
Если применить команду «Без разрыва/Без переносов» к слишком большому количеству смежных символов, то текст может перейти на другую строку без переноса в середине какого-либо слова. Однако, если применить команду «Без разрыва/Без переносов» к нескольким строкам текста, то текст не отобразится.
Методы компоновки
Внешний вид текста на странице определяется результатом комплексного взаимодействия процессов, совокупно называемых компоновкой. Используя указанные межсловный интервал, межбуквенный интервал, межглифовый интервал и параметры расстановки переносов, приложения Adobe оценивают возможные способы разбиения текста на строки и выбирают оптимальный вариант в соответствии с указанными параметрами.
Можно выбрать один из двух методов компоновки: многострочный компоновщик Adobe и построчный компоновщик Adobe. Оба метода определяют все возможные способы расстановки переносов в абзаце, а затем выбирают тот, который оптимально соответствует указанным параметрам расстановки переносов и выравнивания. Метод компоновки оказывает влияние только на выделенные абзацы, поэтому можно использовать разные методы компоновки для разных абзацев.
Многострочный компоновщик анализирует количество точек разрыва в диапазоне строк, в результате чего может оптимизировать предыдущие строки в абзаце, чтобы исключить появление в следующих строках разрывов, которые особенно портят внешний вид текста.
Многострочный компоновщик основывается при компоновке на определении возможных точек разрыва и присвоении им «штрафных очков» в соответствии со следующими принципами.
Для текста, выровненного по правому или левому краю или по центру, являются предпочтительными и приносят наименьшее количество «штрафных очков» строки, заканчивающиеся ближе к правому краю страницы.
Для выровненного текста наибольшую важность представляет равномерность межбуквенного и межсловного интервалов.
Перенос по возможности избегается.
Построчный компоновщик предлагает традиционный подход к компоновке текста строка за строкой. Этот параметр полезен, когда необходимо вручную контролировать разбиение текста на строки. Построчный компоновщик при анализе точек разрыва основывается на следующих принципах.
Предпочтение отдается более длинным строкам.
В выровненном тексте предпочтительнее использовать вместо переносов уменьшение или увеличение межсловного интервала.
В невыровненном тексте предпочтительнее использовать переносы вместо увеличения или уменьшения межбуквенного интервала.
Если настройка интервалов необходима, предпочтение отдается сжатию, а не расширению.
Метод компоновки можно выбрать в меню палитры «Абзац». Чтобы применить тот или иной метод ко всем абзацам, сначала выделите текстовый объект. Чтобы применить метод только к текущему абзацу, установите курсор в нужный абзац.
Стили абзаца
Стиль абзаца включает в себя атрибуты форматирования как символов, так и абзацев и может быть применен к одному или нескольким абзацам. Можно создать стили абзаца и затем применить их позже.
Выберите Окно > Стили абзацев, чтобы открыть палитру «Стили абзацев». По умолчанию каждый вновь созданный документ содержит стиль «Основной абзац», который автоматически применяется к вводимому тексту. Этот стиль можно изменить, но переименовать или удалить нельзя. Стили, созданные пользователем, можно переименовывать и удалять. Можно также выбрать другой стиль в качестве стиля, применяемого к тексту по умолчанию.
Стили шрифтов являются иерархическими: параметры, указанные вручную, переопределяют любые примененные стили символов, которые в свою очередь заменяют примененные стили абзацев. Этот иерархический подход объединяет эффективность использования стилей и гибкость при настройке проектов.
См. видеообзор Джулианны Кост (Julieanne Kost) Стили абзаца и символа в Photoshop CS6.
(Только Creative Cloud) Можно указать стили символов и абзацев в качестве стилей типов по умолчанию. Дополнительную информацию см. в разделе Определение стилей типов по умолчанию | Только Creative Cloud.
Создание стиля абзаца
Редактирование стиля абзаца
Дважды щелкните существующие стили, чтобы изменить их и обновить весь связанный текст в активном документе. Если изменить форматирование стиля, текст, к которому он был применен, будет обновлен в соответствии с новым форматом.
Чтобы изменить стиль абзаца, выполните следующие действия.
Чтобы при задании параметра «Цвет символов» в диалоговом окне «Параметры стиля символов» создать новый цвет, дважды щелкните поле заливки или обводки.
Это блог
Эта статья для студентов базового и продвинутого курсов по вёрстке в HTML Academy.
Один из основных критериев качества вашего проекта — соответствие макету. Макет — это план проекта, и важно ему следовать. Почему? Представьте, что архитектор тщательно спланировал пространство небольшой квартиры и сделал ванную комнату ровно такой, чтобы в неё поместились ванна, раковина, унитаз и стиральная машина. А строитель решил, что следовать проекту не обязательно, и подвинул стену на 20 см. И вот уже либо стиралка не входит, либо вместо ванны придётся ставить душ.
Дизайнер спланировал пространство страницы и взаимодействие пользователя с сайтом. Теперь вам нужно это сверстать. Как? Стилизуйте небольшие компоненты, собирайте из них блоки побольше, потом ещё больше, а потом вся страница окажется готовой. Чтобы построить дом, нужно сделать кирпичи.
Я обычно стилизую страницу поблочно. Беру какую-нибудь кнопку и стилизую её до полного соответствия макету. Потом поле формы с подписью. Из полей и кнопок собираю форму. Стилизую шапку и футер. Вот уже и страница готова.
Начните с текста
Я имею в виду не только текстовые блоки. Текст везде: в меню, на кнопках, подписи к полям, подсказки в полях, подписи к картинкам, заголовки. Текст — основа вашей вёрстки. Если вы оставите параметры текста на потом, можете попасть в ловушку.
Взгляните на эти две кнопки:
Как узнать параметры текста в Фотошопе
Как узнать, каким шрифтом набран текст, какого он размера и начертания? Выберите инструмент «Text» (нажмите латинскую T на клавиатуре) и кликните на текст, который вас интересует. Текст выделится рамкой, а в верхней панели покажутся параметры этого текста:
Здесь видно шрифт — «Open Sans», начертание — «Regular» и размер — 18px. Если у вас не установлен шрифт из макета, то Фотошоп при клике заменит шрифт на похожий. Будьте внимательны. Перед этим он покажет предупреждение, мол, шрифта такого-то нет:
Про межстрочное расстояние вам расскажет иконка папки на панели текста:
Она откроет окошко с параметрами текста, там и написан интерлиньяж:
Приготовьте блоки
После текста поработайте с цветами, рамками и полями. Чтобы узнать цвет фона или рамки блока, используйте в Фотошопе инструмент «Color Picker». По умолчанию у него нет горячей клавиши, но можно настроить. Не берите пипеткой цвет текста, вы можете попасть в крайний пиксель, у которого цвет чуть слабее из-за сглаживания. Берите цвет из той же панели, откуда взяли начертание и размер:
Для Фотошопа есть плагин Size Marks, который позволяет на месте выделения оставить пометку с размером:
Я в таких случаях на глаз вычитаю из измеренного половину расстояния между строк (не межстрочного расстояния, а расстояния между низом одной строки и верхом следующей), и для более точного измерения иду в браузер и накладываю макет на вёрстку.
Наложите макет на вёрстку
Есть плагины для браузера, которые накладывают картинку поверх страницы. Я использую PerfectPixel. Экспортируйте макет из Фотошопа в формат PNG, установите расширение и наложите PNG поверх страницы. Можно менять прозрачность и двигать картинку.
Нажмите на замок, и картинка не будет ловить клики. Можно тыкать на элементы страницы как обычно. Меняйте отступы в веб-инспекторе и двигайте макет, пока не попадёте. С опытом научитесь определять размеры точнее и будете в инспекторе только на несколько пикселей двигать.
Значения можно менять стрелками. Нажали на значение, там 65px. Жмёте вниз — число уменьшается, вверх — увеличивается. С зажатым шифтом шаг изменений не 1, а 10. Когда подобрали правильное значение, пропишите его в ваш CSS.
Методом наложения можно определять вообще всё: шрифт, межстрочное расстояние, отступы, рамки. Можно сверстать весь макет по PNG без Фотошопа. Но зачем, если большую часть параметров можно сразу точно измерить?
Насколько пиксель должен быть перфект
Если дизайнер нарисовал три как будто одинаковых кнопки, две из них высотой 40px и одна 39px, то у него дрогнула рука. Делайте все кнопки одной высоты.
Если расстояние между элементами 51px, можно сделать 50. Большие расстояния я округляю до 5. Большие — это как раз за 50. Средние позволяю себе округлять до чётных. Из 31 сделаю 32. Размеры шрифтов не округляю и вам не советую. Буквы при изменении кегля меняются не пропорционально. Числа меньше 28 тоже стараюсь не округлять: при таких размерах обычно каждый пиксель важен.
Самое главное: сделайте, чтобы каждый блок походил на свой портрет в макете. Когда вы округлили пару-тройку отступов, и поставили макет в левый верхний угол, что-то внизу страницы может не совпасть с макетом. Это не страшно. Главное, чтобы каждый блок попадал в макет с допустимой погрешностью, если макет на него надвинуть.
Соберите страницу из блоков
Включите направляющие хоткеем Ctrl+; ( ⌘+; в Маке). Разберитесь, как устроена сетка, померяйте расстояние между блоками, отступы от границ страницы до блоков.
Из полей и кнопок соберите форму, из ссылок соберите меню, крупные блоки расставьте по сетке, добавьте отступы. Ваша страница готова, а вы — супергерой!
Сверстать по макету — это просто и не больно, если у вас хорошая стратегия и если вы умеете пользоваться инструментами. Двигайтесь от меньшего к большему, мыслите блоками. Измеряйте всё что можно в Фотошопе, а что нельзя — подгоняйте в браузере. Используйте горячие клавиши. Вот самые главные:
Подписывайтесь на телеграм-канал про фронтенд, дизайн, работу и жизнь.