Верстка по psd макету: Как научится верстать из PSD макетов в html+css? — Хабр Q&A

Заказать верстку сайта из макета PSD/AI/Sketch

Любой веб-ресурс, независимо от его тематики, популярности и предназначения, лежит на спинах двух огромных китов с зычными именами: front-end и back-end.

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

Frontend разработка – цели и задачи

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

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

В своей работе фронтенд-разработчики используют так называемую «великую троицу» инструментов, а именно: HTML, CSS и JavaScript. HTML и CSS – это два языка, знание которых является обязательным для создания любых веб-ресурсов, от сайтов-визиток до интернет-магазинов. Они отвечают за создание разметки, наполнение контентом, визуализацию отдельных страниц. Их активно используют в работе верстальщики на этапе переноса страниц с макета. Знание JavaScript верстка сайтов не считает обязательным. А вот фронтендеры этот язык обязательно используют. В этом как раз и состоит отличие верстальщика от Front-end разработчика.

Что такое JavaScript?

JavaScript еще называют «языком скриптов», что, собственно, следует из его названия.

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

Все это – работа фронтенд разработчика. Глубина знаний в JS frontend позволяет решать самые различные задачи: от простых шаблонных действий пользователя до оригинальной анимации. Выпадающее окошко при наведении курсора мыши, появление всплывающих окон, различные таймеры, калькуляторы и пр. – эти активные элементы результат применения языка JavaScript. Если вы хотите увидеть их у себя на сайте, не забудьте сообщить об этом своему фронтендеру.

Фронтенд девелопер – сотрудник на расстоянии

Но кто же он, ваш идеальный frontend разработчик? Впервые вы могли с ним столкнуться на этапе создания сайта. Весь огромный объем работы, описанный выше, — его рук дело. Однако и после сдачи проекта вам не обойтись без его помощи.

Любой сайт – это живой организм, который растет, развивается, требует от вас новых «фишек», чтобы не отставать от конкурентов и соответствовать постоянно растущим запросам. Улучшать его и дополнять – задание для грамотного фронтенд девелопера. Обратите внимание, англоязычное словосочетание «frontend developer» очень четко описывает, чем занимается данный специалист: он не только создает, разрабатывает веб-ресурс, он его развивает.

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

Junnior, Middle, Senior – в чем различие?

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

• Junior
• Middle
• Senior.

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

Как заказать разработку и поддержку?

В команде студии Flamix есть опытные специалисты любого из трех квалификационных уровней. Вы можете прибегнуть к их помощи в вопросах доработки и поддержки вашего сайта на условиях почасовой оплаты, либо же заказать фронтенд с нуля, если ваш проект пребывает на стадии не воплощенной в жизнь идеи. Цена frontend услуг зависит от сложности вашего заказа, от типа сайта, сроков выполнения, наличия дополнительных услуг. При этом привязки к вашему региону у нас нет: frontend разработка сайта в Пензе, СПб или Москве будет стоить одинаково.

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

Pixel Perfect верстка. Что это такое и когда ее применяют

Pixel Perfect верстка — это особая техника создания структуры HTML-кода, которая позволяет сверстанному HTML-шаблону максимально точно совпадать с оригинальным макетом пиксель в пиксель. При наложении HTML-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.

Зачем нужна Pixel Perfect верстка

Представьте, дизайнер нарисовал вам красивый макет сайта в Figma. Он вам очень понравился, вы заплатили за работу и отдали дизайн верстальщику.

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

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

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

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

Как проверить верстку Pixel Perfect

Если вы ищете подрядчика, лучше на стадии техзадания уточнить требование работать Pixel Perfect. Проверить результат такой работы несложно. 

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

• Pixel Perfect для Firefox;
• Pixel Perfect под Google Chrome;
• WellDoneCode — кроссбраузерный.

Алгоритм работы примерно одинаков для всех плагинов:

1. Сохраните оригинальный PSD-макет в формате .png. Это можно сделать через Photoshop или прямо в Figma. 
2. Откройте сверстанный HTML-шаблон в браузере.
3. С помощью плагина наложите на него второй слой — свой макет в .png. 
4. Посмотрите и зафиксируйте разницу. 

Далее вы сможете исправить ошибки или поставить такую задачу верстальщику. 

Насколько точной должна быть попиксельная верстка

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

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

 Сегодня на смену этой технике приходит «Look & Feel» (Видеть и Чувствовать). В контексте веб-дизайна она означает то, как человек видит дизайн с точки зрения UI и как он чувствует его с точки зрения функциональности и интерактивности. 

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

Главные мысли

Новый макет направляющих в Photoshop CC

Старый способ добавления направляющих в Photoshop

Прежде чем мы узнаем все о новой функции макета направляющих, давайте быстро рассмотрим «старый способ» добавления направляющих. Традиционно мы начали бы с включения линеек Photoshop, перейдя в меню View в строке меню в верхней части экрана и выбрав Rulers :

.

Перейдите в меню «Вид» > «Линейки».

Это помещает линейки вдоль верхней и левой стороны документа:

Теперь линейки видны сверху и слева.

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

Перетаскивание вертикальной направляющей из линейки слева.

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

Перетаскивание горизонтальной направляющей из линейки вверху.

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

Новый вариант макета направляющей

Чтобы получить доступ к опции «Новый макет направляющей», перейдите в меню View в верхней части экрана и выберите Новый макет направляющей . Опять же, это доступно только в Photoshop CC:

.

Переход к просмотру > новый макет направляющей.

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

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

Диалоговое окно «Новый макет направляющей».

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

Компоновка направляющих по умолчанию плюс две исходные направляющие.

Очистить существующие направляющие

Чтобы удалить все предыдущие направляющие и оставить только новый макет направляющих, выберите параметр Очистить существующие направляющие в нижней части диалогового окна:

Выбор «Удалить существующие направляющие».

И теперь эти предыдущие руководства ушли, оставив мне только мой новый восьмиколоночный макет:

Предыдущие направляющие были удалены.

Изменение количества столбцов

Чтобы изменить количество столбцов в макете, просто измените значение в поле Число . Я уменьшу значение с 8 до

4 :

Уменьшение количества столбцов с 8 до 4.

Photoshop мгновенно обновляет макет, изменяя количество столбцов и равномерно распределяя их слева направо:

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

Вариант предварительного просмотра

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

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

Замена желоба

Пространство между столбцами (и строками) известно как желоб . Чтобы увеличить или уменьшить желоб, измените значение в поле Gutter . Размер поля по умолчанию составляет 20 пикселей, что добавляет 20 пикселей пространства между каждым столбцом. На самом деле я собираюсь полностью удалить желоб, выделив значение Gutter с помощью мыши и нажав Backspace (Win) / Удалить клавишу (Mac) на моей клавиатуре. Это очистит значение желоба и оставит поле пустым:

Удаление пространства между столбцами путем очистки значения Gutter.

При пустом поле Gutter столбцы больше не разделяются пробелами:

Пространство между столбцами удалено.

Указание ширины столбца

По умолчанию Photoshop автоматически изменяет размер столбцов таким образом, чтобы они были равномерно распределены по всему документу слева направо, но мы можем установить ширину самостоятельно, введя значение в поле 9.0005 Ширина поля . Например, я введу ширину для своих столбцов 150 пикселей :

.

Ввод определенной ширины столбцов.

Photoshop снова обновляет макет, на этот раз устанавливая ширину каждого столбца ровно на 150 пикселей:

Макет после указания ширины столбцов.

Центрирование колонн

Обратите внимание, что столбцы больше не центрированы в документе. Вместо этого они смещены влево. Чтобы центрировать их после того, как вы ввели определенную ширину, выберите Центральные столбцы Опция в нижней части диалогового окна:

Включение опции «Центрировать столбцы».

Если флажок «Центрировать столбцы» установлен, столбцы снова центрируются в макете:

Макет после центрирования столбцов.

Добавление строк

Чтобы добавить строки в макет, сначала выберите параметр строк (по умолчанию он отключен):

Включение рядов.

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

В моем случае я собираюсь установить количество строк на 3 , а также изменить количество столбцов на 3 . Я оставлю поле «Ширина» для столбцов и поле «Высота» для строк пустыми, чтобы позволить Photoshop распределить их одинаково, и я также оставлю пустыми поля Gutter:

