Размер макета для сайта в фотошопе: Требования к дизайн-макетам сайтов | Студия Флаг

Требования к дизайн-макетам сайтов | Студия Флаг

Маша Радионова

Опубликовано: 17 Апр 2018

Вернуться в блог

Быстрее и дешевле работать с правильно собранными дизайн-макетами, поэтому мы подготовили требования, которые помогут дизайнеру сделать макеты удобными для верстки, соответственно сэкономить время и деньги.

Основное

• Важно. Исходник в Figma (предпочтительно) или в фотошопе (psd).
• У всех слоев должны быть человеко-понятные имена и каждый элемент должен находиться в отдельном слое.
• Организовывать слои по папкам, делать человеко-понятную структуру (например, Header).
• Удалять все ненужное, если оно нигде не используется, а не просто скрывать слои.
• Дизайн страницы должен быть с максимально реальным наполнением, то есть все тексты и картинки должны быть реальными и настоящими.
• Если данных нет или они не в полном объеме, то необходимо прикидывать что будет, если текста будет больше/меньше, больше/меньше элементов или картинки будут не того формата (соотношения длина/ширина). Если на странице набор элементов, лучше задать им разное количество контента (длина названий товаров, формат картинок товаров и т.д .) Это можно реализовать через дополнительные слои или дополнительные макеты для исключительных случаев.
• Типизируйте все объекты на макете. Если это заголовок Open Sans 1.2em, то пусть он везде будет Open Sans 1.2em. Аналогично поступите с кнопками, абзацами, интерлиньяжем и отступами. Мы не говорим, что всё должно выглядеть одинаково — нет. Вы должны понимать, что чем больше у вас типизированных объектов, тем проще верстальщику с ними работать.
• Оставляйте комментарии для элементов, поведение которых сложно передать статическим изображением.
• Макет .psd не должен весить больше 100 Мб.

Сетка, размеры, ширина контента

• Ширина макета (не контентной области) должна быть 1920px или 2560px.
• Минимальная ширина контентной (информационной) области — 1240 px (для десктопа).
• Максимальная высота для области контента (если блоки сайта делаются экранами) 700 px, включая отступы.

Изображения и иконки

• Изображения в фигме выносить на отдельный слой и сверху накладывать эффекты, чтобы можно было экспортировать исходник изображения.
• Стараться не делать больших растровых изображений, они утяжеляют страницу.
• Изображения, которые можно сделать в векторе — делать в векторе.
• Иконки должны быть в векторном формате (svg).

Адаптив и ретина

• Если требуется адаптивная (респонсивная) верстка, нужны макеты для реперных точек и комментарии по поведению верстки между этими точками, например:
  — 320—480px
  — 480—1024px
  — 1024—2520px
• Для ретины всё просто: все, что можно — делаем в svg, если для изображения такой возможности нет — нужны иконки и картинки в два раза больше чем они есть. Зашить в исходники большие картинки сразу. Например, если в макете иконка у кнопки 100х100 пикселей, то нам ее необходимо предоставить 200х200 пикселей под ретину.

Styleguide или UI KIT

• Нарисовать активные состояния элементов (меню, кнопки, поля форм и тд):
  — hover (наведение)
  — focus/active (клик)
  — preloader (для ajax-кнопок)
• Нарисовать как будут выглядеть стандартные элементы форматирования текста: параграф, абзац, заголовки с 1 по 4 уровень, маркированный список, нумерованный список, подчеркнутый текст (ссылка), жирный, курсив и др.
• Обязательно изобразить все всплывающие окна, прелоадеры, всплывающие меню, информационные сообщения, валидации в формах и прочие эффекты.
• Использовать конечное число цветов в макете и описать их в styleguide (то есть не использовать 50 оттенков серого для цвета текста и т.д.). Желательно сразу создать палитру в фигме.
• Параметр прозрачности задавать только для тех элементов страницы, которые действительно должны быть частично прозрачными. Не использовать параметр прозрачности для задания цвета заливки элементов, которые должны быть непрозрачными на странице.

