Сайт

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

20.04.1988

Содержание

Photoshop для верстальщика

Напомню, сперва для сайта делается дизайн. Дизайн — это изображение будущего сайта. Дизайнится каждая типовая страница сайта (главная страница, страница новости, страница товара, страница каталога, страница записи блога и т.д.).

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

А вот Photoshop требует небольшого обучения. И Photoshop — это самая популярная программа для создания дизайнов.

Уточню, что дизайн это не цельное изображение. Дизайн страницы сайта состоит из множества частей и картинок. Каждую отдельную картинку из Photoshop можно скачать и установить в верстку. Но лучше это, конечно, понять на деле.

Photoshop нужно скачать и установить на компьютер.

Изучать Photoshop Вы будете на примере этого дизайна design. zip.

Скачайте архив. Внутри находится только 1 файл design.psd. Откройте этот файл в Photoshop.

При открытии файла у Вас появится несколько диалоговых окон:

1.

Здесь нажмите «Сохранить слои».

2.

Здесь нажмите «ОК».

3. И третьей окно, в котором написано «Некоторые текстовые слои содержат шрифты…». Здесь нажмите «ОК».

После этого откроется дизайн.

Первое на что нужно обратить внимание, это чтобы в левой панели фотошопа был выбран курсор:

Дальше. Сейчас у Вас дизайн открыт в маленьком масштабе. Чтобы увеличивать или уменьшать масштаб нужно зажать клавишу Alt и крутить колесико мышки.

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

Извлечь определенную картинку из дизайна в Photoshop

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

Чтобы выбрать любой объект в дизайне нужно зажать клавишу ALT и щелкнуть по этому объекту правой кнопкой мыши. Поэтому зажмите клавишу Alt и щелкните правой кнопкой мыши по указанной картинке.

Посмотрите в правую панель фотошопа. Там выделена наша картинка:

Теперь здесь в правой панели нажмите на название этой картинки правой кнопкой мыши. Именно на название картинки, а не на квадратик. После нажатия появится окно, в котором нужно выбрать «Создать дубликат слоя…».

Появится другое окно:

В этом окне нужно в поле Документ выбрать «Новый» и нажать кнопку ОК.

После этого картинка откроется в отдельном окне фотошопа:

Но вместе с картинкой иногда открывается лишняя область. Чтобы эту область убрать нужно сделать следующее. Зажать клавишу Ctrl и в правой панели фотошопа нажать мышкой на квадратик рядом с названием картинки:

После этого картинка выделится пунктирной линией. Теперь нужно в левой панели выбрать инструмент «Рамка» и нажать на Enter 2 раза:

После этих действий у вас останется только картинка без лишней области. Осталось картинку сохранить на компьютер. Делается это сочетанием 4 клавиш: Ctrl+Alt+Shift+S. Вот так в фотошопе. Нужно постараться, чтобы сохранить картинку. Если не хотите нажимать эти 4 клавиши, то можно мышкой выбрать меню «Файл», а в нем выбрать «Сохранить для Web…»:

После этого откроется диалоговое окно для сохранения картинки:

Здесь нужно просто выбрать формат: обычно это JPEG или PNG-24. И нажать кнопку «Сохранить».

Определить код цвета в Photoshop

Следующее, что часто нужно будет делать — это точно определить цвет. Делается это очень просто. В левой панели фотошопа нужно выбрать инструмент «Пипетка»:

И теперь этой пипеткой можно ткнуть в нужный цвет в дизайне. Ткнуть достаточно 1 раз. Нужный цвет можно будет посмотреть в левой панели фотошопа вот здесь:

Просто кликните 1 раз по этому квадратику и у Вас откроется диалоговое окно, где можно скопировать код цвета:

Определение шрифта в Photoshop

Часто нужно определить шрифт, его размер и цвет. А также, обычный стиль шрифта (Regular) или жирный (Bold).

Для этого, так же как и для выбора картинки нужно зажать клавишу Alt и правой кнопкой мыши нажать на нужный шрифт. Например, в нашем дизайне определим шрифт для навигации в самом верху. Зажмите Alt и правой кнопкой мыши нажмите на слово Home. В правой панели фотошопа выделится нужный шрифт. Здесь же в правой панели нажмите двойным кликом на квадрат с буквой Т рядом со шрифтом:

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

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

Стрелками я указал, какая информация нам интересна. Слева направо:

  • семейство шрифтов (название шрифта). В CSS это font-family;
  • стиль и начертание шрифта. Если здесь указано Regular, то это обычный шрифт. Если Bold, это это жирный шрифт и в CSS у него будет font-weight: bold;. Если Italic, то это курсив, и в CSS нужно будет прописать font-style: italic;
  • размер шрифта. В CSS размер шрифта указывается свойством font-size;
  • цвет шрифта. В нашем случае здесь стоит знак вопроса, потому что не весь шрифт одного цвета. Слово Services в навигации отличается цветом. Чтобы узнать цвет конкретного слова, нужно выделить мышью именно это слово прямо в дизайне. Например, если Вы сейчас выделите слово Home, то знак вопроса пропадет. Чтобы получить цвет, нужно кликнуть мышью по этому прямоугольнику с цветом шрифта, и появится уже знакомое диалоговое окно с кодом цвета.

Кстати, в дизайне в навигации слово Services сделано другим цветом не просто так. Таким образом дизайнер показал, как в верстке должны будут выглядеть ссылки навигации при наведении на них курсора мыши. Ведь навигация на сайте представлена ссылками. Если говорить об этом дизайне, то на будущем сайте можно будет нажать на Home, About, Services и т.д.

Ну, а эффект наведения в верстке делается в CSS псевдоклассом :hover.

Помните, чтобы выделить текст, он должен быть сперва выбран в правой панели фотошопа. Если Вы просто в дизайне начнете стараться выделить каждый текст, как делаете это в Word, то у Вас ничего не получится. Нужно сперва зажать Alt и нажать на текст правой кнопкой мыши, и действовать далее, как уже описано выше.

Определить расстояние, размеры

В CSS существуют внешние и внутренние отступы (margin и padding). Когда Вы будете делать верстку по дизайну, нужно будет прописывать отступы между элементами в соответствии с дизайном. Определить расстояние между элементами в Photoshop можно разными способами. Один из самых простых — это использовать инструмент «Прямоугольная область» в левой панели фотошопа.

В левой панели фотошопа выберите инструмент «Прямоугольная область»:

И теперь попробуйте определить расстояние между словами Home и About в дизайне:

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

Потом, чтобы убрать получившийся прямоугольник, просто нажмите сочетание клавиш Ctrl+D.

Чтобы получать наиболее точные расстояние увеличивайте масштаб дизайна зажав Alt и крутя колесико мышки.

Инструментом «Прямоугольная область» можно также определять размеры элементов и радиус закругления элемента (в CSS это свойство border-radius).

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

Еще немного о Photoshop

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

Обратите еще внимание на правую панель. А именно на иконки глаза. Если Вы выключите иконку глаза у какого-либо элемента, то в дизайне он станет невидимым. Если выключите эту иконку у всей папки, то пропадет всё, что есть в этой папке:

И когда Вы верстаете, обращайте внимание, не скрыто ли что-то. Часто дизайнеры скрывая элемент, показывают, как он будет виден на сайте при наведении мыши (:hover в CSS). То есть Вам нужно нажать на иконку глаза, чтобы посмотреть элемент дизайна.

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

Вместо слоя grid дизайнер мог использовать направляющие:

Их тоже верстать не надо. Чтобы их скрыть или отобразить нужно нажать сочетание клавиш Ctrl+;. Или можно вверху фотошопа зайти в «Просмотр», там выбрать «Показать» и там кликнуть на «Направляющие.

Еще момент. Иногда удобно видеть рамку вокруг элемента, с которым Вы работаете. Для этого в верхней панели Photoshop нужно нажать галочку «Показать упр. элем.»:

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

Дальше. В левой панели почти у всех инструментов есть сопутствующие инструменты. Чтобы их увидеть нужно на инструмент нажать правой кнопкой мыши:

Ну, и последнее, прямо сейчас поменяйте пункты на пиксели. После этого шрифт у Вас будет измеряться в пикселях (px), а не в пунктах (pt). Для этого зайдите в «Редактирование» → «Установки» → «Основные»:

Откроется окно. В нем зайдите в «Единицы измерения и линейки». И там для линеек и текста выберите пиксели. Нажмите кнопку «Ок»:

что это такое, как пользоваться вёрсткой

Когда макет сайта, лендинга или письма совпадает с HTML-вёрсткой пиксель в пиксель, значит верстальщик использовал технику Pixel Perfect. При такой технике отклонение между макетом и готовым HTML-шаблоном — 1-3, максимум 5 пикселей.

Как понять, что шаблон свёрстан в Pixel Perfect?

Откройте код в браузере и наложите сверху полупрозрачную картинку-макет. Если не видна разница, и все элементы полностью совпадают, значит верстальщик работал в Pixel Perfect.

Стрелочками указаны области, где вёрстка и макет не совпадают. При Pixel Perfect таких неточностей быть не должно

Читайте также

HTML-вёрстка писем — полная инструкция

Когда использовать Pixel Perfect

Идея техники — добиться точного соответствия вёрстки с разработанным дизайном.

Когда верстальщик получает от дизайнера PSD-макет и приступает к написанию кода, он может обнаружить, что:

  1. Шрифты в некоторых браузерах выглядят по-разному: где-то жирнее, где-то тоньше. Верстальщик может не обратить на это внимание и перенести шрифт из макета в вёрстку как есть. В результате заказчик может быть недоволен, что результат не тот, что ожидался.
  2. Дизайнер допустил ошибки в макете. Например, иконка, место которой в центре, съехала влево. Или у границ таблицы разная толщина. Pixel Perfect поможет выявить это и исправить до продакшена.

Поэтому такую вёрстку применяют, когда важно, чтобы будущая страница выглядела одинаково хорошо в каждом браузере: объекты имели одни и те же поля, а шрифты — начертание. Или если важно, чтобы вёрстка полностью соответствовала шаблону.

Преимущества техники

Клиент получает то, что ожидает

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

С Pixel Perfect таких ситуаций можно избежать. Ведь готовая страница полностью соответствует макету.

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

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

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

Вёрстка происходит быстрее

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

Недостатки

Страницы сложно менять

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

В Pixel Perfect никаких групп нет, у каждого элемента свой стиль. Собрать новую страницу из таких элементов трудно, и добавление новых разделов сайта займёт много времени.

Также трудно поддерживать вёрстку имеющихся страниц. Стоит только добавить ещё одно меню или текстовый блок, как вся страница разъедется.

Поэтому такую вёрстку стоит применять для тех проектов, которые не будут изменяться в будущем. Например, для электронных писем.

Инструкция: как начать верстать в Pixel Perfect

Для техники точной вёрстки нужно скачать специальные плагины. Они позволят наложить полупрозрачный макет страницы поверх HTML-шаблона и найти несоответствия.

Рассмотрим бесплатные плагины для Mozilla Firefox и Google Chrome.

Как скачать и установить плагин Mozilla Firefox

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

Нужно нажать на «Дополнения», чтобы перейти к поиску плагина

В поисковом поле набираем «Pixel Perfect» и нажимаем Enter.

Поиск плагина вёрстки

Выбираем Pixel Perfect Pro и добавляем в браузер.

Жмём «Добавить в Firefox»

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

Теперь открываем в браузере Mozilla Firefox HTML-код и через иконку в панели навигации вызываем плагин.

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

Форма для загрузки PNG-макета сайта

В результате вот что отобразит браузер: HTML-макет страницу с наложенным поверх PNG-макетом. Те области, которые выглядят нечёткими или двоятся, сверстаны не в Pixel Perfect.

Наложение макета на вёрстку

Теперь блокируем слои, чтобы картинка PNG никуда не съехала. Для этого жмём на значок замка на панели плагина справа. Можно подвигать бегунки прозрачности и инверсии, чтобы сильнее выделить неточности.

Окно настройки плагина

Когда все настроено, открываем инспектор и вносим правки в код.

Читайте также

Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы

Как скачать и установить плагин Google Chrome

Открываем браузер, заходим в интернет-магазин Chrome и набираем в поисковой строке Perfect Pixel.

Поиск плагина в Google Chrome

Кликаем по плагину, переходим в следующее окно и выбираем «Установить». Когда плагин установится, открываем в Google Chrome HTML-код и запускаем плагин.

Так выглядит иконка Perfect Pixel

Откроется меню. В нём жмём на «Добавьте ваш первый слой!».

Меню Perfect Pixel

Загружаем PNG-шаблон страницы, выравниваем и нажимаем значок замочка — картинка заблокирована. Через бегунки можно поменять прозрачность или усилить контраст через инверсию.

Чтобы подогнать вёрстку под макет, надо открыть инспектор и поправить код.

Применение Pixel Perfect вёрстки в email-рассылках

Вёрстку пиксель в пиксель удобно использовать для электронных писем. Так как код письма не нужно менять со временем — добавлять новые разделы или элементы — не будет путаницы в стилях.

Применение Pixel Perfect позволяет доводить вёрстку до идеала: письма максимально приближены к макетам, отображаются без искажений на любых устройствах и в браузерах.

Читайте также

Клиентам о email-маркетинге, часть 3. Дизайн, вёрстка, текст рассылки

Подведём итог

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

Для крупных сайтов и веб-страниц техника вёрстки пиксель в пиксель может быть неудобна. Поддерживать код, в котором у каждого элемента свой стиль, трудно.

А вот для вёрстки email-рассылок такая техника может подойти. Письма получаются один в один как на макете дизайнера и отображаются одинаково во всех браузерах.

Поделиться:

Верстка сайта Pixel Perfect — Создание сайтов, продвижение в Волгограде, Москве, России. Оптимизация, обслуживание сайтов. Веб-студия ONVOLGA (Волгоград)

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

Существует несколько специальных инструментов, облегчающих верстку в стиле Pixel Perfect. К ним относятся как решения для браузеров, так и специализированные скрипты. Рассмотрим данные решения более подробно.

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

Pixel Perfect под Firefox

Для браузера Firefox имеется плагин Pixel Perfect для проверки сверстанной страницы.

После установки плагина Pixel Perfect его значок появится в панели инструментов браузера Firefox. Стоит сказать, что плагин Pixel Perfect поддерживает только последние версии браузера Firefox (к примеру, в версии v.31 этот плагин не будет работать).

Как уже говорилось выше, нужно открыть в Photoshop оригинальный PDS-макет и сохранить его в формате .png. Стоит помнить, что перед экспортом в PNG-изображение PSD-макет необходимо привести к оригинальному размеру! Для этого в Photoshop зарезервирована комбинация hotkeys: Ctrl+1 — под Windows\Linux, Cmd+1 — под Mac OS X.

Как только PNG-копия PSD-макета подготовлена и сохранена, открываем в окне браузера Firefox сверстанную по этому макету HTML-страницу. Запускаем плагин Pixel Perfect щелчком мыши по его иконке в панели инструментов браузера. Сразу же появится окно плагина, в котором он предложит нам выбрать заранее подготовленное PNG-изображение (копию PSD-макета):

Жмем на кнопку «Add Layer», выбираем подготовленное PNG-изображение и получаем результат — наложение двух слоев (сверстанного и оригинального):

Видим, как не совпадают текст и кнопка HTML-страницы c PNG-оригиналом. Поэтому открываем инструменты разработчика (клавиша F12) и начинаем правку\подгонку стилей, чтобы свести различия к нулю.

В описанном выше процессе и заключается работа с плагином Pixel Perfect, а также Pixel Perfect верстка как таковая. Все предельно просто.

Perfect Pixel под Google Chrome

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

Функционал схож и по-прежнему интуитивно понятен.

Устанавливаем PerfectPixel под браузер Chrome. После установки PerfectPixel необходимо зайти в настройки расширений браузера Chrome — chrome://extensions/ и активировать для плагина галочку «Allow access to file URLs», тем самым разрешив плагину доступ к локальным HTML-страницам:

После этого запускаем плагин PerfectPixel, добавляем в нем новый слой (PNG-копию оригинала) и проверяем:

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

X-Precise

Если в двух предыдущих случаях были рассмотрены бесплатные плагины под два популярных браузера Firefox и Chrome, то в данном случае речь пойдет о платном ($5 на момент написания статьи) скрипте X-Precise, написанном на JavaScript и использующем библиотеку jQuery.

Сразу скажем пару слов о том, зачем нужны скрипты, если есть удобные решения для браузеров. Неоспоримое преимущество скриптов заключается в том, что они абсолютно не зависят от браузера. Они одинаково хорошо работают в Firefox, Chrome, Opera, Safari. А также не зависят от конкретной версии браузеров. Перейдем непосредственно к рассмотрению работы с первым скриптом.

Подключение X-Precise

Для того, чтобы получить наложение картинки-оригинала на сверстанную страницу нужно подключить скрипт X-Precise к этой странице. Для этого необходимо скачать архив X-Precise. Затем нужно распаковать папку _xprecise в корневую директорию проекта и подключить скрипт xprecise.min.js к HTML-странице для запуска интерфейса Х-Precise. Не забывайте, что скрипт требует для корректной работы наличие библиотеки jQuery (v1.3.2). Вот так должно выглядеть подключение данного скрипта:

Затем нужно создать копии PSD-оригиналов в формате JPG и сохранить под тем же именем, что и файл оригинала в директории /_xprecise/ скрипта X-Precise.

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

Скрипт X-Precise попытается автоматически загрузить JPG-изображение из директории /_xprecise/ по имени файла этого изображения, считая, что имя файла изображения идентично имени файла открытой HTML-страницы (index.html -> index.jpg).

Но это не означает, что нельзя загрузить файл изображения с другим именем. Для этого достаточно задать другой путь к файлу в интерфейсе скрипта X-Precise.

Основным достоинством скрипта X-Precise является его способность автоматически запоминать и хранить все настройки.

В целом, интерфейс скрипта X-Precise и его применение ничем не отличается от плагинов Pixel Perfect или PerfectPixel.

pixLayout

pixLayout — второй скрипт под библиотеку jQuery, предназначенный для попиксельной верстки. Однако, в отличие от предыдущего скрипта, pixLayout бесплатный.

Для своей работы скрипт pixLayout может использовать изображение в двух популярных форматах — JPG или PNG.

Домашняя страничка проекта расположена здесь — http://pixlayout.

polycreative.ru/. Скрипт прекрасно документирован на русском языке, так что проблем с пониманием принципа его работы возникнуть не должно.

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

Краткая справка по использованию скрипта pixLayout

Краткая справка по использованию скрипта pixLayout приведена в двух абзацах ниже  (взята с официального сайта):

Перемещение

кнопки: ‘влево’, ‘вправо’, ‘вверх’, ‘вниз’

кнопки: W, A, S, D, когда картинка видима
кнопки панели навигации

Операции

Уничтожить (удалить весь html и css код pixLayout со страницы) — крестик в правом верхнем углу панели;
Закрепить панель — иконка в правом верхнем углу панели;
Краткая справка — знак вопроса в правом верхнем углу панели;
Свернуть параметры — стрелка «вверх» внизу панели;

Показать\убрать картинку — центральная кнопка панели навигации или Shift + E.

Мы закончили краткий экскурс в тему попиксельной верстки Pixel Perfect. У верстальщиков много инструментов, которые они могут успешно применять для достижения желаемого результата. Чем пользоваться? Решать только Вам.

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

В заключении хочется сказать, что техника Pixel Perfect проста в освоении. Однако, ее реализация может занять много времени. Поэтому всегда нужно помнить о неком компромиссе между макетом и шаблоном.

PSD в HTML — глупый способ сделать веб-сайт (лучший способ? ручка и бумага) | Итан Райан

Файл данных Photoshop нарезан и преобразован в HTML и CSS

Интервью прошло хорошо.

Мне понравилось беседовать с моими интервьюерами о том, что их компания предлагает своим клиентам и с какими проблемами сталкивается их инженерная команда.

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

Затем я получил вызов кода.

«Учитывая, что большинство наших проектов будут связаны со сборкой/управлением WordPress, как бы вы отнеслись к превращению PSD в WordPress в качестве домашнего задания — чего-то очень простого, что можно было бы сделать быстро?»

«Вызов кода не проблема», — ответил я. — Я могу начать это сегодня.

Он прислал мне PSD.

Я начал гуглить «конвертировать PSD в HTML» и «конвертировать PSD в WordPress».

Я начал читать о нарезке слоев в Photoshop и понял, что мне нужен Photoshop, чтобы действительно что-то сделать с этим PSD-файлом.

В интервью мы говорили о HTML, CSS и Javascript, а также о jQuery и React, а также о WordPress и PHP, с которыми у меня был небольшой опыт, хотя я занимался бэкэндом с Ruby и Ruby. на рельсах. Но мы не говорили о фотошопе, с которым у меня было очень мало опыта.

Возможно, люди просто предполагают, что у всех есть опыт работы с Photoshop, как у всех есть опыт работы с Microsoft Word и Excel. Вероятно, это безопасное предположение. Но я не очень дизайнер. Однажды я сделал каркасы с Balsamiq, когда консультировал стартап, но для своих собственных приложений и веб-сайтов я всегда полагался на проверенный и надежный метод ручки и бумаги.

pen-and-paper.jpg

К счастью, Adobe предлагает 7-дневную бесплатную пробную версию Photoshop.

Мой опыт работы с PHP был ограничен, и хотя несколько лет назад мне нравился WordPress, потому что он предлагал приятный интерфейс для нетехнических людей, желающих создать веб-сайт, глядя на него сейчас, после создания нескольких веб-сайтов с нуля, все казалось таким раздутый кодом. Разве я не могу просто использовать Bootstrap?

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

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

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

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

В любом случае, вернемся к моему более раннему вопросу «Кто делает такие веб-сайты?»

Я нашел хороший пост в блоге Treehouse под названием «PSD to HTML is Dead», в котором, как мне кажется, есть несколько хороших моментов:

  1. PSD в HTML — это рабочий процесс, который выглядит следующим образом:
    * создайте макет в Photoshop того, что вы хотите чтобы ваш сайт выглядел как
    * используйте инструмент среза, чтобы разделить изображения сайта
    * напишите HTML и CSS, которые включают изображения, чтобы воссоздать «точную до пикселя» копию макета Photoshop
  2. Когда-то рабочий процесс преобразования PSD в HTML имел смысл, потому что браузеры не поддерживали все функции современного CSS, поэтому дизайнерам приходилось делать с изображениями такие вещи, как создание теней и скругленных углов, а затем разработчики использовали эти изображения. на веб-сайтах. Кроме того, Интернет был доступен только в настольных браузерах, поэтому никому не приходилось беспокоиться о том, каким будет сайт на телефоне или iPad.
  3. Но в наши дни люди просматривают веб-сайты с iPhone, iWatches, iGlasses или чего-то еще, так что «пиксельное совершенство» Photoshop не имеет значения. Сайты теперь отзывчивые. Сайты выглядят по-разному на разных устройствах и должны хорошо выглядеть на всех устройствах. Если вы дизайнер, предоставьте разработчику все графические ресурсы заранее, а не PSD, чтобы они могли их нарезать. Затем позвольте разработчику сходить с ума, стилизуя изображения с помощью CSS и заставляя их правильно масштабироваться в браузерах на устройствах разного размера.

в наши дни люди просматривают веб-сайты на iPhone, iWatches, iGlasse или на чем-то еще

Цитируя это сообщение в блоге 99designs: «Отзывчивый веб-дизайн адаптирует контент к экрану устройства. … Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях».

Кое-что, что я узнал о себе, это то, что я испытываю сильные чувства к вещам, о которых я понятия не имел, что у меня есть сильные чувства. Я увижу glorp в первый раз и скажу: «Мне не нравится glorp! Глорп тупой! А потом через неделю скажу: «Я люблю glorp! Глорп лучший!» Я непостоянный огурец. Ммм, огурчики.

perfection — это поиск в Google