Установка столбцов и строк на 3.

Это быстрый и простой способ создания стандартной сетки 3 на 3, которую я, возможно, захочу использовать, чтобы упорядочить и скомпоновать различные элементы в моем документе, используя «правило третей»:

Стандартная сетка 3 на 3 легко создается с помощью функции «Новый макет направляющей».

Добавление полей

Чтобы добавить поля по краям документа, сначала выберите параметр Margin , чтобы включить его, затем введите количество места, которое вы хотите добавить, в поле Верхний , Левый , Нижний и Правый коробки. В моем случае я установлю все четыре значения на 20 px :

Добавление полей к макету.

Это добавляет 20 пикселей пространства вокруг внутренних краев моего документа. Photoshop автоматически изменяет размеры столбцов и строк соответственно:

Тот же макет 3 на 3 с добавленными полями.

Мы можем даже добавить отрицательные поля, просто введя отрицательные значения. Отрицательные поля могут быть полезны при добавлении элементов в документ или при выборе объектов, размер которых превышает видимую область документа (холст). Я изменю каждое из четырех значений (сверху, слева, снизу и справа) на 9.0005 -20 пикселей :

Добавление отрицательных полей к макету.

Это дает мне те же поля шириной 20 пикселей, но перемещает их за пределы видимой области документа. И снова Photoshop автоматически изменяет размеры столбцов и строк:

.

Поля теперь находятся вне области документа, а не внутри.

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

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

Нажатие на поле выбора Preset.

Это открывает меню с несколькими встроенными предустановленными макетами на выбор (8 столбцов, 12 столбцов, 18 столбцов и 24 столбца), но нам нужен вариант Сохранить пресет :

Выбор параметра «Сохранить предустановку».

Когда появится диалоговое окно «Сохранить», введите описательное имя для нового пресета в поле «Сохранить как ». Я назову свой «cols-3-rows-3-margins-neg20px». Затем нажмите Сохранить кнопка:

Присвоение имени и сохранение нового пресета.

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

Пользовательская предустановка теперь отображается в списке.

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

Нажмите OK, чтобы принять новый макет.

Скрытие и очистка направляющих

Чтобы временно скрыть макет направляющей из документа, перейдите в меню View , выберите Show , затем выберите Guides . Сделайте то же самое еще раз, чтобы снова включить его. Или просто нажмите Ctrl+; (Победа) / Команда+; (Mac) на клавиатуре для включения и выключения направляющих:

Перейдите в «Вид» > «Показать» > «Направляющие», чтобы включить или выключить макет.

Чтобы полностью очистить макет направляющей, перейдите к View и выберите Clear Guides :

Перейдите в меню «Просмотр» > «Очистить направляющие».

Изменение макета фрагмента в Photoshop

Руководство пользователя Отмена

Поиск

1. Руководство пользователя Photoshop
2. Знакомство с Photoshop
   1. Мечтай. Сделай это.
   2. Что нового в Photoshop
   3. Отредактируйте свою первую фотографию
   4. Создание документов
   5. Фотошоп | Общие вопросы
   6. Системные требования Photoshop
   7. Перенос предустановок, действий и настроек
   8. Знакомство с Photoshop
3. Photoshop и другие продукты и услуги Adobe
   1. Работа с иллюстрациями Illustrator в Photoshop
   2. Работа с файлами Photoshop в InDesign
      
   3. Материалы Substance 3D для Photoshop
   4. Photoshop и Adobe Stock
   5. Используйте встроенное расширение Capture в Photoshop
   6. Библиотеки Creative Cloud
   7. Библиотеки Creative Cloud в Photoshop
   8. Использование панели Touch Bar с Photoshop
   9. Сетка и направляющие
   10. Создание действий
   11. Отмена и история