Тексты и шрифты

• Использовать «безопасные» шрифты предустановленные в Windows, подробнее тут. При необходимости использовать нестандартные, указывать запасные безопасные.
• Если используются кастомные шрифты — сократить их количество и количество начертаний до минимально необходимого.
• Сглаживание шрифтов всегда должно быть отключено.
• Шрифты можно выбрать на сайте. Их можно с легкостью использовать и подключать на сайтах.
• Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.

Комплект для верстки

• Макет в фигме
• Шрифты
• favicon в формате .svg

Будем рады вашим комментариям и вопросам!

---

Последние записи блога

---

Please enable JavaScript to view the comments powered by Disqus.

Делаем грамотный макет сайта / Песочница / Хабр

Вместо вступления

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

Тезисы

Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.

• Верстают в программах для верстки
• Правильно создайте документ
• Используйте сетку
• Используйте функционал шаблонизирования
• Учитывайте не статичность сайтов
• Вы работаете с рыбой, реальные тексты будут другие
• Подготовите материалы для верстки

Верстают в программах для верстки

Я часто слышу о том, что дизайн пытаются делать в photoshop’e.
Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:

• Для дизайна есть InDesign (ну или QuarkXPress).
• Для рисования есть Illustrator (ну или CorelDRAW).
• Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.

Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop’e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop’e и завтра ровно в 6:34 он получит макет в PDF.

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

При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:

Назначение: Web — Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.

Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной 1227 пикселя.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.

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

Используйте сетку

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

Сетка это основа любого макета. От нее и пляшут. Поэтому ее выбор очень важен. Но я не буду тут расписывать ее «графические» свойства. Для нас важны технические требования.

1 — margin, 2 — ширина колонки, 3 — gutter, 4 — стандартный отступ

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

• Ширина макета
• Ширина внешних отступов (margin)
• Число колонок
• Отступы между колонками (Gutter)

Когда определились со всеми этими параметрами подставляем их в формулу

Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5
х = 145
х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.

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

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

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

Используйте функционал шаблонизирования

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

Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.

Учитывайте не статичность сайтов

В отличии от печатной продукции, сайт это динамический объект. Не забывайте в макетах создавать элементы в разных стадиях (например просто ссылка, ссылка на которую навели, активная ссылка).

Вы работаете с рыбой, реальные тексты будут другие

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

Подготовите материалы для верстки

Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.
Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius’ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.

Предоставьте список используемых цветов в HEX формате.

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

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

Настройка поворота и размера холста в Photoshop

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

Поиск

Последнее обновление: 16 ноября 2022 г. , 04:57:31 по Гринвичу

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. Используйте сенсорную панель с 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 | Общие вопросы
   2. Облачные документы Photoshop | Вопросы по рабочему процессу
   3. Управление и работа с облачными документами в Photoshop
   4. Обновление облачного хранилища для Photoshop
   5. Невозможно создать или сохранить облачный документ
   6. Устранение ошибок облачного документа Photoshop
   7. Сбор журналов синхронизации облачных документов
   8. Делитесь доступом и редактируйте свои облачные документы
   9. Делитесь файлами и комментируйте в приложении
7. Рабочее пространство
   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. Положение с помощью инструмента «Линейка»
8. Веб-дизайн, экранный дизайн и дизайн приложений
   1. Photoshop для дизайна
   2. Артборды
   3. Предварительный просмотр устройства
   4. Копировать CSS из слоев
   5. Разделение веб-страниц
   6. Опции HTML для фрагментов
   7. Изменить расположение фрагментов
   8. Работа с веб-графикой
   9. Создание фотогалерей в Интернете
9. Основы изображения и цвета
   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. Битовая глубина и настройки
10. Слои
    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 для отображения содержимого других слоев
