Обработка изображения и видеофайлов
Psd шаблоны для тренировки html верстки

Psd шаблоны для тренировки html верстки

17.03.2019 Уроки Фотошоп онлайн

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

  • Предоставляй макет в традиционном формате (.psd) в противном случае сайт будет отличаться от макета.
  • Использую цветовое пространство rgb. Именно оно используется по умолчанию в веб. CMYK используется в полиграфии и для web никак не подходит.
  • Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие величины.

2. Наведи порядок в слоях


  • Группируй слои по папкам (смысловым блокам) с осмысленными названиями, а не “Группа 3 copy”. Тоже самое касается всех слоев. (Шапка, контент, подвал и т.п.) Придерживайся иерархии сверху в низ и слева на право.
  • Удаляй все не нужные слои. Верстальщик может это сверстать.

3. Четкие размеры и отступы


  • Используй родные направляющие photoshop или готовые модульные сетки чтобы точно определить расположение элемента на странице.
  • Осознано выбирай пропорции и размеры объектов и делай их кратными, например, 1000px, а не 998px.
  • Размер шрифта должен быть целыми числами без дробей.
  • Никогда принудительно не растягивайте шрифт.

4. Проблемные моменты для верстальщика


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


  • Показывай состояния всех интерактивных элементов: нормальное, активное, не активное, при наведении, при клике и т.д.
  • Показывай все оформления текста: заголовки, списки, таблицы, контент и т. д.

6. Исходные материалы макета


  • Прикрепляй в отделенную папку все изображения в исходном качестве и дополнительные материалы, которые используются в макете.
  • Все не стандартные шрифты копируй в туже папку. У верстальщика может не быть этого красивого шрифта. И на его поиски может уйти большое количество времени.
  • Давай пояснения, к элементам, которые могут вызвать вопросы. Если есть особые задумки, которые не так просто показать в макете, то запиши их в отдельный текстовый файл. К тому моменту, когда верстальщик доберется к этому элементу макета, ты и сам можешь забыть, чего хотел, и придется вновь тратить время на то что бы вспомнить и объяснить идею верстальщику.

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

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

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

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

psd для сайта должна происходить с учетом возможностей воссоздания его дизайна с помощью языка html и css . Вот некоторые характеристики, которыми должен обладать качественный шаблон:
  • Каждый элемент дизайна должен быть выполнен на отдельном слое – структура шаблона становится видна при его раскрытии в Фотошопе. С помощью слоев все части дизайна можно редактировать независимо друг от друга.

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


  • Рисунок шаблона сохраняется в формате psd (реже tiff ) – только эти графические форматы поддерживают многослойную структуру изображений. Остальные являются лишь алгоритмами сжатия графических объектов;
  • Вложенность – все слои должны быть сгруппированы по принадлежности к определенному структурному элементу дизайна (подвал, шапка, меню );
  • Приоритет однородных тонов – для фона в шаблоне лучше использовать однородные повторяющиеся тона, которые можно легко отобразить с помощью html и css ;
  • Как можно меньше фоновых изображений – использование в качестве фона полновесных рисунков сильно увеличивает объем всей страницы. А, следовательно, и время загрузки сайта. Особенно критично это требование для шаблона мобильного ресурса;
  • Использование направляющих – использование направляющих при выравнивании элементов psd шаблонов для сайтов является обязательным. Это во многом облегчает процесс верстки, когда некоторые части дизайна вырезаются и используются как изображения для фона:



  • Приоритет стандартным шрифтам – надписи лучше наносить стандартным набором шрифтов. При использовании редкого шрифта его файл должен прилагаться к шаблону;
  • Меньше нестандартного форматирования – изменять можно лишь стандартные параметры текста (размер, семейство, интервал ). Искажение текста с помощью инструментов графического редактора (выгибание и другие эффекты ) приведут к тому, что надпись будет использована как фоновый рисунок. А это ведет к увеличению веса всего шаблона:


  • Оптимальные размеры – по ширине psd шаблон для сайта должен быть не менее 1000 пикселей. При этом ширина фонового рисунка не может превышать указанную величину. Иначе это может привести к искажению отображения шаблона в браузере.

Шаблоны для баннеров

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

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

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


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


Основы верстки

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


Вот структура сайта, которую можно сверстать с помощью тегов

. Каждая из частей шаблона помещена в отдельный слой. Боковая панель и контент расположены внутри слоя-контейнера:

Контент

Боковая панель

Подвал

Теперь рассмотрим стилевые настройки, заданные с помощью классов css :

Header { margin-left:auto; margin-right:auto; margin-bottom:10px; width:1000px; height:100px; border:1px solid #000000; background: #009966; background-image: url(img/1.gif); } .pages { margin-left:auto; margin-right:auto; width:1000px; } .content { margin-right:10px; width:806px; height:450px; border:1px solid #000000; background: #999999; float:left; } .sidebar { width:180px; height:450px; border:1px solid #000000; background: #FF9900; float:left; } .foot { clear:both; } .footer { margin-top:10px; margin-left:auto; margin-right:auto; width:1000px; height:50px; border:1px solid #000000; background: #333399; }

Для каждого слоя в описании классов с помощью свойств width и height устанавливаются размеры. Цвет фона задается параметром background .

и одну себе на ), и которому указано 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, где вы сможете скачивать и использовать множество качественных файлов без ограничений за одноразовую месячную плату.

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

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

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

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

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

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


        Сетка

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


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

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

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

      Установка операционной системы с флешки через BIOS

      Установка операционной системы с флешки через BIOS

      Биос версия 2.17 1246 настройка. Настройки Bios — Детальная инструкция в картинках. Раздел BOOT – управление загрузкой

      Биос версия 2.17 1246 настройка. Настройки Bios — Детальная инструкция в картинках. Раздел BOOT – управление загрузкой

      Как сбросить активацию вин 10

      Как сбросить активацию вин 10

      Лучшее на сайте
      1

      Купил iPhone, что делать дальше?

      2

      Создание загрузочного USB носителя с помощью программы Rufus Раздел «Файловая система»

      3

      Восстановление загружаемости Windows после установки OS X Yosemite На ноутбуках с несъемным аккумулятором

      4

      Создание печатных плат в Eagle CAD для начинающих

      5

      Отслеживание почтовых отправлений почты малайзии Малайзия пост отслеживание

      Новое
      Как вывести изображение на большой экран через Miracast

      Как вывести изображение на большой экран через Miracast

      Промокоды для ePN Cashback

      Промокоды для ePN Cashback

      Управление звуком с гарнитуры (Android) Тайная запись видео

      Управление звуком с гарнитуры (Android) Тайная запись видео

      История развития мобильных операционных систем: Samsung Bada

      История развития мобильных операционных систем: Samsung Bada

      Как сделать бесплатный хостинг на своем компьютере

      Как сделать бесплатный хостинг на своем компьютере

      Как проверить компьютер на наличие обновления драйверовHow to Scan Your Computer for Driver Updates

      Как проверить компьютер на наличие обновления драйверовHow to Scan Your Computer for Driver Updates

      Перенос системы на SSD: инструкция Клонирование диска на ssd windows 10

      Перенос системы на SSD: инструкция Клонирование диска на ssd windows 10

      Как получить монеты MacBain в Icarus Карта ресурсов - все локации в Icarus

      Как получить монеты MacBain в Icarus Карта ресурсов - все локации в Icarus

      Рекомендуем почитать