4. Photoshop для iPad
   1. Photoshop для iPad | Общие вопросы
   2. Знакомство с рабочим пространством
   3. Системные требования | Фотошоп на iPad
   4. Создание, открытие и экспорт документов
   5. Добавить фото
   6. Работа со слоями
   7. Рисовать и раскрашивать кистями
   8. Сделать выбор и добавить маски
   9. Ретушь ваших композитов
   10. Работа с корректирующими слоями
   11. Отрегулируйте тональность композиции с помощью кривых
   12. Применение операций преобразования
   13. Обрезка и поворот композитов
   14. Поворот, панорамирование, масштабирование и сброс холста
   15. Работа с текстовыми слоями
   16. Работа с Photoshop и Lightroom
   17. Получить отсутствующие шрифты в Photoshop на iPad
   18. Японский текст в Photoshop на iPad
   19. Управление настройками приложения
   20. Сенсорные клавиши и жесты
   21. Сочетания клавиш
   22. Измените размер изображения
   23. Прямая трансляция во время создания в Photoshop на iPad
   24. Исправление недостатков с помощью Восстанавливающей кисти
   25. Создание кистей в Capture и использование их в Photoshop
   26. Работа с файлами Camera Raw
   27. Создание смарт-объектов и работа с ними
   28. Отрегулируйте экспозицию изображений с помощью Dodge and Burn
5. Photoshop в Интернете, бета-версия
   1. Общие вопросы | Photoshop в Интернете, бета-версия
   .
   2. Знакомство с рабочей областью
   3. Системные требования | Photoshop в Интернете, бета-версия
   4. Сочетания клавиш | Photoshop в Интернете, бета-версия
   5. Поддерживаемые типы файлов | Photoshop в Интернете, бета-версия
   6. Открытие и работа с облачными документами
   7. Применение ограниченных правок к облачным документам
   8. Сотрудничать с заинтересованными сторонами
6. Генеративный ИИ 
   1. Откройте для себя будущее Photoshop с Генеративной заливкой
7. Облачные документы
   1. Облачные документы Photoshop | Общие вопросы
   2. Облачные документы Photoshop | Вопросы о рабочем процессе
   3. Управление облачными документами и работа с ними в Photoshop
   4. Обновление облачного хранилища для Photoshop
   5. Невозможно создать или сохранить облачный документ
   6. Устранение ошибок облачного документа Photoshop
   7. Сбор журналов синхронизации облачных документов
   8. Делитесь доступом и редактируйте свои облачные документы
   9. Делитесь файлами и комментируйте в приложении
8. Рабочее пространство
   1. Основы рабочего пространства
   2. Настройки
   3. Учитесь быстрее с помощью панели Photoshop Discover
   4. Создание документов
   5. Разместить файлы
   6. Сочетания клавиш по умолчанию
   7. Настройка сочетаний клавиш
   8. Инструментальные галереи
      
   9. Параметры производительности
   10. Использовать инструменты
   11. Предустановки
   12. Сетка и направляющие
   13. Сенсорные жесты
   14. Используйте сенсорную панель с Photoshop
   15. Сенсорные возможности и настраиваемые рабочие области
   16. Превью технологий
   17. Метаданные и примечания
   18. Сенсорные возможности и настраиваемые рабочие области
       
   19. Поместите изображения Photoshop в другие приложения
   20. линейки
   21. Показать или скрыть непечатаемые дополнения
   22. Укажите столбцы для изображения
   23. Отмена и история
   24. Панели и меню
   25. Позиционные элементы с привязкой
       
   26. Положение с помощью инструмента «Линейка»
9. Дизайн веб-сайтов, экранов и приложений
   1. Photoshop для дизайна
   2. Артборды
   3. Предварительный просмотр устройства
   4. Копировать CSS из слоев
   5. Разрезать веб-страницы
   6. Параметры HTML для фрагментов
   7. Изменить макет фрагмента
   8. Работа с веб-графикой
   9. Создание фотогалерей в Интернете
10. Основы изображения и цвета
    1. Как изменить размер изображений
    2. Работа с растровыми и векторными изображениями
    3. Размер и разрешение изображения
    4. Получение изображений с камер и сканеров
    5. Создание, открытие и импорт изображений
    6. Просмотр изображений
    7. Ошибка недопустимого маркера JPEG | Открытие изображений
    8. Просмотр нескольких изображений
    9. Настройка палитр цветов и образцов
    10. Изображения с высоким динамическим диапазоном
    11. Сопоставьте цвета на изображении
    12. Преобразование между цветовыми режимами
    13. Цветовые режимы
    14. Стереть части изображения
    15. Режимы наложения
    16. Выберите цвет
    17. Настройка индексированных таблиц цветов
    18. Информация об изображении
    19. Фильтры искажения недоступны
    20. О цвете
    21. Цветовые и монохромные настройки с использованием каналов
    22. Выбор цветов на панелях «Цвет» и «Образцы»
    23. Образец
    24. Цветовой режим или Режим изображения
    25. Цветной оттенок
    26. Добавить условное изменение режима к действию
    27. Добавить образцы из HTML CSS и SVG
    28. Разрядность и настройки
11. Слои
    1. Основы слоев
    2. Неразрушающее редактирование
    3. Создание и управление слоями и группами
    4. Выберите, сгруппируйте и свяжите слои
    5. Поместите изображения в рамки
    6. Непрозрачность слоя и смешивание
    7. Слои маски
    8. Применение смарт-фильтров
    9. Композиции слоев
    10. Переместить, сложить и заблокировать слои
    11. Слои маски с векторными масками
    12. Управление слоями и группами
    13. Эффекты и стили слоя
    14. Редактировать маски слоя
    15. Извлечение активов
    16. Отображение слоев с помощью обтравочных масок
    17. Создание ресурсов изображения из слоев
    18. Работа со смарт-объектами
    19. Режимы наложения
    20. Объединение нескольких изображений в групповой портрет
    21. Объединение изображений с помощью Auto-Blend Layers
    22. Выравнивание и распределение слоев
    23. Копировать CSS из слоев
    24. Загрузить выделение из границ слоя или маски слоя
    25. Knockout для отображения содержимого из других слоев
12. Подборки
    1. Начало работы с подборками
       
    2. Сделайте выбор в композите
    3. Рабочее пространство «Выбор и маска»
       
    4. Выберите с помощью инструментов выделения
       
    5. Выделить с помощью инструментов лассо
    6. Настройка выбора пикселей
    7. Перемещение, копирование и удаление выбранных пикселей
    8. Создать временную быструю маску
    9. Выберите диапазон цветов в изображении
    10. Преобразование между путями и границами выделения
    11. Основные сведения о каналах
    12. Сохранить выделение и маски альфа-канала
        
    13. Выберите области изображения в фокусе
    14. Дублировать, разделять и объединять каналы
    15. Вычисления каналов
13. Настройки изображения
    1. Замена цветов объекта
    2. Деформация перспективы
    3. Уменьшить размытие изображения при дрожании камеры
    4. Примеры лечебных кистей
    5. Экспорт таблиц поиска цветов
    6. Настройка резкости и размытия изображения
    7. Понимание настроек цвета
    8. Применение регулировки яркости/контрастности
    9. Настройка деталей теней и светлых участков
    10. Регулировка уровней
    11. Настройка оттенка и насыщенности
    12. Настройка вибрации
    13. Настройка насыщенности цвета в областях изображения
    14. Быстрая корректировка тона
    15. Применение специальных цветовых эффектов к изображениям
    16. Улучшите изображение с помощью настройки цветового баланса
    17. Изображения с высоким динамическим диапазоном
    18. Просмотр гистограмм и значений пикселей
    19. Сопоставьте цвета на изображении
    20. Обрезка и выравнивание фотографий
    21. Преобразование цветного изображения в черно-белое
    22. Корректирующие слои и слои-заливки
    23. Регулировка кривых
    24. Режимы наложения
    25. Целевые изображения для прессы
    26. Настройка цвета и тона с помощью пипеток «Уровни» и «Кривые»
    27. Настройка экспозиции и тонирования HDR
    28. Осветление или затемнение областей изображения
    29. Выборочная настройка цвета
14. Adobe Camera Raw
    1. Системные требования Camera Raw
    2. Что нового в Camera Raw
    3. Знакомство с Camera Raw
    4. Создание панорам
    5. Поддерживаемые объективы
    6. Эффекты виньетирования, зернистости и удаления дымки в Camera Raw
    7. Сочетания клавиш по умолчанию
    8. Автоматическая коррекция перспективы в Camera Raw
    9. Радиальный фильтр в Camera Raw
    10. Управление настройками Camera Raw
    11. Открытие, обработка и сохранение изображений в Camera Raw
    12. Исправление изображений с помощью инструмента Enhanced Spot Removal Tool в Camera Raw
    13. Поворот, обрезка и настройка изображений
    14. Настройка цветопередачи в Camera Raw
    15. Версии процесса в Camera Raw
    16. Внесение локальных корректировок в Camera Raw