Мне не нравится термин «pixel perfect». В последнее время я встречаю этот термин в объявлениях о вакансиях, и каждый раз, когда я его вижу, я думаю, что это «отвратительно». Но я предвзят. Я вообще не люблю совершенства. Совершенство — враг хорошего. Это цитата или неверная цитата кого-то. Я этого не придумал. Но я полностью согласен с этим. Мне нравится стремиться к величию, но я также предпочитаю практичность идеализму. Иногда хорошее лучше, чем лучшее.

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

Эта статья «От PSD к HTML мертва» заканчивается рассказом о том, почему Photoshop по-прежнему важен для веб-дизайна, который я процитирую здесь в большом отрывке: средство коммуникации при работе с клиентами веб-дизайна. … Макет высокой точности может служить инструментом обсуждения перед написанием большого количества кода (только для того, чтобы обнаружить, что это не то, что хотел клиент).

И номер 2:

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

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

Независимо от того, получу ли я эту работу или нет, на этой неделе я узнал кое-что полезное:

— PSD в HTML — когда-то и до сих пор популярный рабочий процесс веб-дизайна и веб-разработки

— Меня не очень волнует PSD в HTML рабочий процесс

— Я непостоянный огурчик. У меня есть твердое мнение о вещах, о которых я даже не подозревал, что у меня есть мнение, и эти мнения могут легко измениться. Возможно, через неделю мне понравится рабочий процесс PSD в HTML. Неделю назад я даже не знал, что такое PSD в HTML. Люди странные и глупые существа, не так ли?

Спасибо за внимание! Теперь выйдите на улицу и обнимите дерево.

Hugatree

Пока.

Преобразование PSD в HTML5

Преобразование PSD в HTML5 в несколько кликов. Export Kit превращает PSD в HTML5 и CSS веб-сайты быстро, легко и безболезненно из любого Photoshop PSD, предоставляя расширенные функции HTML и CSS. За считанные минуты вы можете получить чистое и правильное преобразование PSD в HTML5 из ​​Photoshop с помощью Export Kit.

Вручную процесс экспорта из PSD в HTML5 может занять пару дней для простого дизайна и до нескольких месяцев для сложного дизайна из PSD в HTML5 — кто хочет работать так усердно, когда вы можете работать с умом с помощью Export Kit!

Экспорт PSD в HTML5 имеет полную поддержку CSS с эффектами слоев как с текстом, так и с элементами формы. Вы можете напрямую конвертировать Photoshop PSD в HTML и CSS с помощью Export Kit за несколько минут. Опытные пользователи также могут добавить поддержку JavaScript и PHP непосредственно в Photoshop, используя наши теги слоя.

 Попробуйте наше новое подробное руководство по преобразованию PSD в HTML5 — Просмотреть сейчас

Мы рекомендуем вам прочитать об использовании Export Kit, Export Kit Pro и HTML5 Output, прежде чем преобразовывать PSD в HTML5.

Полное видеоруководство — PSD в HTML (11 видео)

В этом руководстве вы узнаете, как перейти от простого экспорта PSD в HTML5 и CSS3 к полностью адаптивному веб-сайту HTML с 2 целевыми экранами и динамической высотой страницы.

Учитывая, что вы хотите преобразовать свой PSD в HTML5, мы можем предположить, что у вас есть готовый дизайн Photoshop. Обычно задача преобразования PSD в HTML5 может быть сложной, требующей базового уровня знаний для чистого и корректного кода. Export Kit избавит вас от головной боли в процессе экспорта и сэкономит вам много времени и бюджета при работе с вашими веб-проектами.

  ВАЖНО:  Используйте  настройки цвета RGB  , это значение по умолчанию для большинства сред — узнайте больше.
Тестирование в процессе работы

Важно тестировать дизайн в процессе работы — не вносите изменений во весь PSD-файл — затем экспортируйте и задайтесь вопросом, «что пошло не так». Это ничем не отличается от разработчика, который кодирует весь веб-сайт (без тестирования и компиляции), затем открывает браузер и задается вопросом… «Что пошло не так?»

  ВАЖНО:   ВЫ ДОЛЖНЫ ПРОВЕРИТЬ, ПРОВЕРИТЬ, ПРОВЕРИТЬ!

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

Загрузите другие бесплатные шаблоны веб-сайтов Export Kit, чтобы начать работу!

WYSIWYG – Что видишь, то и получаешь

То, что видишь, то и получаешь, буквально! Если вы увеличите масштаб до 100%, то, что вы увидите в своем PSD, — это то, что вы увидите на выходе.

  ПРИМЕР:  Если ширина вашего документа составляет 2400 пикселей, ширина вашего вывода будет 2400 пикселей. 
  ПРИМЕР:  Если в вашем PSD-дизайне поле содержимого составляет 500 пикселей, размер выходного содержимого будет начинаться с 500 пикселей. 
  СОВЕТ:  Обрежьте лишние пробелы в PSD, чтобы избежать визуальных ошибок — узнайте больше.

Всегда следует сначала создавать экспорт по умолчанию (то, что вы ожидаете увидеть), а затем настраивать PSD с параметрами вывода и тегами слоев.

Узнайте больше о наших правилах проектирования PSD для получения дополнительной информации.

Использование бесплатных онлайн-шаблонов PSD

С помощью Export Kit вы можете использовать любой бесплатный шаблон PSD, который найдете в Интернете, для создания веб-сайта HTML5 и CSS3. Бесплатные онлайн-шаблоны PSD потребуют некоторых изменений, чтобы обеспечить правильный веб-экспорт HTML5, который визуально поддерживает его согласованность с Photoshop.

Найдите в Google «бесплатные шаблоны psd» или «бесплатные шаблоны веб-сайтов psd».

Бесплатно не всегда легко

Имейте в виду, что многие бесплатные шаблоны PSD являются ТОЛЬКО ДИЗАЙНАМИ , и не структурированы и не организованы для экспорта в Интернет. невозможно сказать, как другой дизайнер может спроектировать свой макет, но есть некоторые общие вещи, которые вы можете сделать, чтобы убедиться, что PSD-файл можно использовать.

  1. Если вы обнаружите предупреждения и ошибки
    2. 9, сначала запустите вывод.0041 Удалить пустые папки и пустые слои
  2. Не получать сложный с бесплатным PSD, пока он не станет визуально стабильным не дублировать текст
Ожидаются изменения

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

Частое использование смарт-объектов

Частое использование смарт-объектов. Если вы обнаружите, что область в шаблоне PSD вызывает ошибки, преобразуйте элемент или родительскую папку в смарт-объект — избегайте головной боли . Как только ваш элемент станет смарт-объектом, вы можете ссылаться на содержимое позже при экспорте, используя тег смарт-объекта.

Узнайте больше о теге смарт-объекта.

Ознакомьтесь с нашими советами по оптимизации, чтобы узнать об исправлении распространенных ошибок с помощью бесплатных шаблонов PSD.

Импорт Illustrator .AI и объектов

Вы можете легко вырезать и вставить любой объект Illustrator в Photoshop, и он будет преобразован в смарт-объект. Затем смарт-объекты будут отображаться на выходе как изображения Smart Ojbect.

Документ Illustrator AI

Если вы конвертируете документ .AI в .PSD с помощью скрипта, вполне вероятно, что в вашем документе будет много слоев с именами Clip, Group or Path . Это обычные слои Illustrator, которые вам нужно будет преобразовать, чтобы документ отображался должным образом.

  ПРИМЕЧАНИЕ.  После того, как вы преобразуете эти слои в уважаемый смарт-объект, изображение или папку, ваш экспорт будет отображаться на 100% так, как ожидалось. 

  СОВЕТ:  Вы можете (а) удалить маску ссылок элементов или (б) создать новую папку и перетащить содержимое Группы в новую папку, а затем удалить старую Группу.

Узнайте больше об импорте файлов Illustrator .AI.

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

 Просмотрите шпаргалку по элементам, чтобы ознакомиться с нашей поддержкой HTML5.