11. Подборки
    1. Начало работы с подборками
       
    2. Сделайте выбор в композите
    3. Рабочая область выбора и маски
       
    4. Выберите с помощью инструментов выделения
       
    5. Выберите с помощью инструментов лассо
    6. Настройка выбора пикселей
    7. Перемещение, копирование и удаление выбранных пикселей
    8. Создать временную быструю маску
    9. Выбор цветового диапазона изображения
    10. Преобразование между путями и границами выделения
    11. Основы канала
    12. Сохранить выделение и маски альфа-канала
        
    13. Выберите области изображения в фокусе
    14. Дублировать, разделять и объединять каналы
    15. Вычисления каналов
12. Настройки изображения
    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. Выборочная настройка цвета
13. 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
14. Исправление и восстановление изображений
    1. Удаление объектов с фотографий с помощью Content-Aware Fill
    2. Content-Aware Patch and Move
    3. Ретушь и ремонт фотографий
    4. Исправить искажение изображения и шум
    5. Основные действия по устранению неполадок для решения большинства проблем
15. Улучшение и преобразование изображения
    1. Замена неба на изображениях
    2. Преобразование объектов
    3. Настройка кадрирования, поворота и размера холста
    4. Как обрезать и выпрямить фотографии
    5. Создание и редактирование панорамных изображений
    6. Деформация изображений, форм и путей
    7. Точка схода
    8. Контентно-зависимое масштабирование
    9. Преобразование изображений, форм и контуров
16. Рисунок и живопись
    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. Синхронизация пресетов на нескольких устройствах
17. Текст
    1. Добавить и отредактировать текст
       
    2. Единый текстовый движок
    3. Работа со шрифтами OpenType SVG
    4. Символы формата
    5. Формат абзацев
    6. Как создавать текстовые эффекты
    7. Редактировать текст
    8. Интервал между строками и символами
    9. арабский и иврит тип
    10. Шрифты
    11. Устранение неполадок со шрифтами
    12. Азиатский тип
    13. Создать тип
18. Фильтры и эффекты
    1. Использование фильтра «Пластика»
       
    2. Использовать галерею размытия
    3. Основы фильтра
    4. Ссылка на эффекты фильтра
    5. Добавить световые эффекты
    6. Используйте адаптивный широкоугольный фильтр
    7. Используйте фильтр масляной краски
    8. Используйте фильтр «Пластика»
    9. Эффекты слоя и стили
    10. Применить определенные фильтры
    11. Размазать области изображения
19. Сохранение и экспорт
    1. Сохранение файлов в Photoshop
       
    2. Экспорт файлов в Photoshop
    3. Поддерживаемые форматы файлов
       
    4. Сохранение файлов в графических форматах
    5. Перемещение дизайнов между Photoshop и Illustrator
    6. Сохранение и экспорт видео и анимации
    7. Сохранение файлов PDF
    8. Защита авторских прав Digimarc
20. Управление цветом
    1. Понимание управления цветом
    2. Поддержание согласованности цветов
    3. Настройки цвета
    4. Дуотоны
    5. Работа с цветовыми профилями
    6. Документы с управлением цветом для онлайн-просмотра
    7. Управление цветом документов при печати
    8. Импортированные изображения с управлением цветом
    9. Пробные цвета
21. Веб-дизайн, экранный дизайн и дизайн приложений
    1. Photoshop для дизайна
    2. Артборды
    3. Предварительный просмотр устройства
    4. Копировать CSS из слоев
    5. Разделение веб-страниц
    6. Опции HTML для фрагментов
    7. Изменить расположение фрагментов
    8. Работа с веб-графикой
    9. Создание фотогалерей в Интернете