15. Исправление и восстановление изображений
    1. Удаление объектов с фотографий с помощью Content-Aware Fill
    2. Исправление и перемещение с учетом содержимого
    3. Ретушь и исправление фотографий
    4. Исправление искажения изображения и шума
    5. Основные действия по устранению неполадок для устранения большинства проблем
16. Улучшение и преобразование изображения
    1. Замените небо на изображениях
    2. Преобразование объектов
    3. Настройка обрезки, поворота и размера холста
    4. Как обрезать и выпрямить фотографии
    5. Создание и редактирование панорамных изображений
    6. Деформация изображений, форм и путей
    7. Точка схода
    8. Масштабирование с учетом содержимого
    9. Преобразование изображений, форм и контуров
17. Рисование и раскрашивание
    1. Рисование симметричных узоров
    2. Рисование прямоугольников и изменение параметров обводки
    3. О чертеже
    4. Рисование и редактирование фигур
    5. Инструменты для рисования
    6. Создание и изменение кистей
    7. Режимы наложения
    8. Добавить цвет к путям
    9. Изменить пути
    10. Краска с помощью кисти-миксера
    11. Наборы кистей
    12. Градиенты
    13. Градиентная интерполяция
    14. Выбор заливки и обводки, слоев и контуров
    15. Рисование с помощью инструментов «Перо»
    16. Создание шаблонов
    17. Создание рисунка с помощью Pattern Maker
    18. Управление путями
    19. Управление библиотеками шаблонов и пресетами
    20. Рисуйте или раскрашивайте на графическом планшете
    21. Создание текстурированных кистей
    22. Добавление динамических элементов к кистям
    23. Градиент
    24. Нарисуйте стилизованные мазки с помощью Art History Brush
    25. Краска с рисунком
    26. Синхронизация пресетов на нескольких устройствах
18. Текст
    1. Добавить и отредактировать текст
       
    2. Единый текстовый движок
    3. Работа со шрифтами OpenType SVG
    4. Символы формата
    5. Форматировать абзацы
    6. Как создавать текстовые эффекты
    7. Редактировать текст
    8. Интервал между строками и символами
    9. Арабский и еврейский шрифт
    10. Шрифты
    11. Устранение неполадок со шрифтами
    12. Азиатский тип
    13. Создать тип
19. Фильтры и эффекты
    1. Использование фильтра «Пластика»
       
    2. Используйте галерею размытия
    3. Основы фильтра
    4. Артикул эффектов фильтра
    5. Добавить световые эффекты
    6. Используйте адаптивный широкоугольный фильтр
    7. Используйте фильтр масляной краски
    8. Используйте фильтр «Пластика»
    9. Эффекты и стили слоя
    10. Применить определенные фильтры
    11. Размазывание областей изображения
20. Сохранение и экспорт
    1. Сохраняйте файлы в Photoshop
       
    2. Экспорт файлов в Photoshop
    3. Поддерживаемые форматы файлов
       
    4. Сохранение файлов в графических форматах
    5. Перемещение дизайнов между Photoshop и Illustrator
    6. Сохранение и экспорт видео и анимации
    7. Сохранение файлов PDF
    8. Защита авторских прав Digimarc
21. Управление цветом
    1. Понимание управления цветом
    2. Поддержание согласованности цветов
    3. Настройки цвета
    4. Дуотоны
    5. Работа с цветовыми профилями
    6. Документы с управлением цветом для онлайн-просмотра
    7. Управление цветом документов при печати
    8. Импортированные изображения с управлением цветом
    9. Пробные цвета
22. Дизайн веб-сайтов, экранов и приложений
    1. Photoshop для дизайна
    2. Артборды
    3. Предварительный просмотр устройства
    4. Копировать CSS из слоев
    5. Разрезать веб-страницы
    6. вариантов HTML для фрагментов
    7. Изменить макет фрагмента
    8. Работа с веб-графикой
    9. Создание фотогалерей в Интернете
23. Видео и анимация
    1. Видеомонтаж в Photoshop
    2. Редактировать слои видео и анимации
    3. Обзор видео и анимации
    4. Предварительный просмотр видео и анимации
    5. Рисование кадров в слоях видео
    6. Импорт видеофайлов и последовательностей изображений
    7. Создать анимацию кадра
    8. Creative Cloud 3D-анимация (предварительная версия)
    9. Создание анимации временной шкалы
    10. Создание изображений для видео
24. Печать
    1. Печать 3D-объектов
    2. Печать из Photoshop
    3. Печать с управлением цветом
    4. Контактные листы и презентации в формате PDF
    5. Печать фотографий в макете пакета изображений
    6. Плашечные цвета для печати
    7. Печать изображений на коммерческой типографии
    8. Улучшение цветных отпечатков из Photoshop
    9. Устранение проблем с печатью | Фотошоп
25. Автоматизация
    1. Создание действий
    2. Создание графики, управляемой данными
    3. Сценарий
    4. Обработка пакета файлов
    5. Воспроизведение и управление действиями
    6. Добавить условные действия
    7. О действиях и панели действий
    8. Инструменты записи в действиях
    9. Добавить условное изменение режима к действию
    10. Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
26. Подлинность контента
    1. Узнайте об учетных данных содержимого
    2. Идентификация и происхождение для NFT
    3. Подключить учетные записи для атрибуции креативов
27. Фотошоп 3D
    1. Фотошоп 3D | Распространенные вопросы о снятых с производства 3D-функциях

 

Выберите один или несколько фрагментов

Выполните одно из следующих действий:

• Выберите инструмент «Выбор фрагмента» и щелкните фрагмент на изображении. При работе с перекрывающимися фрагментами щелкните видимую часть нижележащего фрагмента, чтобы выбрать его.
• Выберите инструмент «Выбор фрагмента» и щелкните, удерживая клавишу Shift, чтобы добавить фрагменты к выделению.
• Выберите инструмент «Выбор фрагмента» в диалоговом окне «Сохранить для Интернета и устройств», щелкните автоматический фрагмент или за пределами области изображения и перетащите его по фрагментам, которые нужно выбрать. (Нажатие пользовательского фрагмента и перетаскивание перемещают фрагмент.)
• Выберите «Файл» > «Сохранить для Интернета и устройств». В диалоговом окне с помощью инструмента «Срез» выберите срез .

Примечание:

При использовании инструмента «Фрагмент» или «Выделение фрагмента» можно переключаться с одного инструмента на другой, удерживая нажатой клавишу «Ctrl» (Windows) или «Command» (Mac OS).

Перемещение, изменение размера и привязка пользовательских фрагментов

Вы можете перемещать и изменять размер пользовательских фрагментов в Photoshop, но не в диалоговом окне «Сохранить для Интернета и устройств».

Переместить или изменить размер пользовательского фрагмента

1. Выберите один или несколько пользовательских фрагментов.

2. Выполните одно из следующих действий:

   • Чтобы переместить фрагмент, переместите указатель внутрь границу выбора фрагмента и перетащите фрагмент в новое положение. Нажмите Shift, чтобы ограничить движение по вертикали, горизонтали или под углом 45°. диагональная линия.

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

Измените размер или переместите пользовательский фрагмент с помощью числовые координаты

1. Выберите один или несколько пользовательских фрагментов.

2. Нажмите кнопку «Параметры» на панели параметров. Ты можешь также дважды щелкните фрагмент, чтобы отобразить параметры.

3. В области «Размеры» диалогового окна «Параметры среза» изменить один или несколько следующих параметров:

   Икс

   Задает расстояние в пикселях между левым краем фрагмента и исходной точки линейки в окне документа.

   Д

   Задает расстояние в пикселях между верхним краем среза и исходной точкой линейки в окне документа.

   Примечание:

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

   Вт

   Задает ширину среза.

   ЧАС

   Задает высоту среза.

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

1. Выбрать нужные параметры в подменю «Вид» > «Привязать к».

2. Выберите «Вид» > «Привязка». Галочка указывает что эта опция включена.

3. Переместите выбранные фрагменты по желанию. Ломтики щелкают к любому из выбранных вами объектов в пределах 4 пикселей.

Разделение пользовательских и автоматических фрагментов

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

Примечание:

Нельзя разделить по слоям ломтики.

1. Выберите один или несколько фрагментов.

2. С Инструмент выбора фрагмента  , нажмите Разделите на панели параметров.

3. Выберите «Предварительный просмотр» в диалоговом окне «Разделить фрагмент» для предварительного просмотра. перемены.

4. В диалоговом окне «Разделить фрагмент» выберите один или оба следующие опции:

   Разделить по горизонтали на

   Разделяет срез по длине.

   Разделить по вертикали на

   Разделяет срез по ширине.

5. Определите, как вы хотите разделить каждый выбранный срез:

   • Выберите и введите значение для «Слайсы вниз» или Slices Across, чтобы равномерно разделить каждый срез на указанные количество ломтиков.

   • Выберите и введите значение параметра «Пиксели на срез», чтобы создавать фрагменты с указанным количеством пикселей. Если срез нельзя разделить поровну на это количество пикселей, остаток превращается в другой срез. Например, если вы разделите кусок, который шириной 100 пикселей на три новых среза шириной 30 пикселей каждый, остальные Область шириной 10 пикселей становится новым фрагментом.

6. Нажмите OK.

Дублирующие срезы

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

1. Выберите часть или несколько частей.

2. Удерживая нажатой клавишу Alt (Windows) или Option (Mac OS), перетащите из внутри выделения.

Скопируйте и вставьте фрагмент

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

1. Выберите один или несколько фрагментов с помощью Slice Select инструмент .

2. Выберите «Правка» > «Копировать».

   Примечание:

   Слайс не может быть скопирован, если есть активное выделение в документе (выделенный пиксел или выбранный путь).

3. Выполните одно из следующих действий:

   • Если вы хотите вставить фрагмент в другой изображение, откройте и отобразите это изображение.

   • При вставке в Dreamweaver сделайте свой Dreamweaver задокументировать активное окно.

4. Выберите «Правка» > «Вставить». Создается новый слой когда фрагмент вставляется в изображение Photoshop.

   Примечание:

   Фрагмент, скопированный в Dreamweaver, сохраняет информацию об имени файла и пути исходного файла Photoshop. Чтобы просмотреть эту информацию в Dreamweaver, щелкните правой кнопкой мыши (Windows) или Щелкните изображение, удерживая нажатой клавишу CTRL (Mac OS), выберите «Заметки разработчика», затем найдите поле FilePathSrc на вкладке All Info.

Объедините кусочки

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

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

Примечание:

Вы не можете комбинировать слои на основе ломтики.

1. Выберите два или более фрагмента.

2. Щелкните правой кнопкой мыши (Windows) или нажмите, удерживая нажатой клавишу Ctrl (Mac OS), и выберите «Объединить фрагменты».

Изменение порядка размещения слоев

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

Примечание:

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

1. Выберите часть или несколько частей.

2. Выберите инструмент «Выделение фрагмента»  и щелкните параметр порядка размещения на панели параметров.
   Варианты заказа штабелирования

   A. На передний план B. На передний план Вперед C. Отправить назад D. Отправить Назад

Выравнивание и распределение пользовательских фрагментов

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

Примечание:

Чтобы выровнять или распределить слои на основе слоев, выровняйте или распределите содержимое слоев.

1. Выберите пользовательские фрагменты, которые вы хотите выровнять.

2. Выберите инструмент «Выделение фрагмента»  и выберите параметр на панели параметров.
   Варианты выравнивания

   A. Верхний B. Вертикальный Центр C. Нижний D. Левый E. Горизонтальный Центры Ф. Справа

   Варианты распространения

   A. Верхний B. Вертикальный Центр C. Нижний D. Левый E. Горизонтальный По центру F. Справа

Удалить фрагмент

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

Удаление фрагмента на основе слоя не не удалять связанный слой; однако удаление слоя, связанного с фрагментом на основе слоя удаляет фрагмент на основе слоя.

Примечание:

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