Export Kit полностью поддерживает изображения, текст, фигуры, папки и эффекты слоев в Photoshop без тегов слоя. Все функции встроены в Export Kit, так что… просто будьте изобретательны! Все поддерживаемые слои и эффекты работают в большинстве распространенных сред.

Мы рекомендуем ознакомиться с нашими советами по оптимизации, чтобы ваши проекты экспортировались со 100% точностью до пикселя!

Порядок вывода слоя

Процесс слоя (часть процесса экспорта) для набора экспорта — это Восходящий процесс. Это означает, что Export Kit работает так же, как вы естественным образом создаете проекты в Photoshop без изменения вашего стиля дизайна.

  ПРИМЕЧАНИЕ. 
 
 Каждый слой обрабатывается, начиная с последнего или нижнего слоя (как правило, фонового слоя), затем вверх.

При добавлении новых слоев или папок в Photoshop вновь созданный элемент будет вложен поверх текущего выбранного слоя. Итак, если бы вам нужно было создать шаблон веб-сайта, вы бы начали с Заголовок , затем Контент , затем Нижний колонтитул . Вы можете, естественно, спроектировать, а Export Kit позаботится обо всем остальном.

Узнайте больше об организации папок и слоев.

Веб-сайты с фиксированной/статической высотой

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

Веб-сайты с динамической высотой

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

Использовать четкие имена слоев

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

Узнайте больше о наших правилах именования слоев для получения дополнительной информации.

Использование общих имен для элементов

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

  ВАЖНО:  Когда элементы четко обозначены, вы можете легко добавлять сценарии для управления объектами в выходных данных.

Используйте допустимые имена слоев

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

Узнайте больше об использовании допустимых имен слоев.

Использовать уникальные имена слоев

Все среды кода требуют элементов с уникальными именами для правильного отображения. Export Kit сделает все возможное, чтобы добавить уникальный идентификатор к каждому элементу (если ранее использовалось имя элемента), но это не гарантируется на 100% .

Мы настоятельно рекомендуем использовать уникальные имена в PSD-файле Photoshop, в противном случае на выходе, скорее всего, будут ошибки CSS — узнайте больше.

Export Kit всегда будет пытаться преобразовать имя каждого слоя в уникальное имя, но бывают ситуации, когда слои с именем SAME могут вызвать ошибки отображения на выходе.

Узнайте больше о наших правилах именования слоев для получения дополнительной информации.

Нет пустых слоев

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

  • Слой без имени
  • Слой без изображения/формы
  • Текстовый слой без текста
  • Папка без дочерних слоев
 Вам нужно будет (1) удалить слой из вашего PSD или (2) добавить содержимое в слой.

Организация папок и слоев

Структура папок и слоев в Photoshop является ключом ко всем проектам, поскольку разные среды имеют разные требования. Бывают ситуации, когда неправильные папки или слои могут вызвать нежелательные ошибки отображения на выходе. Организованный дизайн также обеспечивает организованный вывод, чего и хочет ваш клиент!

  ВАЖНО:  Мы рекомендуем вам использовать как можно больше слоев и папок для разработки вашего PSD. Чем больше слоев, тем лучше! Вы всегда должны группировать свои слои в папки, если они связаны.

Узнайте больше об организации папок и слоев.

Блоки контента

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

Узнайте больше об организации блоков контента.

Внутреннее содержимое

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

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

Возможно, вам не потребуется текстовое изображение, учитывая новую поддержку веб-шрифтов для CSS3. Это примеры, когда формы и текст пригодятся, поскольку они «рисуют» на веб-странице, а не загружают внешний контент; например большое изображение.

  ВАЖНО:  Невозможно создать веб-страницу без использования форм и текста на современном веб-сайте, с другой стороны,  HTML5 НЕ МОЖЕТ  обрабатывать формы или стили без CSS или SVG.

Поддержка изображений

Все слои изображений растеризованы и визуализированы, как показано в вашем PSD. На самом деле образ есть образ! Вы не сэкономите много, применяя тень к изображению во время выполнения по сравнению с загрузкой PNG.

Узнайте больше о поддержке изображений.

Поддержка формы


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

  ВАЖНО:  Формы экономят трафик! Изображения всегда должны загружаться на клиентский компьютер, что требует дополнительной полосы пропускания. Чтобы уменьшить это, по возможности используйте формы — узнайте больше. 
  СОВЕТ:  В коде все фигуры являются прямоугольниками! Очень часто ошибочно принимают визуальный дизайн фигуры за ее измеренную площадь. Во всех языках программирования элементы обрабатываются как площадь прямоугольника   — узнайте больше.

Узнайте больше о поддержке формы.

Прямоугольник

  • Цвет заливки
  • Цвет обводки
  • Размер обводки
  • Размер фигуры

Узнайте больше о прямоугольнике.

Круглый прямоугольник

  • Цвет заливки
  • Цвет обводки
  • Размер обводки
  • Размер формы
  • Радиус угла

Узнайте больше о круглом прямоугольнике.

Эллипс

  • Цвет заливки
  • Цвет обводки
  • Размер обводки
  • Размер фигуры

Узнайте больше об эллипсе.

Поддержка SVG 

  ** Только Lightning Storm v128 **

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

  ПРЕДУПРЕЖДЕНИЕ:  Для простых фигур идеально подходят векторы, но при использовании векторов для сложной графики ваш выходной файл  (например, файл HTML)  может быстро увеличиться в размере = увеличить время загрузки.

Для визуализации векторов необходимо включить SVG Paths.

Поддержка текста


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

  ПРИМЕЧАНИЕ:  Есть  никаких специальных настроек не требуется  для обработки текста, выберите текстовый инструмент, ваш шрифт и настройки; Export Kit сделает все остальное.

Узнайте больше о поддержке текста и о том, как Export Kit обрабатывает текст.

Текст метки

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

Узнайте больше о тексте метки.

Текст абзаца

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

Узнайте больше об абзацах текста.

Выравнивание текста

С помощью инструмента выравнивания текста можно выровнять/выравнивать любой текстовый слой.

  • Слева
  • По центру
  • Справа

Узнайте больше о выравнивании текста.

Стили символов

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

  • Обычный
  • BOLD
  • Italic
  • подчеркивание
  • Strike 2
  • Overcase

.

Стили шрифтов

Для правильного отображения стилей шрифтов часто требуются дополнительные настройки или внешние файлы.

Узнайте больше о стилях шрифтов.

Использовать допустимые символы

Не все среды поддерживают все символы. Если вы используете специальные символы в своем выводе, всегда безопаснее использовать значение ASCII .

Узнайте больше о допустимых текстовых символах.

Изменение имени текстового слоя

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

  ВАЖНО:  Ни одна среда не поддерживает слои, начинающиеся с цифр, а некоторые символы недопустимы в качестве идентификаторов слоев — узнайте больше.
Не масштабировать текст

Возможно, это самая распространенная ошибка дизайнера. Если вы вносите изменения в дизайн и ваш текст должен стать больше — не масштабируйте текст, а измените размер шрифта.

  ПРИМЕР:  Разработчик  НИКОГДА  не будет создавать текстовый элемент с размером шрифта 16 пикселей, а затем масштабировать текст с помощью CSS до 187% - это  НЕ  отраслевых стандартов, вы должны изменить размер шрифта!

Узнайте, почему мы рекомендуем не масштабировать текст.

Используйте правильные настройки текста

Всегда используйте круглые значения. Учтите, что вы можете потребовать от разработчика использовать код после того, как разработчик НИКОГДА не будет использовать размер шрифта 20.05px . Кроме того, только Adobe поддерживает пиксельные дроби.

  ВАЖНО:  Вы можете спроектировать что угодно, но если вы ожидаете  готовых к производству результатов  - тогда необходимо создать готовый к производству дизайн  .

Узнайте больше о настройках правильного текста.

Поддержка шрифтов CSS

Шрифты CSS поддерживаются в Export Kit, но это будет зависеть от браузеров, в которых вы просматриваете экспорт HTML5. нужный шрифт и целевой браузер.

Узнайте больше о поддержке шрифтов CSS с помощью набора экспорта.

Использование Google Fonts

Export Kit упрощает добавление шрифта Google в ваш дизайн PSD. Вы можете использовать Google Fonts с любым веб-экспортом, включая HTML5, CSS3, JavaScript, jQuery и WordPress.

Скрипт автозагрузчика шрифтов Google v2 
 1
2
 
   
 Скопируйте приведенный выше код и вставьте его в свой собственный HEAD.

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

Узнайте больше о добавлении шрифтов Google к выходным данным.

Эффекты слоя улучшат ваш вывод за счет дополнительных функций рендеринга для использования с PSD в CSS3. Вы можете добавлять эффекты к любому элементу слоя Photoshop, а Export Kit визуализирует эффект непосредственно в HTML5 и CSS3.

  ПРИМЕЧАНИЕ.  HTML5 и CSS3  НЕ  поддерживают все эффекты слоев Photoshop.
 
  ВАЖНО:  В зависимости от вашего эффекта и угла размер вашего элемента может измениться, чтобы отразить эффект, примененный к элементу — узнайте больше.

Загрузите нашу поддержку эффектов слоя, бесплатные шаблоны PSD.

Посмотрите наш пример шпаргалки (изображение, текст, форма, эффекты) для HTML5.

Узнайте больше о нашей поддержке эффектов и стилей.

Падение и внутренняя тень
  • Shadow Color
  • Opacity
  • Angle
  • Distance
  • Choke/Spread
  • Size
Outer and Inner Glow
  • Glow Color
  • Opacity
Color Overlay
  • Fill Color
  • Opacity
Наложение градиента
  • Цвета градиента
  • Непрозрачность
  • Угол
  • Стиль
Обводка

    1 Обводка0045
  • Размер
  • Непрозрачность

Эффекты формы


Все эффекты слоя поддерживаются фигурами.

Эффекты SVG

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

Для отображения фильтров необходимо включить пути SVG.

Текстовые эффекты


HTML5 и CSS3 плохо поддерживают текстовые эффекты для свечения , обводки и градиентной заливки .

Эффекты изображения

Все слои изображения растрированы.

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

Узнайте больше об использовании тегов слоя с набором экспорта.

Загрузите нашу поддержку тегов слоев, бесплатные шаблоны PSD.

Тег пропуска 

 ${skip} - ВСЕ СЛОИ

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

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

Тег изображения 

 ${img} или  ${image}  - ТОЛЬКО СЛОИ (НЕ ПАПКИ)

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

  ПРИМЕЧАНИЕ.  Чтобы отобразить папку в виде изображения, мы рекомендуем преобразовать папку в смарт-объект — узнайте больше.

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

Тег ссылки 

 ${link:[URL_ADDRESS]} — ТОЛЬКО ТЕКСТОВЫЕ СЛОИ

Этот тег создаст элемент веб-ссылки, соответствующий среде, для открытия новой страницы или вкладки браузера — используя веб-адрес в аргументах . Этот тег индивидуально обрабатывается каждой средой для открытия только веб-ссылки. Аргументы должны быть действительным URL-адресом, привязкой или веб-скриптом.

Узнайте больше об использовании Link Tag.

Прочтите, как создать меню навигации с тегами ссылок.

Прочтите, как подключить страницы к ссылкам с помощью тегов страниц и тегов ссылок.

Тег абзаца 


 ${p} - ТОЛЬКО ТЕКСТОВЫЕ СЛОИ

При использовании этого тега все эффекты слоев визуализируются с каждым диапазоном текстового элемента в виде элемента span на выходе. Текстовые диапазоны преобразуются во встроенные стили HTML, а не в CSS. Стили внутри текстового блока — это просто — встроенный .

  ПРИМЕЧАНИЕ.  Добавлять стили  span  в файл CSS бессмысленно, так как вы, скорее всего, будете использовать этот стиль один раз.

Подробнее об использовании тега абзаца.

Тег объекта 

 ${object|[TYPE]:[URL_ADDRESS]} — ТОЛЬКО СЛОИ ФОРМА

Этот тег позволит вам создавать медиа-элементы при экспорте. Все поддерживаемые теги объектов будут использовать собственные элементы управления HTML5 для рендеринга мультимедиа. Аргументы должны быть действительным URL-адресом.

Типы объектов
  • youtube
  • wav
  • mp4
  • oog-video
  • oog-audio
  • webm
  • swf
  • wmv

Read more about using Object Tag.

Прочтите, как добавлять медиафайлы (аудио, видео, SWF) в HTML5 с помощью тегов объектов.

Тег формы 


 ${form|[TYPE]:[URL_ADDRESS]} - ТОЛЬКО ДЛЯ ПАПОК

Это позволит вам поместить содержимое папки документа в элемент формы, соответствующий среде вывода. Элемент Form улучшит ваши интерактивные результаты, добавив возможность создавать интерактивные приложения, управляемые данными, из одного PSD-файла.

Типы форм
  • get
  • post

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

Узнайте больше о создании веб-форм с помощью тегов форм и тегов ввода.

Просмотр живого примера с использованием формы и тега ввода.

Тег ввода 

 ${input:[TYPE]} — ТОЛЬКО ТЕКСТОВЫЕ СЛОИ

Это позволит вам определить множество элементов данных и экспортировать их непосредственно на веб-страницу HTML5. Содержимое текстового слоя будет использоваться как значение элемента ввода при обработке формы.