22. Видео и анимация
    1. Видеомонтаж в Photoshop
    2. Редактировать слои видео и анимации
    3. Обзор видео и анимации
    4. Предварительный просмотр видео и анимации
    5. Отрисовка кадров в слоях видео
    6. Импорт видеофайлов и последовательностей изображений
    7. Создать анимацию кадра
    8. Creative Cloud 3D-анимация (предварительная версия)
    9. Создание анимации временной шкалы
    10. Создание изображений для видео
23. Печать
    1. Печать 3D-объектов
    2. Печать из Photoshop
    3. Печать с управлением цветом
    4. Контактные листы и презентации в формате PDF
    5. Печать фотографий в макете пакета изображений
    6. Плашечные цвета для печати
    7. Печать изображений на коммерческой типографии
    8. Улучшение цветных отпечатков из Photoshop
    9. Устранение проблем с печатью | Фотошоп
24. Автоматизация
    1. Создание действий
    2. Создание графики, управляемой данными
    3. Сценарии
    4. Обработка пакета файлов
    5. Играть и управлять действиями
    6. Добавить условные действия
    7. О действиях и панели действий
    8. Инструменты записи в действиях
    9. Добавить условное изменение режима к действию
    10. Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
25. Подлинность контента
    1. Узнайте об учетных данных контента
    2. Идентичность и происхождение для NFT
    3. Подключить учетные записи для атрибуции креативов
26. Фотошоп 3D
    1. Фотошоп 3D | Общие вопросы о снятых с производства 3D-функциях

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

Видео | Обрезка и выравнивание фотографий

Главный менеджер по продукции Photoshop Брайан О’Нил Хьюз объясняет искусство обрезки и выравнивания изображений в Photoshop…

Брайан О’Нил Хьюз

9 0810 http://www. photoshop.com/people/bryan

Обрезать изображение с помощью команды Crop

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

2. Выберите «Изображение» > «Обрезать».

Обрезка изображения с помощью команды «Обрезать»

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

1. Выбрать Изображение > Обрезать.

2. В диалоговом окне «Обрезка» выберите параметр:

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

3. Выберите одну или несколько областей изображения для обрезки: Верх, Снизу, слева или справа.

Обрезка и выравнивание отсканированных фотографий

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

Для достижения наилучших результатов оставьте 1/8 дюйма между изображениями на скане, а фон (как правило, платформа сканера) должен быть однородного цвета с небольшим шумом. Команда «Обрезать и выпрямить фотографии» лучше всего работает с изображениями с четко очерченными контурами. Если команда «Обрезать и выпрямить фотографии» не может правильно обработать файл изображения, используйте инструмент «Обрезка».

1. Откройте отсканированный файл, содержащий изображения вы хотите расстаться.

2. Выберите слой, содержащий изображения.

3. (Необязательно) Выделите нужные изображения. обрабатывать.

4. Выберите «Файл» > «Автоматизация» > «Обрезать». И выпрямить фотографии. Отсканированные изображения обрабатываются, а затем каждое изображение открывается в отдельном окне.

   Примечание:

   Если команда «Обрезать и выпрямить фотографии» неправильно разделяет одно из ваших изображений, сделайте рамку выделения вокруг изображение и немного фона, а затем удерживайте нажатой клавишу Alt (Windows) или Option (Mac OS) при выборе команды. Модификатор указывает, что только одно изображение должно быть отделено от фона.

Выпрямление изображения

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

1. Выберите инструмент «Линейка». (Если При необходимости щелкните и удерживайте инструмент «Пипетка», чтобы открыть линейку.)

2. На изображении перетащите ключевой горизонтальный или вертикальный элемент.

3. На панели параметров нажмите «Выпрямить».

   Фотошоп выпрямляет изображение и автоматически обрезает его. Чтобы выявить области изображения, которые выйти за границы нового документа, выберите «Правка» > «Отменить».

   Примечание:

   Чтобы полностью избежать автоматической обрезки, удерживайте Alt (Windows) или Option (Mac OS), когда вы нажимаете «Выпрямить».

Поворот или отражение всего изображения

