PSD макет для верстки сайта.

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

Сделать свой макет не трудно, достаточно просто иметь представление о том, как осуществляется дальнейщая верстка. Единственное ограничение, критерии по которым успех не светит — это умственная отсталость и в стельку пьяное состояние. Поэтому когда присуще одно из параметров, то начинать верстать макет PSD для сайта не рекомендуется… Хотя в последнем нельзя быть уверенным на сто процентов…

Создание шаблона сайта psd

Самая большая загвоздка в том что дизайн сайта не получиться сделать по быстренькому. Можно конечно попробовать поторопиться, помимо вставленных картинок, кнопочек и шрифтов, нужно еще разбить блоки по папкам и подписывать каждый слой. По сути создать шаблон макета — это полностью нарисовать целый сайт где подписаны и расположены по сетке картинки, кнопки. Любая надпись располагается в строго заданном месте. Для верстальщика, чтобы он потом копипастил стили из фотошопа в редактор кода. Получается что вся тяжелая работа ложиться на плечи дизайнера. Создание макета PSD для верстки — это кропотливый и долгий труд, что отсеивает больше половины дизайнеров. Потому что бывают случаи когда надо прочитать чек лист по подготовке макета на вёрстку. Что как бы подразумевает что надо не только уметь читать, но и понять что там было написано. И чем дальше тем страшнее, особенно когда встречаются настолько уверенные в своем “великом уме” индивидуумы, что никакая входящая информация в них больше не поступает. Это как продавец консультант в салоне связи, когда ему объясняешь что нужно отключить все лишние платные услуги. На что в ответ предлагают еще одну сим карту. Тогда приходиться стучать ему по голове говоря: “аллё, у меня уже есть сим карты, мне нужно отключить платные услуги”. А он отвечает: “Кто там?”. Поэтому остерегайтесь людей выдающих себя за умных. Они самые опасные.

Особенности дизайна шаблона сайта к макету psd

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

скопировать css стили шрифотов и картинок из фотошопа
cскопировать css стиль из фотошопа

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

Разница между png и векторным svg

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

экспорт svg в фотошопе
экспортировать как svg

Благодаря таким нехитрым манипуляциям. Картинка возьмет и сохраниться в векторный svg. Так можно сохранить любые картинки, иконки и изображения. И если открыть картинку.svg в редакторе кода, например в блокноте, то можно будет увидеть теги <svg, стиль, размер. Сама картинка svg представляется как большое количество символов: ёЁ и пеПе.

<html>
<style>
.header {
  background-image: url("header.png"); /* путь к изображению */
  opacity: 0.451; /* непрозрачность как-бы 50% */
  position: absolute; 
  top: 0px; /* отступ от верха */
  width: 900px; /* ширина */
  height: 250px; /* высота */
  z-index: 3; /* последовательность в стопке начинается от 0 */
}
</style>
<svg 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="900px" height="250px">
<defs>
    <style>
      .cls-1 {
        opacity: 0.45; /* класс который можно вставить в саму картинку */
      }
    </style>
  </defs>
<image  opacity="0.451" x="0px" y="0px" width="900px" height="250px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAD6AQMAAADDQBtUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUTdgn///8rAbUNAAAAAXRSTlNzier44AAAAAFiS0dEAf8CLd4AAAAHdElNRQfjDBwPOhMpcB4wAAAAMklEQVR42u3BMQEAAADCoPVPbQwfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOBjb1QAATSSlS0AAAAASUVORK5CYII=" />
</svg>
</html>

Картинку svg можно вставить в html страницу прямо текстом(но смысла в этом нет), но лучше писать путь в css background-image: url(«header.png»);

Если все их скопировать и открыть в файле в формате html, то при открытии можно увидеть ту самую svg. Такой способ позволяет сохранять рисованные иконки. Это большое преимущества фотошопа, что не надо искть когда можно сделать все своими руками. И сохранить в png или svg — в каком-то смысле svg лучше. SVG также открывается везде, в добавок svg неплохо растягивается. В самой картинке легко регулировать прозрачность. с помощью класса, например opacity: 0.5; еще если картинку в html сделать ссылкой обернув тегом <a href=”#”>SVG</a> — то можно прямо в картинке применить стиль a:hover. С той же самой непрозрачностью. Ну да ладно, можно бесконечно писать о разных форматах. Верстка это не только копипаст стиля из фотошопа. Это еще и копипаст картинок ))) шутка…

Адаптивная верстка, хитрое дело.

Большинство скопированных стилей удаляются т.к. они статичны. Тоесть не дадут сайту растягиваться и адаптироваться под разные устройства и экраны. Обычно изпользуются резиновые блоки. По сути копируется только цвет, шрифт, размеры. Расположение и все что необходимо чтобы перенести макет в html теги для отображения в браузере. Так как он выглядит на картинке. И если не распределить элементы по папкам, если не подписать слои. То в дальнейшем сверстать из такого макета будет невозможно. Сами представьте что если количество слоёв перевалит за двести. Неподписанный слой с мелким изображением. Найти среди сотни таких же слоев, все равно что искать иголку в стоге сена. Кто бы согласился участвовать в пантомиме, тыкая по иконки в виде глазика непонятного слоя. В надежде что мигнет именно та картинка что сейчас необходима?

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

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