Типы ввода
  • Флажок
  • Файл
  • Hidden
  • Пароль
  • Радио
  • Сброс
  • Текст
  • FAGAREA
  • Отправить
  • .

    Узнайте больше о создании веб-форм с помощью тегов форм и тегов ввода.

    Просмотр живого примера с использованием формы и тега ввода.

    Тег стиля слоя 

     ${css|style:[name]} — ВСЕ СЛОИ

    Этот тег добавляет пользовательские стили класса CSS к вашему элементу PSD. Вы можете добавить любой стиль класса CSS или настраиваемые стили PSD, включенные в вашу папку ${css|styles}.

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

    Узнайте больше о создании пользовательских стилей классов CSS для HTML5 с помощью тегов стилей CSS.

    Тег Class Styles 

     ${css|styles} — ТОЛЬКО ДЛЯ ПАПОК

    Этот тег будет группировать все ваши пользовательские классы CSS, созданные с помощью ваших PSD-элементов. Все дочерние слои и папки преобразуются в классы CSS на выходе с использованием наших правил именования слоев.

    Узнайте больше об использовании тега Class Styles.

    Узнайте больше о добавлении эффектов CSS Rollover / Hover с помощью тегов папок стилей CSS.

    Кодовый тег 

     ${code} — ТОЛЬКО ТЕКСТОВЫЕ СЛОИ

    Этот тег позволит вам добавить необработанный код/скрипт в содержимое текстового слоя PSD. Вы можете нарисовать любой текстовый слой абзаца в своем PSD, но вы должны попытаться сохранить размер и положение вашего слоя кода относительно вашего дизайна.

    Подробнее об использовании тега Code.

    Тег класса 

     ${class|[ИМЯ_КЛАССА]:[СВОЙСТВА]} — ТОЛЬКО ПАПКИ

    Этот тег позволяет добавлять динамические элементы к выходным данным. Вы можете добавить любой необработанный элемент, например. h2 — вместе с реквизитами. Эти элементы будут ТОЛЬКО использовать свойства, которые вы назначаете в Аргументах.

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

    Тег страницы 

     ${page:[PAGE_NAME]} — ТОЛЬКО ПАПКИ

    Этот тег позволяет создавать дополнительные страницы из документа в зависимости от типа вывода. Тег Page примет значение args, которое будет использоваться для создания новой страницы. Отлично подходит для использования с тегом Link для подключения контента!

      ПРИМЕЧАНИЕ.  Вы можете экспортировать неограниченное количество страниц, но несколько страниц увеличат время экспорта.

    Подробнее об использовании тега страницы.

    Прочтите, как экспортировать несколько страниц и файлов с тегами страниц.

    Прочтите, как подключить страницы к ссылкам с помощью тегов страниц и тегов ссылок.

    Просмотр живого примера с использованием тега страницы.

    Тег экрана CSS 

     ${css|screen:[SCREEN_SIZE]} — ТОЛЬКО ДЛЯ ПАПОК

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

    Общие размеры экрана
    • ${css|экран:по умолчанию} широкоэкранный макет
    • ${css|экран:1280} макет рабочего стола
    • ${css|экран:760} макет планшета
    • ${css|экран: 320px} макет для мобильных устройств
      ПРИМЕЧАНИЕ.   Вы можете экспортировать неограниченное количество размеров экрана, но несколько размеров экрана увеличат время экспорта.

    Узнайте больше об использовании экранных тегов CSS.

    Прочтите, как экспортировать адаптивный CSS3 в HTML5, используя теги экрана CSS.

    Просмотр живого примера с использованием тега экрана CSS.

    Tag Reference Table

    . по умолчанию}
    Tag Example Layer Support
    Skip ${skip} All
    Image ${img} or ${image} Все
    Ссылка ${link://google.com} Слои
    Язык ${char} Text
    Paragraph ${p} Paragraph Text
    Media Object ${object|mp4:/path/to/video. mp4} Shape
    Smart Object ${obj} Смарт-объект
    Форма ${form|post://path/to/script.php} Папка
    Вход80 $ orsubput: ${вход:текст} Текст
    Layer Style ${css|style:mystyle my_style2} All
    Class Style ${css|styles} Folder
    Code ${code} Text
    Класс $ {класс | Div: Rely = ”Раздел”} Папка Папка
     Вы почти у цели — идеальный HTML5 для пикселей — через несколько минут!

    Убедитесь, что вы прочитали и поняли наши правила проектирования PSD и правила именования слоев, чтобы избежать визуальных ошибок в выводе.

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

    Photoshop, изображение и рендеринг в браузере

    Все браузеры и устройства отображают шрифты, размеры и эффекты по-разному!

     НЕ ПЫТАЙТЕСЬ  ПРИНУДИТЬ  Выход для работы на  ВСЕХ браузерах и устройствах  - это  НЕВОЗМОЖНО  , поверьте нам - мы проверяем это все время!

    Узнайте больше о поддерживаемых браузерах и версиях.

    Выровняйте внешний вид

    Вы можете использовать Выровнять вывод и Скрыть переполнение, чтобы настроить внешний вид с помощью макетов Flush и Fluid .

    Прочтите, как создать полноэкранный фон, чтобы включить Гибкие макеты .

    Оптимизируйте свой CSS

    Export Kit имеет мощный механизм рендеринга CSS, который поддерживает псевдо, селекторы, скины и темы . Вы можете управлять любой библиотекой CSS и пользовательскими стилями Photoshop, чтобы повторно использовать изображения, создавать собственные шаблоны из одного PSD и добавлять состояния к элементам.

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

    Упаковка для клиентов

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

     Используйте Image Kit Pro для сохранения моментального снимка или водяного знака вашей работы, а также веб-иконок для ваших HTML-страниц.  
     Включите Keep PSD Assets для создания шаблонов PSD, связанных с проектом. Каждая папка в вашем документе будет сохранена в виде файла [.psd] для удобства редактирования и редактирования. 
     ТОЛЬКО АДАПТИВНЫЕ ДИЗАЙНЫ. Включите адаптивные изображения для создания адаптивных изображений. Каждое изображение в ваших папках экрана css будет сохранено как новое изображение с измененным размером.

    Настройки экспортного комплекта

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

    Настройки, используемые с этим образцом PSD:

    1. Откройте набор инструментов экспорта, выберите «Экспорт»
    2. Щелкните раскрывающийся список, выберите «HTML5»
    3. Установите флажок «Настроить»
    4. Снимите флажок «Скрыть переполнение»
    5. Установите флажок «Относительные положения»
    6. Установите флажок «Эффекты слоя»
    7. Щелкните раскрывающийся список «Выровнять вывод», выберите «Центр»

      8. 0 900 Подробнее об использовании комплекта и Экспортный комплект Pro.

      Готово к экспорту

      Когда все настройки будут готовы, нажмите «Экспортировать сейчас» — и наблюдайте волшебство!

      Presto, PSD в HTML5 и CSS3 всего за несколько кликов! Попробуйте сами!

      Среднее время экспорта 

       2–5 с = модуль (например, меню навигации)
  30–40 с  = основная веб-страница
  1–2 мин.  = сложная веб-страница
  6–8 мин.  = одностраничный веб-сайт
  6–8 мин.  = 3 адаптивных экрана
  8–10 мин.  = 5-страничный веб-сайт
  20–25 мин.  = 5-страничный адаптивный веб-сайт (3 экрана)

      Если экспорт остановится — остановитесь!

      Export Kit отменит вывод, если обнаружит ошибку в слое Photoshop. Если Export Kit отменяет/останавливает вывод, вам следует сделать следующее:

       НЕ сохранять документ. На данный момент слои были переименованы!
      1. Обратите внимание на слой, вывод которого отменен на
      2. Это слой , вызывающий проблему , прочтите: Нет пустых слоев
      3. Это только для вас, чтобы отметить слой и отладить проблему

        8 НЕ сохранять документ, ЗАКРЫВАТЬ документ и ПОВТОРНО ОТКРЫВАТЬ его
      4. Исправить проблему, СОХРАНИТЬ и повторно экспортировать его

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

      Протестируйте с помощью: IE, Chrome, FireFox, смартфонов, планшетов и т. д.

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

       Ознакомьтесь с нашей памяткой по HTML5, чтобы быстро ознакомиться со многими уникальными функциями, которые Export Kit поддерживает с преобразованием PSD в HTML и CSS.

      Вещи, которые мы обнаружили во время тестирования

      • Export Kit — лучший плагин PSD… 😉
      • IE имеет лучший рендеринг шрифтов
      • IE имеет лучший рендеринг форм
      • Chrome имеет лучшую поддержку шрифтов css
      • IE имеет плохой CSS поддержка
      • Шрифты IE меньше, чем другие
      • Стили шрифтов Chorme шире, чем другие
      • Стили символов FireFox шире, чем другие

      Если вы хотите протестировать поддержку всех браузеров и устройств — попробуйте, скачайте наш Photoshop vs. Environment Рендеринг бесплатных PSD шаблонов. Это даст вам все инструменты, необходимые для тестирования всех устройств и браузеров.

      Загрузите наши бесплатные шаблоны PSD для оптимизации экспорта, чтобы протестировать оптимизацию PSD для Интернета.

      Оптимизация ошибок отображения

      Визуальные ошибки можно исправить, прочитав наши советы по оптимизации. Мы охватываем более 40 различных пользовательских случаев, поэтому вы можете быстро найти решение своей проблемы с помощью наших советов.

      Распространенные визуальные ошибки 

        Ошибка  : Вы экспортируете остановки на слое формы

      Исправление : При экспорте необходимо использовать цветовой режим RGB 

        Ошибка  : На вашей веб-странице есть  текст и НЕКОТОРЫЕ изображения , но не все

      Исправление : Удалите выходную папку « ftml-www » и снова запустите экспорт.

        Ошибка  : На вашей веб-странице  текст и НЕТ изображений  вообще

      Исправление : Используйте НИЖНИЕ РЕГИСТРЫ расширения файлов, такие как my_file.psd, когда вы называете свои файлы пробел) символов из вашего имени PSD

        Ошибка  : ваш элемент HTML5 не отображался на 100% как слой PSD

      Исправление (только текст) : добавление шрифтов Google для дополнительной поддержки шрифтов.

      Исправление : добавьте ${img} к имени слоя, чтобы визуализировать слой как изображение.

        Ошибка  : Вы застряли, и у вас есть вопрос

      Вы человек, мы тоже!

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

      Easy Fix Functional Errors

      Почти все функциональные ошибки можно исправить, прочитав наш контрольный список перед экспортом.

      Редактирование и загрузка с помощью Dreamweaver 

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

      Устройтесь поудобнее и расслабьтесь. Экспортный комплект только что сэкономил вам недели, если не месяцы работы — практически без усилий. Спросите себя: « «Я», сколько это стоит? ”

      Попробуйте экспортный комплект БЕСПЛАТНО с вашим PSD!

      Как преобразовать PSD в HTML: пошаговое руководство

      Раньше веб-сайты разрабатывались с использованием PSD, с которым было сложнее работать. Итак, разработчики с нетерпением ждут способов сделать вещи проще. После разработки HTML у разработчиков сайтов на основе PSD появляется больше возможностей для упрощения системы. Вот почему старые сайты должны очень часто конвертировать PSD в HTML5.

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

      Содержание


      Что такое «PSD в HTML»?

      Как правило, «PSD в HTML» — это рабочий процесс, который очень популярен среди перспектив создания веб-сайтов. Здесь PSD означает документы Photoshop, а HTML — язык гипертекстовой разметки. Тем не менее, веб-страница сначала создается с помощью PSD, и ее часто необходимо преобразовать в HTML. И этот процесс вкратце называется «PSD в HTML».

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


      Почему необходимо конвертировать PSD в HTML?

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

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

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

      Таким образом, функции CSS упростили создание ресурсов изображения. Помимо графических ресурсов, вторая причина для преобразования PSD в HTML — сделать его адаптивным для смартфона или планшета. Можно сказать, что это не обязательно важно, но дело в другом. Большинство людей в настоящее время используют свои смартфоны и планшеты так часто, что это делает их незаменимыми.

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

      Кроме того, непросто добиться идеального диалога с точностью до пикселя только с файлами PSD, которые можно получить с помощью ручного кода. Для этого вам понадобится его HTML-файл. Вам действительно понадобится преобразование для создания бизнес-сайта на Squarespace или базового магазина электронной коммерции на основе Shopify.

      Начнем новый проект вместе!

      Свяжитесь с нами

      Что необходимо сделать перед преобразованием PSD в HTML

      Перед преобразованием PSD в HTML необходимо соблюдать некоторые основные правила этикета. Самое первое, что вам нужно, это некоторые из основных инструментов разработки интерфейса. Вам понадобятся базовые инструменты, в том числе Adobe Photoshop, Avocode, PNG hut, CSD hut, Sublime text и CSSp3.

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

      Наиболее часто используемый фреймворк для внутреннего кодирования включает PHP и Ruby. С другой стороны, внешний интерфейс в основном ориентирован на HTML, CSS и JavaScript. Наряду с различными фреймворками вам необходимо убедиться, что вы используете разные типы макетов для преобразования PSD в HTML.

      Адаптивный дизайн — это самый первый макет, который нужно подтвердить. Он должен использоваться в качестве ядра почти всех веб-сайтов и приложений, которые в основном обслуживают другие устройства. Некоторые приложения работают только на ПК, и вам также необходимо исправить их, чтобы сделать их совместимыми с мобильными устройствами.

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


      Подробнее:       Как загрузить файл проверки HTML в WordPress


      Как преобразовать PSD в HTML (простые шаги)

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


      Шаг 1. Разделите PSD на части

      Одновременная конвертация полных файлов PSD довольно трудоемка и трудоемка. Это также приводит к более длительному времени загрузки страницы. Действительно, было бы лучше, если бы вы разбили его на части, чтобы вы могли легко конвертировать небольшие фрагменты файлов. Кроме того, если у вас есть небольшие фрагменты файлов PSD, у вас будет более быстрая загрузка страниц с ними.

      Вы можете использовать различные инструменты для нарезки файлов в Photoshop, чтобы разбить PSD-изображение на части. Нормальный, Фиксированное соотношение сторон, Фиксированный размер и Фрагменты из направляющих — наиболее часто используемые параметры нарезки изображения. И вы можете использовать любой из них. Когда вы используете их для нарезки изображений, вы получите каждый отдельный срез и сохраните их отдельно. Вы можете просто сохранить их в меню «Сохранить для Интернета».


      Шаг 2. Создание каталогов

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

      • Главная папка называется ваш сайт.
      • Папка с именем «images» в основной папке, которую вы назвали на своем сайте. Он предназначен для хранения всех изображений, которые вы добавите в будущем.
      • Наконец, еще одна папка с именем «styles» для таблиц стилей или файлов CSS в основной папке.

      Это 3 основных каталога, которые вам нужно создать. Каждая из них содержит определенные цели, и поэтому все они необходимы.


      Шаг 3: Создайте HTML

      Этот шаг посвящен созданию страницы HTML. Вы можете просто использовать различные конструкторы HTML-страниц, включая Komposer, Amaya, Adobe Dreamweaver и т. д. Среди них Adobe Dreamweaver является наиболее рекомендуемым. Вам нужно создать новый файл здесь, а затем сохранить его в основной папке, для которой вы создали имена после имени вашего сайта. Затем вам нужно разделить коды с помощью HTML5, следуя приведенным ниже инструкциям.

      • Верхней частью страницы является Заголовок, с него нужно начинать секционирование.
      • Следующим является Hero, и это самый большой раздел на странице. Этот раздел будет обозначать конкретное изображение на вашей странице.
      • Слайд-шоу — это третий раздел кода, и он будет отображать список изображений и автоматически перемещаться по странице.
      • Далее, это ваш основной контент. Эта текстовая область будет содержать данные, включая тексты, изображения, кнопки и т. д.
      • Наконец, нижний колонтитул. Обозначает нижнюю часть страницы, которая будет содержать ссылки на блог, контакты, ссылки на другие социальные сети.0045


      Шаг 4. Создание файлов стилей

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

      Вы также можете создавать файлы стилей с помощью редактора HTML. Не забудьте сохранить файлы как style.css в папке CSS. Это поможет вам легко найти их. Однако в таблице стилей вы найдете некоторые стилистические особенности, такие как поля, размер шрифта, тип, положение изображения, цвет фона, набор полей и т. д.

      Вы также можете настроить их отсюда. Теперь вам нужно подключить таблицу стилей CSS к HTML-странице.


      Шаг 5: Организация набора веб-дизайна

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

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


      Шаг 6: Взаимодействие с JavaScript

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

      jQuery организует DOM и помогает создавать динамические макеты. Это также поможет закодировать интерфейс. Кроме того, react.js и vue.js одинаково важны, поскольку они обеспечивают простое подключение HTML-элементов к функциям и данным JavaScript. AngulaJS — еще один важный фреймворк, который позволяет использовать стили MVC, а также задавать данные без макетов HTML.


      Шаг 7: Последний штрих, чтобы сделать его адаптивным

      Наконец, было бы лучше, если бы вы использовали несколько фреймворков, чтобы сделать файл адаптивным. Для этого вы можете просто использовать Twitter BootStrap, Foundation, Fluid Baseline Grid и т. д. Чтобы добавить в дизайн дополнительные адаптивные функции, вы также можете использовать медиа-запросы CSS.

      Итак, это самые простые шаги, которые вы можете выполнить для простого преобразования PSD в HTML5. Не пропускайте ни одного шага и выполняйте их один за другим. Тем не менее, если вам трудно, вы можете просто нанять профессионального поставщика услуг. Тогда вы, должно быть, думаете о том, сколько будет стоить весь процесс, верно? В следующем разделе будет разъяснена и эта часть. Итак, не пропустите это.


      Сколько будет стоить конвертировать PSD в HTML?

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

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


      Часто задаваемые вопросы

      В: Могу ли я преобразовать Bootstrap PSD в HTML?

      О: Да, вы можете легко конвертировать Bootstrap в HTML. Для этого вам нужно проанализировать файл PSD, а затем создать каталоги. После этого вам нужно преобразовать PSD в код CSS и HTML, чтобы добавить компоненты Bootstrap. Вот как легко конвертировать Bootstrap в HTML. В конечном итоге очень необходимо сделать HTML адаптивным.


      В: Когда мне не следует преобразовывать PSD в HTML?

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

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


      В: Почему преобразование PSD в HTML в последнее время затруднено?

      A: Преобразование PSD в HTML в настоящее время действительно относительно сложнее, чем несколько лет назад. Это связано с тем, что все PSD-файлы теперь достаточно отзывчивы и совместимы с разными устройствами и браузерами. И нарезать их и решать другие задачи становится сложнее, чем несколько лет назад.


      В завершение

      Надеюсь, вы поняли все шаги по преобразованию PSD в адаптивный HTML.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *