Как сохранить в html в фотошопе
- Дважды щелкните фрагмент с выбранным инструментом «Выделение фрагмента» . (Если этот инструмент не отображается, нажмите и удерживайте инструменты «Рамка» или «Раскройка».)
- С активным инструментом «Выделение фрагмента» нажмите кнопку «Параметры фрагмента» на панели параметров. Этот метод нельзя применить в диалоговом окне «Сохранить для Web и устройств».
Можно указать в каком виде данные фрагмента появляются в веб-браузере при экспорте HTML-файла. Доступность параметров зависит от типа выбранного фрагмента.
Фрагменты типа «Изображение» содержат данные в виде изображений. Это тип содержимого по умолчанию.
Фрагменты типа «Без изображения» позволяют создавать пустые ячейки таблицы, которые могут быть заполнены текстом или закрашены определенным цветом. Во фрагмент типа «Без изображения» можно ввести HTML-текст. При выборе в диалоговом окне «Сохранить для Веб и устройств» параметра «HTML-текст» при просмотре в браузере текст интерпретируется как HTML-код. Фрагменты типа «Без изображения» нельзя экспортировать как изображения, но можно просматривать в браузере.
Параметры настройки автоматического фрагмента могут преобразовать его в пользовательский фрагмент.
Выберите фрагмент. При работе в Photoshop для открытия диалогового окна «Параметры фрагмента» выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент. В диалоговом окне «Параметры фрагмента» выберите тип фрагмента во всплывающем меню «Тип».При добавлении фрагментов к изображению может оказаться удобно переименовать фрагменты согласно их содержимому. По умолчанию пользовательские фрагменты получают названия в соответствии с настройками в диалоговом окне Настройки экспорта .
Чтобы открыть диалоговое окно «Параметры фрагмента», выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент. В диалоговом окне «Параметры фрагмента» введите новое имя в текстовое поле «Имя».Текстовое поле «Имя» недоступно для фрагментов типа «Без изображения».
Фоновый цвет можно выбрать для заполнения прозрачных областей (для фрагментов типа «Изображение») или для всей области фрагмента (для фрагментов типа «Без изображения»).
Photoshop не отображает выбранный фоновый цвет — необходимо загрузить изображение в браузере для просмотра выбранного фонового цвета.
Выберите фрагмент. Если вы работаете с диалоговым окном Photoshop «Сохранить для Web и устройств», выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент, чтобы вызвать диалоговое окно «Параметры фрагмента». В диалоговом окне «Параметры фрагмента» выберите фоновый цвет во всплывающем меню «Фоновый цвет» . Выберите «Нет», «Подложка», «Белый», «Черный» или «Другой» в палитре цветов Adobe.Назначение URL-ссылок фрагменту превращает всю область фрагмента в ссылку на заданную веб-страницу. Когда пользователь щелкает ссылку, веб-браузер переходит на указанный URL-адрес и целевой фрейм. Этот параметр доступен только для фрагментов типа «Изображение».
Выберите фрагмент. Чтобы открыть диалоговое окно «Параметры фрагмента» выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент. Также можно ввести имя целевого фрейма в текстовое поле «Цель».Отображает связанный файл в новом окне, оставляя открытым исходное окно браузера.
Отображает связанный файл в том же фрейме, что и исходный файл.
Отображает связанный файл в собственном исходном наборе фреймов. Используйте этот параметр, если HTML-документ содержит фреймы и текущий фрейм является дочерним. Связанный файл появится в текущем родительском фрейме.
Заменяет все окно браузера связанными файлами, удаляя все текущие кадры. Название должно соответствовать ранее заданному названию кадра в файле HTML документа. При щелчке ссылки указанный файл появляется в новом фрейме.
Дополнительные сведения о фреймах см. в руководстве по HTML.
Выберите фрагмент. Чтобы открыть диалоговое окно «Параметры фрагмента», выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент. В диалоговом окне «Параметры фрагмента» введите необходимый текст.Определяет атрибут «Alt» для выбранного фрагмента или фрагментов. Текст атрибута «Alt» появляется вместо изображения фрагмента в браузерах, не поддерживающих графику. Он также появляется вместо изображения во время его загрузки и отображается как подсказка в некоторых браузерах.
При выборе фрагмента типа «Без изображения» можно ввести текст, который будет отображаться в области фрагмента на веб-странице. Это может быть неформатированный текст или текст, отформатированный стандартными HTML-тегами. Также можно выбрать вертикальные и горизонтальные параметры выравнивания. Дополнительные сведения о HTML-тегах см. в руководстве по HTML.
Photoshop не отображает HTML-текст в окне документа. Для просмотра текста необходимо использовать веб-браузер. Следует просмотреть HTML-текст в различных браузерах, с различными настройками браузеров и на различных операционных системах, чтобы быть уверенным в том, что текст отображается правильно.
Количество текста во фрагменте типа «Без изображения» может влиять на макет экспортированной страницы.
Выберите фрагмент. Чтобы открыть диалоговое окно «Параметры фрагмента» выберите инструмент «Выделение фрагмента» и дважды щелкните фрагмент. Дважды щелкнув фрагмент в диалоговом меню «Сохранить для Web и устройств», можно установить дополнительные параметры форматирования. В диалоговом окне «Параметры фрагмента» в меню «Тип фрагмента» выберите тип фрагмента «Без изображения». Если текст содержит теги форматирования HTML, выберите параметр «HTML-текст» (только для диалогового окна «Сохранить для Web и устройств»). Если этот параметр не выбран, HTML-теги будут игнорироваться, а текст на итоговой веб-странице будет отображаться в виде неформатированного текста.Вы можете задать необходимые параметры в разделе «Выравнивание ячеек» (только для диалогового окна «Сохранить для Web и устройств»):
Используются установленные по умолчанию в браузере значения выравнивания по горизонтали.
Текст выравнивается по левой стороне области фрагмента.
Текст выравнивается по центру области фрагмента.
Выравнивание по правому краю
Текст выравнивается по правой стороне области фрагмента.
Используются установленные по умолчанию в браузере значения выравнивания по вертикали.
Текст выравнивается по верхней части области фрагмента.
По базовой линии
Устанавливает общую базовую линию для первой строки текста в ячейках одного ряда (итоговой HTML-страницы). Для каждой ячейки ряда должен быть установлен параметр «По базовой линии».
О дизайне емейл-рассылок написано не одна сотня статей. Хорошо продуманная и сбалансированная визуальная часть письма повышает количество кликов в письме и количество ваших продаж. Поэтому преобразование шаблона, подготовленного вашим дизайнером в формате psd, один из важных и сложных этапов в подготовке емейл-рассылки.
Качество преобразования psd в html влияет на то, как ваша рассылка отобразится на экранах ноутбуков, планшетах и мобильных телефонах клиентов.
Зачем создавать шаблон письма в Photoshop?
Обычно с шаблоном в формате psd проще поставить ТЗ верстальщику. В Photoshop отображаются все необходимые элементы: размер и название шрифтов, слои с различными элементами письма. Верстальщики “читают” такой макет и на его основании создают письмо в виде HTML.
Почему отправка письма должна быть в HTML?
Начнем с того, что не все сервисы для отправки писем даже будут поддерживать такой формат, поэтому вероятнее всего его придется сконвертировать в png или jpeg. Но если ваше письмо будет состоять только из картинок - с ним может возникнуть гораздо больше проблем. Есть ряд причин для конвертации электронного письма из PSD в HTML.
Давайте рассмотрим на примере, как оптимально перенести макет письма в систему рассылок.
Получаем макет письма в формате PSD
Первое, что нужно для работы - грамотно составленный шаблон письма.
PSD-шаблон должен быть выполнен в вашем корпоративном стиле, привлекательным и продуманным. Тем не менее, дизайнеры емейлов не пользуются такой же творческой свободой, что и разработчики веб-сайта.
Основные требования к шаблону следующие:
- Ширина письма не должна превышать 600 пикселей.
Имеется в виду именно информационная область письма, на фоне может быть подложка, которая заполнит свободное пространство на широкоформатных мониторах
Существует достаточно ограниченное количество поддерживаемых почтовиками шрифтов, поэтому используем стандартные: Arial, Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana. Текст необходимо разбивать на смысловые абзацы, использовать разный размер шрифта, заголовки и подзаголовки.
- Соотношение текстовой части и изображений.
Учитывая то, как много почтовых клиентов по умолчанию блокируют загрузку картинок, может получиться так, что текстовое содержание единственная вещь которую увидят ваши получатели. Проверяйте соотношение текста и картинок, идеально - 50:50 или 60:40, не делайте письмо одним изображением.
Адаптируем макет psd для рассылки
Давайте рассмотрим на примере, как правильно адаптировать psd для email-рассылки.
Ознакомление с макетом
Наш шаблон соответствует требованиям: ширина контентной части 600 рх, используется стандартный шрифт Arial, изображения и текст находятся на различных слоях.
Создание сайта — трудоемкий процесс, потому что необходимо не только продумать логику работы и разработать стиль, но еще сверстать и запрограммировать страницу.
Часто бывает так, что дизайнер рисует хороший макет, а после верстки качество заметно падает: появились лишние отступы, пропали элементы, а текст выходит за рамки контентной области. Скорее всего это произошло, потому что дизайнер плохо подготовил макет для верстки.
Чтобы передавать файлы разработчикам правильно, необходимо знать, для чего нужен макет, в какой программе его лучше делать и какие есть требования к оформлению.
Для чего нужен макет
Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создает макет сайта, затем передает исходники разработчику.
Макет сайта — это графическое представление внешнего вида. Проще говоря, это рисунок, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте.
При работе над макетом в графическом редакторе у дизайнера нет ограничений. Если выбранный шрифт не подходит, его можно поменять в один клик. Если кнопка выглядит неудачно, можно легко изменить ее цвет и размеры.
Разработчик получает от дизайнера макет в графическом формате. Затем с помощью HTML и CSS, языка для разметки страниц и таблицы стилей, приводят макет в такой вид, который понимают браузеры. После этого макет уже можно открыть в браузере или опубликовать в интернете.
Правила создания макета
Верстальщик постоянно сверяется с исходными файлами, которые получил от дизайнера. Смотрит отступы и расстояния, копирует текст, задает нужные стили.
Часто дизайнер в спешке отправляет макет разработчику и при этом забывает проверить работу на ошибки и недочеты. А верстальщик может не заметить какую-то ошибку и опубликовать на сайте.
Обычные ошибки дизайнера:
- Не удалил скрытый слой, в котором был старый вариант, а разработчик добавил этот элемент на сайт.
- Не сгруппировал элементы, а разработчик тратит несколько часов на то, чтобы разобраться в макете.
- Ошибся и задал слишком большой отступ для элемента, а разработчик сверстал макет в таком виде.
Чтобы это происходило реже, необходимо соблюдать основные правила создания макета и взаимодействия с верстальщиком.
1. Договоритесь про формат файлов
Начинающие дизайнеры часто не знают, в какой программе можно сделать макет. Изучают разные графические редакторы, выбирают удобный для себя.
Популярный редактор — Adobe Photoshop . Это универсальный инструмент для работы с любой графикой: фотографы обрабатывают там снимки, иллюстраторы работают над рисунками, а веб-дизайнеры делают макеты. Файл, в который сохраняется макет в Photoshop, имеет расширение .psd . Его отправляют разработчикам как PSD-макет для сайта.
Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.
Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign .
Перед тем, как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать все в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?
2. Следуйте требованиям интерактивного дизайна
Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс верстки.
- Выберите цветовую модель RGB перед созданием макета. Это стандарт для мониторов и экранов.
- Пользуйтесь сеткой, чтобы выравнивать контент внутри макета.
- Не увеличивайте маленькие картинки.
- Изменяйте размер изображений с зажатой клавишей Shift, чтобы сохранять пропорции.
- Если нужен наклонный или жирный текст, используйте одно из начертаний шрифта. Не пользуйтесь псевдостилями для того, чтобы изменить внешний вид букв в Photoshop и других редакторах.
3. Избавляетесь от дробных расстояний
Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми четными числами. Не используйте нечетные числа и дроби.
4. Наведите порядок в слоях и артбордах
Во время работы над макетом дизайнер располагает слои в хаотичном порядке, не переименовывает их, скрывает неподходящие варианты. С таким макетом сложно работать верстальщику и другим специалистам, в нем нет структуры.
Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.
Так же по теме
Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта. И конечно же Вы сможете посмотреть демо шаблона в действии.
Подготовка
Для начала нам необходимо создать простую папку, желательно на рабочем столе, чтобы не потерять её. Там будут лежать все наши файлы, которые входят в шаблон сайта.
Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.
Всё. В принципе мы первый шаг уже сделали. :) Переходим к добавлению кода HTML.
Добавляем разметку HTML
Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.
Открываем наш текстовый документ index и вставляем в него следующий код:
Теперь давайте подробнее остановимся на коде.
Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.
Шапка сайта
За верх сайта у нас отвечает вот этот код:
Середина сайта
За средний участок отвечает вот этот код:
Низ сайта
С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.
Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.
Вёрстка HTML и CSS
Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет :( Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.
CSS
Добавляем вот этот код CSS
Для списков мы отключили точки, а для ссылок отменили подчеркивание.
Это так сказать стандартные стили, их можно изменять по собственному желанию.
Главные блоки (верх, середина и низ)
Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.
Верхнее меню
В коде HTML между тегами <div добавляем следующий код, который отвечает за меню:
Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:
А вот теперь мы можем смело добавить стили для нашего меню, вот они:
Вот, что должно получиться:
Иконки социальных закладок
Теперь под HTML кодом меню добавляем вот этот код:
А в стили CSS нужно добавить вот это:
Логотип
Главное, выпадающее меню
Под кодом логотипа добавляем код главного меню:
Но не будем спешить добавлять стили, сначала нужно вырезать фон из макета PSD.
Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):
Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:
Теперь по выделенной области нажимаем левой кнопкой мыши два раза. После этого тот фон, что нам нужен для меню автоматически обрежется. Вам только нужно сохранить его для web в папку images под именем bgmenu.
Ну а сейчас можно смело добавлять CSS:
Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:
Левый блок с последними записями
Теперь будем добавлять блоки с последними записями. После тега <div пишем следующий код:
Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.
Самая последняя строчка в коде <div отвечает за разделитель между постами.
И конечно же не забываем про CSS для постов:
Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:
Правая часть (Сайдбар)
Добавляем поиск. После тега <aside вставляем следующее:
И стили для поиска:
Виджет
После кода поиска вставляем:
Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.
CSS код виджетов:
Футер
После тега <div вставляем код для логотипа и нижнего меню:
В конечном итоге получаем вот такой шаблон:
Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится :)
В общем если у Вас будут вопросы спрашивайте в комментариях.
Читайте также: