›

Делаем верстку по psd макету

Не претендую на новаторство, возможно, многие уже используют все то, что будет описано. Этот топик скорее предложение к дискуссии по поводу подготовки макетов к верстке. Думаю, обитатели хабра, особенно посещающие ветку «Веб-дизайн», в основной массе знакомы с ресурсом ilovepsd.ru . Поэтому пожелания с этого сайта, по работе с файлами, я перечислять не буду. Кто заинтересовался, прошу под хабракат.

Зачастую, когда я отдаю файлы шаблонов заказчику, я готовлю две версии. Одна полная, другая подготовлена для верстки. Обе, конечно, попадают к верстальщику. Первая - что бы абсолютно все было под рукой готовое к редактированию, если что. Вторая - что бы ускорить работу.

Склеиваем слои и эффекты

Допустим у нас есть фон под меню. Состоит он из 4-х слоев, к некоторым из них применены эффекты. В большинстве случаев верстальщику нужно вырезать центральную часть шириной в 1 пиксел, что бы затем повторять её по горизонтали. Кто не понял к чему я клоню - это значит что верстальщику нужно выделить слои, нажать правую кнопку мыши, найти пункт «Merge layers», кликнуть. Минимум 3 действия и это минимум 3 действия по каждому подобному случаю. Таким образом мы сможем сэкономить верстальщику, пусть и немного, но все же времени.

Комментируем правильно

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


Сетка

Речь идет о родной сетке photoshop"а. Не всегда возможно применить, но зачастую можно настроить сетку под выбранный вами вертикальный ритм или как можно ближе к системе, по которой вы работали расставляя все на макете.
Часто отступы между элементами бывают кратны 5 пикселам. В таких случаях я выставляю параметры сетки, как показано на картинке и оставляю памятку верстальщику, что бы настроил соответствующим образом и включил сетку. Еще раз говорю - это только пример, настраивайте так, что бы подошло вашему макету. Таким образом при верстке, местами, становится намного легче считать расстояния и размеры.


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

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

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

Шаг 10 – Добавление стилей текста

Теперь займемся текстом. Это текст выглядит неплохо на предыдущем скриншоте, потому что у Firefox, который я использовал, стоит по умолчанию шрифт Sans-Serif. Но если бы я б сделал скриншот IE, то Вы бы увидели бы вместо этого шрифта Serif. Таким образом, мы должны разобраться теперь с текстом. Мы добавим эти кусочки CSS к нашей таблице стилей:

Body { margin:0px; padding:0px; background-color:#131211; font-family:Arial, Helvetica, sans-serif; color:#7f7d78; font-size:13px; line-height:19px; } /* Text-Styles */ h2 { margin:0px 0px 10px 0px; font-size:36px; font-family:Helvetica, Arial, Sans-serif; color:#000000; } small { color:#595856; font-weight:bold; font-size:11px; display:block; margin-bottom:15px; } a { color:#007de2; text-decoration:none; } a:hover { text-decoration:underline; } p { margin: 0px 0px 15px 0px; } a.button { background:#32312f url(images/button_bg.jpg) repeat-x; padding:5px 10px 5px 10px; color: #ffffff; text-decoration: none; border:1px solid #32312f; text-transform:uppercase; font-size:9px; line-height:25px; } a.button:hover { background:#007de2 url(images/button_bg_o.jpg) repeat-x; border-color:#007de2; }

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

Затем мы создали стиль для

, который устанавливает margins и шрифт Helvetica.

Мы также создали стиль для — подзаголовков (например, в какой категории находится пост и т.д),

Мы сбросили стили абзацев

Чтобы в margins отступов по умолчанию.

Наконец, мы создали тот самый класс button. Обратите внимание, что я определил его как «a.button», или, другими словами все теги с классом = «.button». Почему я просто не сделал его как «.button»? Лучше делать это именно так, чтобы иметь возможность сделать второй класс button для и он будет немного отличаться. Таким образом, они не будут взаимодействовать друг с другом.

В классе button вы увидите, что мы установили некоторые padding, border, фоновое изображение, Hover стиль и атрибут line-height … Подождите line-height атрибут? Да, к сожалению, это устанавливается для IE, что бы все выглядело как кнопка.

С нашим дополнительным моделированием страница начинает обретать форму!


Шаг 11 – Добавление ленты

Одной из изящных вещей в этом дизайне является маленькая голубая лента в правом верхнем углу. Благодаря сочетанию CSS, прозрачных файлов PNG и абсолютного позиционирования, она действительно несложно добавляется. Итак, сначала мы должны сделать изображение. Еще раз мы создаем изображение с прозрачным фоном и сохраняем его как PNG-24, вот изображение:

Eden Website Design

in web design tagged corporate, web2

And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was.


View Project

Таким образом, Вы можете видеть тег там во второй строке. Заметьте, что я присвоил ему class= «ribbon» и поместил в

.block, а не в . Это потому что, если мы поместим его внутрь.block_inside, это сделает путаницу со свойством overflow:auto, которое мы устанавливаем ранее. Во всяком случае, прямо сейчас это только запутает нашу разметку, так что давайте добавим стили:

Block { border:1px solid #a3a09e; background-color:#ffffff; margin-bottom:20px; position:relative; } .ribbon { position:absolute; top:-3px; right:-3px; }

Вы можете видеть, что у нас есть:

Добавляется position:relative к классу.block. Таким образом, мы можем использовать абсолютное позиционирование внутри относительно элемента с классом.block (а не для целой страницы)

Затем мы установили изображение, которое появиться на 3px выше верхнего края и на 3px правее правого края.

Легко! Ещё бы день назад, мы должны были бы использовать супер сложную

разметку, чтобы достигнуть того же самого эффекта. Вот то, как это смотрится сейчас:


Шаг 12 – Создание второго блока

С добавленной лентой наш первый блок закончен! Теперь пришло время начинать следующий

блок. В нем будут темы и список последних проектов. Итак, для начала мы добавляем немного HTML:

PSDTUTS Theme Design

View Project

PSDTUTS Theme Design

Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

View Project

PSDTUTS Theme Design

Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

View Project

Creatif is a WordPress portfolio theme for designers and creatives

You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not, the theme accompanies a book called How to Be a Rockstar WordPress Designer by Rockstar Resources due for release in 2008.

The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.

And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at PSDTUTS and NETTUTS.

Кажется так много кода, но на самом деле это не так. Давайте пройдемся по нему:

Сначала мы создали контейнер

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

Затем у нас идет

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

.

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

Мы заменим

фоновым изображением.

И мы разработаем те mini_portfolio_item div-вы, чтобы смотрелось хорошо использование эффекта аналогичного двойной границе, как мы делали это ранее.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

/* Portfolio-Home-Styles */ #block_portfolio { overflow:auto; margin-bottom:20px; } #portfolio_items { width:615px; margin-right:25px; float:left; } #text_column { float:right; width:310px; } #text_column h2#text_title { text-indent:-9999px; background-image:url(images/creatif.jpg); background-repeat:no-repeat; width:310px; height:129px; } .mini_portfolio_item { border:1px solid #a3a09e; margin-bottom:10px; } .mini_portfolio_item .block_inside { background:none; background-color:#e2dddc; padding:25px 30px 15px 30px; } .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

ОК еще раз, выглядит внушительно, но это не так плохо. Пройдем всё шаг за шагом:

Сначала мы снова использовали overflow:auto для главного блока с классом #block_portfolio. Т.к. у нас снова есть два floated столбца и если мы не сделаем этого, то они наедут на нижний колонтитул.

Затем мы установили для #portfolio_items float left, имеющий margin, чтобы отделить его от текстового столбца, и ширину 615px.

Для #text_column установлено float right с шириной 310px.

В столбце текста мы снова применили маленькую хитрость к нашему

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

Затем у нас есть три определения стиля для класса.mini_portfolio_item следующим образом:

Сначала мы устанавливаем 1px темной границы и margin между ними

Затем мы переопределяем стили.block_inside, чтобы они подходили этим элементам. Помните, что класс.block_inside был определен ранее, когда мы делали Featured Project область. Таким образом, здесь мы убираем фоновое изображение, изменяем цвет фона и изменяем padding.

Итак, в целом это выглядит вот так:


Шаг 13 – Добавление ленты

Теперь мы хотим добавить «Recent Projects» ленту к самому верхнему элементу. Сделать это мы можем так же как и для предыдущей ленты:

AudioJungle Site Design

Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme.

View Project

Затем мы добавляем атрибут position:relative в элемент mini_portfolio_item следующим образом:

Mini_portfolio_item { border:1px solid #a3a09e; margin-bottom:10px; position:relative; }

Но что-то странное происходит … Хотя правая сторона выглядит правильно, верх отрезался, как видно на скриншоте:

Причина в том, что наш элемент находится внутри mini_portfolio_item, который обрезает его. Таким образом, все mini_portfolio_item внутри

. Решение является достаточно простым, мы добавим 3px отступа сверху, которых достаточно для нашей ленты. Вот скорректированный CSS:

Шаг 14 – Завершение элементов портфолио

Наконец я сменил несколько изображений и заголовков, чтобы мы могли увидеть, как страница выглядит с 3 различными элементами вместо одного и того же. Затем я также решил избавляться от кнопки View Project и оставить только текст ссылки. Это выглядит чище и менее грузно. Таким образом, вот конечный раздел элементов портфолио (показанный в Safari, не забывайте проверять в различных браузерах!):


Шаг 15 – Добавление содержания в нижний колонтитул

Теперь есть еще один раздел на нашей странице: Footer! Давайте добавим текстовое содержание к нему:

Обратите внимание:

Я создал три

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

Так как первый столбец другой ширины, я присвоил ему другой класс, названный «long». Отметьте, что Вы устанавливаете два класса следующим образом: class= «class1 class2″ , не как: class= «class1″ class= «class2″ , что является недопустимым.

Внутри столбцов я использовал списки

    и теги заголовков

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

    Вот как это выглядит!


    Шаг 16 – моделирование колонтитула

    Моделирование колонтитула является довольно простым, вот код, который нам нужен:

    /* Footer-Styles */ #footer { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } .footer_column { float:left; width:120px; margin-right:30px; } #footer .long { width:610px; } #footer h3 { color:#e2dddc; text-transform:uppercase; font-size:10px; } .footer_column ul li, .footer_column ul { list-style:none; margin:0px; padding:0px; }

    Пройдемся подробно:

    Сначала мы устанавливаем шрифты для #footer области

    Затем мы задали всем столбцам float с шириной по умолчанию 120px

    Мы отменяем эту ширину для столбца с классом.long. Обратите внимание, что я установил «#footer .long» вместо просто «.long». Причина в том, что»long» является общим названием, которое я мог бы использовать где-нибудь в другом месте, так что это хорошая идея определить его более подробно.

    Наконец

    и
      теги получают простые Стили


      Шаг 17 – Добавление иконки!

      Мы почти закончили нашу первую страницу. Пришло время добавлять некоторые тонкости. Сначала иконка. Это те маленькие иконки, которые появляются в адресной строке. Мне не нужно ничего придумывать, просто маленький черный квадратик с С для Creatif будет красиво. Итак, сначала мы создаем квадратное изображение как это:

      Есть множество сайтов по созданию иконок (), но я всегда использую html-kit’s . Вы просто загружаете изображение и нажимаете создать Favicon.ico. Затем мы соединяем это вот с такой строкой HTML:


      Шаг 18 — Проверка!

      Теперь пришло время проверять, что наша разметка w3c валидная! Поэтому мы идем в валидатор, вставляем наш код и скрещиваем пальцы… и епрст не правильно. Я не помню, что я у меня было всё когда-нибудь правильно с первого раза, должны же быть у меня плохие привычки!


      Посмотрите, там 14 ошибок. Проблема номер один заключается в отсутствии сопроводительного текста на каждое из моих изображений… к сожалению! Поэтому вернемся и добавим его следующим образом:

      следует исправить много ошибок. Итак, теперь мы запустим его снова и… барабанная дробь… По-прежнему неправильно. ОК, это оказалось немного сложнее:


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

      внутрь. Видимо, что не правильно … Ого!

      К счастью, это легко исправлена, мы просто изменяем каждый экземпляр на

      . И… УРА!Прошло:-)


      Конец первой части!

      Отлично, мы успешно сделали нашу основную страницу! Здесь Вы можете видеть, что я проверяю это в IE7 и к счастью нет никаких ошибок.


      Часть 2 – Создание разновидностей

      С помощью нашей основной структуры мы можем создать дополнительные страницы и альтернативные цветовые схемы. К счастью, у нас есть хорошая основа, и мы можем использовать часть кода, который мы уже писали. Именно поэтому очень важно планировать всё заранее.

      Шаг 19 – Создание домашней страницы блога

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

      Поэтому сначала мы дублируем наш index.html, и назовем новый файл blog.html.

      В нашем blog.html мы для начала удалим все

      . Мы скоро заменим этот блок на другой. Затем мы заменим содержимое блока
      , которые немного отличается, и выглядит следующим образом:

      New Blog Design Launched

      on april 13 in web design tagged blogging
      Read More

      Итак, все, что я сделал — это изменил изображение ленты и содержимое в блоке с id = block_featuredblog. По сути это та же разметка. Так что, давайте посмотрим, как это выглядит теперь:


      Шаг 20 – Небольшие изменения CSS

      Итак, чтобы все работало, мы только немного скорректируем CSS вот так:

      #block_featuredblog .text_block { padding-top:5px; width:490px;} h2 { margin:0px 0px 10px 0px; font-size:36px; font-family:Helvetica, Arial, Sans-serif; color:#000000; line-height:39px; letter-spacing:-1px; }

      Здесь я скорректировал «text_block» класс, но только тогда, когда он находится в #block_featuredblog элементе. Теперь он имеет небольшой отступ сверху и он стал шире.


      Шаг 21 — Создание области основного содержимого

      Создание этой области является последней большой вещью, которую мы должны сделать. Это сформирует не только основу этой страницы, но также и базу для других универсальных страниц (с некоторыми изменениями конечно!). Что ж сначала давайте вставим некоторую основу HTML:

      Content

      Так в основном то, что мы создали это элемент —

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

      /* Block-Content-Styles */ #block_content { } #content_area { width:665px; float:left; } #sidebar { float:left; width:281px; position:relative; left:-1px; margin-top:15px; background-color:#e2dddc; border:1px solid #a3a09e; } #sidebar .block_inside { background:none; background-color:#e2dddc; }

      Разберемся со стилями:

      Мы назначили блоку #content_area и блоку #sidebar ширину и float.

      Затем я переместил боковую панель влево на 1px, используя position:relative. Я сделал это для того, чтобы создать эффект, как будто она выдается вперед.

      Наконец я переопределил.block_inside внутри #sidebar, чтобы отменить фоновое изображение и вместо этого сделал background-color:#e2dddc;.


      Шаг 22 – Добавляем содержание

      Теперь мы добавляем содержание к нашим двум элементам:

      Working on a New Project

      on april 13 in web design tagged blogging

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

      Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

      Design Awards!

      on april 13 in web design tagged blogging

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

      Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

      This Site is Almost Complete Finally...

      on april 13 in web design tagged blogging

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

      Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

      OK три важные вещи, которые стоит упомянуть здесь:

      Наконец, я использовал очищающий

      внизу. Затем, как и ранее в этой статье я использовал overflow:auto; чтобы разобраться с floated столбцами, но когда мы добавляем margin-top в предыдущем шаге, чтобы сместить боковую панель ниже, это смешивается с overflow и создает полосу прокрутки. Таким образом, поскольку возможны случаи, когда боковая панель будет длиннее, чем блок содержания, то в этих случаях используют метод очищающего
      -а.

      Теперь мы добавим стили, чтобы привести это все в порядок:

      #sidebar h3 { font-size:20px; line-height:23px; } #sidebar ul { margin:10px 0px 30px 0px; padding:0px; } #sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; } #sidebar ul li a { color:#7f7d78; } #sidebar ul li a:hover { color:#0172dd; text-decoration:none; } #content_area h2 { font-size:32px; line-height:31px; } #content_area .separator { border-top:1px solid #e3e3e3; margin-top:40px; padding-top:40px; }

      Отметим две вещи:

      Отформатирован

        список боковой панели для удаления маркеров и создания красивых отступов

        Создан стиль.separator, использующий margin, padding и border-top:1px solid #e3e3e3; — для создания тонкой линии.

        И вот наш #block_content элемент закончен! Вы можете увидеть .


        Шаг 23 – Создание общей страницы

        Создание нашей конечной страницы является частью проекта. Мы просто дублируем наш blog.html и называем его page.html. Затем удалите featured blog post и измените #block_content следующим образом:

        Services

        Branding


        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

        Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

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

        . Таким образом, мы можем разработать пару строк CSS следующим образом:


        Шаг 24 — Это не имеет значения, черный или белый!

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

        Вот и всё! С этим одним кусочком дополнительного кода HTML мы можем сделать все необходимые корректировки CSS. Это означает, что если бы вы пожелали, то смогли бы очень легко сделать маленькие JavaScript кнопки, чтобы переключать таблицы стилей. Этот способ будет работать для любого класса, который нужно изменить, мы просто добавляем дополнительный стиль, начинающийся с body#dark. Так что, прежде всего, мы говорим:

        Body#dark { background-color:#1e1d1b; } body#dark #main { background:#292826 url(images/background_dark_slice.jpg) repeat-x; } body#dark #main .container { background-image:url(images/background_dark.jpg); } body#dark #footer { background-image:url(images/background_dark_footer.jpg); } body#dark ul#menu li a.active, ul#menu li a:hover { color:#ffffff; }

        И это говорит браузеру, что если затем отменить стиль для #main, #main.container, #footer, active и hover states меню и поменять фоновые изображения и изменить цвет текста на белый! Просто, как пирог!


        Шаг 25 — Границы и фиксация текста

        Как Вы можете видеть, на изображении ниже наш колонтитул фиксируется благодаря новому фоновому изображению и цвету, есть только еще два исправления: «Creatif — WordPress…» текст и границы вокруг полей слишком светлые и должны быть теперь темными. Поэтому мы делаем так:

        Body#dark .block, body#dark .mini_portfolio_item { border-color:#1b1a19; } body#dark #text_column h2#text_title { background-image:url(images/creatif_dark.jpg); }


        Шаг 26 – Дополнительный цвет!

        И это все! У нас есть альтернативная цветовая схема всех тегов элеметна контролируемых одним ID. Это волшебство прозрачных файлов PNG и CSS!


        Конец

        Вот и всё! HTML полностью закончен. Не забывайте, что вы можете посмотреть полные страницы пройдя по ссылкам:

        Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

        От автора: сегодня отличный день, чтобы быстро изменить свой сайт! Готовы строить свой бизнес в сети? Хотите создать новый сайт с новейшим дизайном, пиксель в пиксель? Или хотите переработать старый сайт под новые тренды? Для этого нужно быть по-настоящему творческим человеком и уметь работать с Photoshop’ом, чтобы создавать сайты высочайшего класса. Даже если вы профессиональный веб-дизайнер с нужными навыками, подгонять каждый пиксель все равно занимает какое-то время, создавать все страницы для сайта клиента, а также обеспечить каждый UI элемент, область и крошечную деталь долей внимания. Все это отнимает время.

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

        Лучшие PSD шаблоны сайтов на сайте Envato Elements (без ограничений по использованию)

        В 2016 году запустился сайт Envato Elements и сразу стал набирать бешеную популярность. На сайте всего одно предложение (все включено):

        Зарегистрируйтесь на Envato Elements, и вы сможете скачивать psd шаблоны сайтов без ограничений по использованию, темы, шрифты, графические наборы и т.д. Все по одной ежемесячной плате. Все правильно! Скачивайте профессиональные шаблоны и графику сколько душе угодно, настраивайте все это под свой проект.

        Ниже представлен самый популярный шаблон на Envato Elements — Elementy Multipurpose PSD . В комплекте идет 19 PSD файлов, макеты магазина, дизайн блога, страницы портфолио и т.д.


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

        Если же ваши потребности ограничены, или вы предпочитаете покупать графику и веб-материалы отдельно, мы можем предложить тысячи готовых шаблонов на ThemeForest.

        PSD шаблоны сайтов на ThemeForest

        Ниже представлен ТОП PSD шаблонов сайтов за 2016 год, которые можно купить или скачать. Это лишь капля в море от того объема, который профессиональные веб-дизайнеры загружают на ThemeForest каждую неделю. Взгляните на лучшие шаблоны сайтов для Photoshop’а за 2016 год:


        Правильный дизайн может сделать из посредственного сайта произведение искусства:

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

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

        Ваш бизнес (или ваших заказчиков) может реализовать намеченные планы и свой потенциал в сети!

        ТОП-10 PSD шаблонов сайтов (с сайта ThemeForest за 2016 год)

        Ниже представлен ТОП-10 PSD шаблонов сайтов на сайте ThemeForest. Все шаблоны созданы талантливыми веб-дизайнерами, которые отдали время, заботу в проработку каждой детали этих PSD файлов.

        1. Cesis – комплексный, многоцелевой PSD шаблон сайта

        Лучший набор PSD шаблонов 2016 года с большим выбором функций. Набор из более чем 100 дизайнов в Photoshop, макеты чистые и очень гибкие. Потрясающие шаблоны, подогнан каждый пиксель, в основе лежит система сеток 1170px. Используйте макеты для создания сайта компаний любого типа: от блогов о моде до художественного портфолио или творческого бизнеса.


        2. OnePro – креативный PSD шаблон сайта

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


        3. Electro — PSD шаблон интернет-магазина электроники

        Electro – высокофункциональный набор из 36 PSD шаблонов. Шаблон имеет чистый, светлый дизайн, полностью готовый к созданию замечательного интернет-магазина электроники. Файлы шаблона профессионально организованы и разбиты по слоям на группы для упрощения работы. Также в комплекте идет три уникальных домашних страницы и 5 хедеров, которые можно компоновать друг с другом.


        4. Circle – уникальный PSD шаблон сайта

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


        5. Agora – удивительный PSD шаблон для eCommerce

        Agora – современный, светлый и креативный eCommerce шаблон. Если вы выберите этот набор дизайнов, пользователи полюбят ваш сайт. Сайт даст пользователям красивый и уникальный опыт. PSD шаблоны выполнены в спортивном стиле, однако их можно адаптировать под продажу чего угодно. В комплект входит 14 убийственных дизайнов и 6 графических слайдеров!


        6. The Spectre – шаблон сайта для агентств

        Spectre – современный, плоский шаблон для агентств. Дизайн чистый с 12 адаптивными страницами и блоками тем, которые можно смешивать, как угодно. Множество функций в дизайне, стильные строчные иконки, векторные формы, привлекательные UI элементы: профили, броские цитаты и витринные изображения. Шаблон заточен под Bootstrap с 12 колонками и шириной в 1170px. Это хорошо спроектированный, привлекательный набор PSD файлов, полностью готовых к использованию в вашем следующем дизайне.

        7. Experts — PSD шаблон для бизнеса и финансов

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

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

        8. Begge – современный PSD шаблон магазина модной одежды

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

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

        9. Digital Agency – Шаблон для SEO/маркетинга

        Digital Agency – PSD шаблон сайта для SEO и различных агентств. В основе лежит material design, перемешивающий чистые UI элементы с яркими цветами. Он так и ждет, когда вы добавите свои фотографии и графику перед переносом на сайт. На выбор можно или купить PSD файл, или приобрести WordPress версию с кодом, встроенным Bootstrap 3 и множеством функций.

        10. Volter – Креативный шаблон сайта (PSD)

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

        Файл PSD имеет высокое разрешение и основан на Bootstrap сетке 1170px, с ним очень легко работать. Лучший шаблон полностью готов к работе, забирайте и проектируйте уникальные сайты!

        Забирайте новые шаблоны (PSD) сайтов!

        Откройте для себя сотни профессиональных PSD шаблонов, созданных талантливыми веб-дизайнерами на ThemeForest. Или если хотите скачивать множество Photoshop шаблонов, тем и наборов графики на более регулярной основе, заходите на Envato Elements, где вы сможете скачивать и использовать множество качественных файлов без ограничений за одноразовую месячную плату.

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

        Google возвращает более 48 миллионов результатов на запрос «psd to html». Это популярный, но не самый лучший способ делать веб-сайты.

        Если это так популярно, то как можно сказать, что это умерло? Что ж… Хотел бы я, чтоб каждая проблема веб дизайна уместилась бы в 140-символьный твит, но это нечеткий вопрос, который требует более членораздельного объяснения. Давайте зароемся поглубже.

        Что такое верстка PSD макета?

        В общем, верстка это рабочий процесс. Первым, веб-страница создается в Photoshop документе (PSD), а затем конвертируется в код (используя HTML, CSS и JavaScript). Вы можете заменить Photoshop любым другим редактором изображений (такими как Pixelmator, GIMP, и тд.), но принцип тот же. Вот немного более подробное пошаговое объяснение:

        1. Нарисуйте высоко четкий макет в Photoshop с точностью до пикселя так, как вы хотели бы видеть ваш сайт.
        2. Используйте инструмент нарезки изображений для экспорта макета в веб.
        3. Напишите HTML и CSS, которые используют стилистику экспортированного макета.

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


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

        Была лы вообще верстка PSD хорешей идеей?

        Да, процесс верски PSD в HTML был одним из лучших способов создания веб-сайтов. Есть две больших причины почему верстка макетов была хорошей идеей.

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

        Второе (и возможно самое важное) веб использовалось только на десктопных браузерах и не присутствовало на телефонах и планшетах так, как сегодня. Разработка под одно фиксированное разрешение 1024х768 был вполне рабочим вариантом.

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

        Что не так с версткой PSD сейчас?

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

        Адаптивный веб дизайн

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


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

        CSS дизайн

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

        Завершеннось

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

        Это так же означает, что на много лучше поддерживать современные процессы. CSS фреймворки как Bootstrap и Foundation дают больше возможностей для дизайна в браузере. Приложения такие как Balsamiq и Omnigraffle помогают быстро прототипировать сайт. Макеты, нарисованные на бумаге карандашем так же выдержали испытание временем так как позволяют очень быструю итерацию.

        Означает ли это, что Photoshop умер?

        Нет! И даже не близко! Photoshop остается очень важен для веб дизайна. Проблема возникает когда Photoshop используется для решения всего без мысли о более высоких задачах (дизайна сайтов). Photoshop прекрасен для редактирования и экспорта фотографий для веб. Еще остались ситуации, когда есть смысл в генерации полнодетального макета (в Photoshop, Illustrator, или других) как часть более законченных процессов. Вот несколько примеров:

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

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

        Разные приемы

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

      © 2024 - statusmania.ru Программы. Интернет и сети. Андроид. Windows 7, Игры.