Примечание:

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

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

Вращение изображений

A. Flip Horizontal B. Оригинал изображение C. Отразить по вертикали D. Повернуть 90° против часовой стрелки E. Повернуть на 180° F. Повернуть 90° CW

1. Выбрать Изображение > Поворот изображения и выберите один из следующих вариантов. команды из подменю:

   180°

   Поворачивает изображение на пол-оборота.

   90° по часовой стрелке

   Поворачивает изображение по часовой стрелке на четверть оборота.

   90° против часовой стрелки

   Поворачивает изображение против часовой стрелки на четверть оборота.

   Произвольный

   Поворачивает изображение на указанный вами угол. Если вы выберете этой опции введите угол от -359,99 до 359,99 в поле угла текстовое окно. (В Photoshop вы можете выбрать °CW или °CCW, чтобы по часовой стрелке или против часовой стрелки.) Затем нажмите ОК.

   Отразить холст по горизонтали или вертикали

   Переворачивает изображение по соответствующей оси.

Изменение размера холста

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

1. Выберите «Изображение» > «Размер холста».

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

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

3. Для Якорь, щелкните квадрат, чтобы указать, где разместить существующую изображение на новом холсте.

4. Выберите параметр в меню «Цвет расширения холста»:

   • Передний план, чтобы заполнить новый холст цветом. текущий цвет переднего плана
   • Фон для заполнения нового холста текущим фоновый цвет
   • Белый, Черный или Серый для заливки нового холста этот цвет
   • Другое, чтобы выбрать новый цвет холста с помощью Подборщик

   Примечание:

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

   Меню «Цвет расширения холста» недоступно, если изображение не содержит фонового слоя.

5. Нажмите OK.

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

Сделать рамку, увеличив размер холста

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

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

1. Открыть панель Действия. Выберите «Окно» > «Действия».

2. Выберите «Кадры» в меню панели «Действия».

3. Выберите одно из действий кадра из списка.

4. Нажмите кнопку Воспроизвести выбор.

   Действие воспроизводится, создавая рамку вокруг вашей фотографии.

Больше похожего

• Точно перевернуть или повернуть
• Бесплатная онлайн-обрезка изображений Adobe

Купите Adobe Photoshop или начните бесплатную пробную версию .​

Войдите в свою учетную запись

Войти

Управление учетной записью

Войдите в свою учетную запись

Войти

Управление учетной записью

Adobe Photoshop — Какую ширину в пикселях должен использовать дизайнер для PSD, учитывая ширину веб-сайта в пикселях?

спросил 7 лет, 6 месяцев назад

Изменено 7 лет, 5 месяцев назад

Просмотрено 2к раз

Какую ширину в пикселях должен использовать дизайнер для PSD, учитывая ширину веб-сайта в пикселях? (например, мне нужен дизайн для веб-сайта шириной 1920 пикселей. Какое разрешение должен использовать дизайнер в фотошопе?)

Я веб-разработчик, и я всегда получаю PSD-файлы от дизайнеров нелепых произвольных размеров. Например, я только что получил PSD (для одной страницы веб-сайта), размер которого превышает гигабайт, размер / разрешение изображения составляет 5616 пикселей на 3744 пикселей. Это очень усложняет задачу, потому что мне приходится изменять размер практически каждого элемента дизайна. Я понятия не имею, почему и как дизайнер решил работать в этом разрешении.

Лично я бы спроектировал в 2 раза больше окончательного разрешения веб-сайта, поэтому у меня есть изображения Retina. 3

Я рекомендую оставить 72 dpi и целевую ширину 1920, чтобы установить шаблон макета, вы всегда можете заменить веб-изображения позже через CMS или даже вручную. Погоня за дисплеями Retina в файле макета даст вам огромные (500-700 МБ и выше) PSD, и в этом просто нет необходимости.

ваша ширина должна быть в порядке в 1920px и в 72dpi.