Перенос из psd в adobe muse

Создать уникальный шаблон своими руками с программой Adobe MUSE №2

Всем привет! Вот и подошла вторая часть «Создать уникальный шаблон своими руками с программой Adobe MUSE».

 

Что мы будем делать:

  1. Анализируем PSD шаблон
  2. Вырезаем нужные элементы
  3. Переносим все в MUSE

 

Анализируем PSD шаблон

Взять шаблон из статьи можно по этой ссылке

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

1396 по ширине x 1668 по высоте

Перенос из psd в adobe muse

Перенос из psd в adobe muse

Заходим в MUSE и задаем данный размер страницы

Перенос из psd в adobe muse

 

Смотрим какие шрифты присутствуют в шаблоне

Oswald и Arial

С Arial все понятно, стандартный шрифт ОС, а вот Oswald придётся скачать.

Мало заметные линии, не упускаем мелочей

Вырезаем нужные элементы

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

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

Зажимаем Alt + левый клик по глазику

Перенос из psd в adobe muse

Берем инструмент «Рамка»Перенос из psd в adobe muse
Перенос из psd в adobe muse

Выделяем логотип и кликаем два раза по нему левой кнопкой.

Далее идем в Файл – Сохранить для Web…

Выставляем настройки «Набор» PNG-24

Галочка на «Прозрачность»

Перенос из psd в adobe muse

Как видим изображение уменьшилось в объеме КБ вместо 28,9К стало 3,252К это очень важно для быстрой загрузки сайта, «Сохранить» советую сразу создать папку с названием сайта и в ней папку images, там уже сохранять вырезанные элементы.

 

ОК

Перенос из psd в adobe muse

Далее вырежем фон.

Сам фон по фактуре сложный и маленьким кусочком не обойтись, более-менее подобрал 229х548 с правой стороны.

Перенос из psd в adobe muse

Вырезаем две картинки к статьям.

Перенос из psd в adobe muse

Вырезаем стрелочку.

Перенос из psd в adobe muse

Вырезаем поиск.

Перенос из psd в adobe muse

Все мы вырезали необходимые элементы теперь переходим к переносу нашего шаблона в MUSE

Перенос из psd в adobe muse

Переносим из psd в MUSE

Код для поиска:

<style>
input { background:#2c2c2c;
height:32px;
color:#ffffff;
}
</style>
<form name=»test» method=»post» action=»#»>
<input type=»text» size=»50″>
</form>


Поделись мнением о статье "Создать уникальный шаблон своими руками с программой Adobe MUSE №2", предложи свой вариант в комментариях! Спасибо!