Photoshop html css: Копирование CSS из слоев в Photoshop

У нас есть InDesign созданный файл, и теперь мы хотели бы заполнить базу данных содержимым, доступным в файле InDesign. Есть ли SDK для чтения содержимого файлов InDesign и заполнения его в базу…

Можно ли конвертировать элементы, которые я создал с помощью Photoshop. f.e. Если бы я создал skin для кнопки в Photoshop без какого-либо текста в ней. Могу ли я преобразовать его в CSS, чтобы…

У меня есть страница на моем сайте, где пользователь может загрузить файл Photoshop, Illustrator или InDesign. Это для типографии, и им нужно сделать такие вещи, как посмотреть, какие шрифты…

Я могу использовать AppleScript, чтобы отправить ExtendScript в Photoshop и получить обратно результат: Это отправляет 2 в stdout: tell application Adobe Photoshop CC 2017 do javascript var x = 2; x…

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

Этот сценарий пытается: создайте новую папку сканируйте документ InDesign для всех изображений преобразование всех изображений в оттенки серого в Photoshop сохраните новые изображения в оттенках…

Я хочу (программно) преобразовать хранилище файлов шаблонов Adobe Indesign (.indd) во что-то более простое для манипулирования людьми (то есть файлы CSS/HTML). Меня больше интересует точное…

Я изучаю возможность создания экспорта HTML из Adobe Indesign или Adobe FrameMaker, которые дают мне индексную навигацию на панели слева и содержимое на главной панели. Поэтому я могу легко…

Пытаясь создать дизайн translate photoshop в код HTML/CSS, я застрял с проблемой смешивания цвета и изображения. В дизайне Photoshop у меня есть следующие слои: Изображение (20% непрозрачность) Цвет…

Мне нужен экспорт SQLdata в InDesign. Потом я прочитала документации и поиска библиотеки, но библиотека поиск. XML просто экспортируется в InDesign, но как сделать его автоматическим с php или…

Быстрое создание CSS шаблона в Photoshop | CSS | Статьи | Программирование Realcoding.Net

Может показаться, что мы возвращаемся в 1999 год. Данная статья, автор которой Casper Voogt покажет, как при помощи Photoshop и ImageReady создать валидный XHTML/CSS макет.
 

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

Графические WYSIWYG (визуальные) редакторы, такие как Fireworks, GoLive и ImageReady позволяют сгенерировать код HTML, однако в экспортированном коде присутствуют таблицы и абсолютное позиционирование. Однако эти программы могут делать некоторые полезные вещи (даже больше чем вы можете себе представить), относительно валидности и дальнейшего использования кода. Я покажу простой способ, как создать макет при помощи Photoshop, затем подготовить его в ImageReady и в завершении очистить полученный код.

Предпосылки

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

Сделать в ImageReady CSS-ready

Как известно, в состав Adobe Photoshop CS входит ImageReady CS. Adobe Fireworks больше пригоден для векторной графики, чем растровой. И наоборот, ImageReady идеально подходит для работы с растровыми изображениями, чем с векторными. Используя ImageReady можно экспортировать порезанный шаблон в блоки с абсолютным позиционированием, которые затем можно легко перевести в относительное.

Это означает, что можно начать делать все в Photoshop, тени, фильтры и т. д., затем переключиться в ImageReady для порезки шаблона. Убедитесь, что шаблон выровнен по левому краю, не центрируйте его. При помощи ImageReady можно стилизовать навигационное меню (даже если вы сделали его простым текстом) и создать роловеры. (При создании шаблонов, конечно можно и не использовать роловеры от Adobe, их наверняка вы сделаете при помощи CSS либо JavaScript, однако для нашей задачи такие роловеры вполне сгодятся)

Разрезаем

Для порезки шаблона используйте инструментом Slice. По окончании для выбора и переименования воспользуйтесь инструментом Slice Select. Например, у вас есть заголовок, который позже станет тэгом div. ImageReady любит названия, типа “Yourfile_1_01″, однако старайтесь давать логически понятные имена с самого начала, например “header”. Это пригодится в дальнейшем, при редактировании CSS. Аналогично поступаем и с контентом, любыми боковыми колонками, футером и др. называя их соответственно.

Вернемся назад и поработаем над дизайном, постоянно переключаясь между Photoshop и ImageReady, до тех пор, пока не протестим дизайн в браузере. Идем в ImageReady, меню File › Preview In ›, выбираем любимый браузер. Смотрим, чтобы в браузере все выглядело, как задумано в дизайне, меняя соответственно, что не так.
Экспортируемые части будут представлять из себя код с тэгами div, в которые вставлены графические файлы JPG или GIF. Позже можно будет вставить в них или в другие div‘ы фоновые изображения.

Экспорт HTML & CSS

Настройка: выбрать File › Output Settings › HTML и измените по своему усмотрению. Тут же можно выбрать опцию создавать код XHTML. Дальше жмем “Next”, выбираем Saving HTML Files.

Нажать снова “Next”, настройка для Slices. Выбираем “Generate CSS“. В выпадающем списке “Referenced” можно выбрать By ID, Inline или By Class. Выбираем By ID. Можно также поэкспериментировать с именами разрезанных частей в “Defailt Slice Naming”.

Экспортируем наш макет в (X)HTML/CSS с помощью меню File › Save Optimized As, выбираем место, куда сохранить. ImageReady создаст поддиректорию /images в папке, куда вы сохраняете это дело

Пример CSS кода, созданного ImageReady

#header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}

Пример HTML кода, созданного ImageReady

<div>

  <div>

    <img src="images/header.jpg" »
width=”800″ height=”150″ alt=”" />
  </div>

  <div id=”navigation”>
    <img id=”navigation” src=”images »
/navigation.jpg” width=”200″ height=”450″ »

alt=”" />

  </div>
  <div id=”content”>
    <img id=”content” src=”images/content.jpg” »

 width=”600″ height=”450″ alt=”" />
  </div>
</div>

Что еще?

Итак, мы имеем части, состоящие из абсолютно позиционированных блоков div непосредственно с кодом CSS. Если абсолютное позиционирование вам подходит, то на этом можно и закончить. Если же нет, то давай те подумаем, как привести эти блоки в относительное позиционирование.

Во-первых, скопируйте полученный код в любой редактор (Dreamweaver, BBEdit и т.д.). Можно “обернуть” все div‘ы еще одним блоком для более четкого позиционирования. ImageReady экпортирует разрезанные части CSS блоками и “заворачивает” их в блок div с названием “Table_01″. Переименуем div “Table_01″ в “container”, например, и зададим ему стиль при помощи CSS, либо вообще попробуем его удалить вместе с его СSS кодом

Дальше, переводим все div‘ы в относительное позиционирование, удалив абсолютное, давая им унаследовать относительное, следя за элементами float и clear. Можно все сделать сразу и одним махом, но лучше менять по очереди каждый блок, проверяя результат.

Для блоков, содержащих изображения, нужно определиться, какие из них включить в CSS как фон. Фон страницы задавайте в CSS отдельно. Если этот шаблон пойдет на создание сайта, вынесите таблицу стилей отдельно. Проверьте весь код на валидность.

Пример конвертированного и “очищенного” CSS

#header {
float: left;
clear: right;
}

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

Пример конвертированного и “очищенного” HTML

<div>
  <img src="images/header.jpg" alt="" »
name=”headerimg” width=”800″ height=”150″ »

id=”headerimg” />

</div>

Автоматизация процесса

Если придется что-то менять или пересмотреть в шаблоне, просто меняем графику в Photoshop и ImageReady, потом ре-экспортируем в HTML файл, заменив первоначальный, со всеми новыми графическими изображениями. Только не забудьте сохранить отредактированный или “очищенный” HTML файл для простоты последующего изменения нового.

Источник alistapart.com

Перевод — Дмитрий Папуца

Оригинал статьи

Translated with the permission of A List Apart Magazine and the author[s].

Как сверстать шаблона сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

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

Подготовка

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

Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

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

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min. js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

* {
 margin: 0;
 padding: 0;
}

body {
 width: 100%;
 height: 100%;
 color:#333;
 background: #fff;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0. 94em;
 line-height:135%;

}

aside, nav, footer, header, section { display: block; }

ul {
 list-style:none;
}

a {
 text-decoration:none;
}

a:hover {
 text-decoration: none;
}

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

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

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

. header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки.  #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

/* Верхнее правое меню */

.topMenuRight {
 height:57px;
 position:absolute;
 left:0px;
 top:0px;
 border: 0px solid #1FA2E1;
 }

.topMenuRight ul li {
 background: url(images/line.png) 0px 0px no-repeat;
 float:left;
 height: 57px;
 }

.topMenuRight ul {
 padding-left:0px;
 }

. topMenuRight ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:16px 20px 21px 20px;
 }

.topMenuRight ul li a:hover{
 background: #fff;
 color:#555;
 }

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

<div>

<a href="#" title="Следить в Twitter!" target="_blank"></a>
<a href="#" title="Подписаться на rss" target="_blank"></a>
<a href="#" title="Подписаться по e-mail" target="_blank"></a>

</div>

А в стили CSS нужно добавить вот это:

. share-new {
 z-index: 1;
 position:absolute;
 right:0px;
 top:14px;
 }
 .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }

 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 3px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

Вот результат:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

<div>
<a href="#"><img src="images/logo. png" alt="Блог" /></a>
</div>

А вот и стили:

/*----------------------------
 Логотип
------------------------------*/

.logo {
 position:absolute;
 left:0px;
 top:90px;
 }

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

<!-- Начало #bottomMenu -->
 <nav>
<ul>

 <li><a href="#">Категория</a>
 <ul>
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>

 </ul>
 </nav><!-- конец #bottomMenu -->

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

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

Ну а сейчас можно смело добавлять CSS:

.bottomMenu {
 width:1200px;
 height: 70px;
 position:absolute;
 left:0px;
 bottom:0px;
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }

#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }

#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;

 }

#dropdown_nav li a {

 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu. png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }

/* Выпадающее меню */
 #dropdown_nav .sub_nav {
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }

#dropdown_nav .sub_nav li {

 width:180px;
 padding:0px;
 }

#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;

 }
 #dropdown_nav . sub_nav li a:hover {
 background:#222;
 color:#0dbfe5;
 }

Результат:

Блок «Последние записи»

Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:

<div>

<h3>Последние записи</h3>

</div>

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<!-- Начало .postBox -->
<article>

<div><a href="#"><img src="images/tumb.png"/></a></div>

<h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3>

<div>
Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a>
</div>

<div>

<p>Приветствую Вас, уважаемые читатели блога.  Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p>
</div>

<div><a href="#">Далее</a></div>

</article>
<!-- Конец .postBox -->

<div></div>

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

И конечно же не забываем про CSS для постов:

.raz {
 margin:0 auto;
 border:0px solid #333;
 background: #fff;
 width:116px;
 height:29px;
 margin-bottom:50px;
 background: url(images/raz.png) 0px 0px no-repeat;
 }

.postBox {
 border:0px solid #333;
 background: #fff;
 width:700px;
 margin-top:0px;
 margin-left:0px;
 margin-bottom:50px;
 }

. postBox h3 a {
 font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-style:normal;
 font-weight:100;
 font-size:33px;
 line-height:35px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.postBox h3 a:hover {
 color:#0dbfe5;
 }

.postBox .textPreview {
 border:0px solid #333;
 width:800px;
 margin-bottom:30px;
}

.postBox .textPreview p{
 margin-top:0;
 }

.postBox .postThumb{
 margin:0px 0px 15px 0;
 }

.postBox .postMeta {
 padding-bottom:15px;
 clear:left;
 overflow:hidden;
}

.more-link a {
 border-radius: 3px;
 background: #0dbfe5;
 margin-top:30px;
 font-weight:600;
 color:#fff;
 font-size:17px;
 padding:6px 25px 9px 25px;
 -moz-transition: all 0.3s 0. 01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.more-link a:hover {
 background:#000;
 color:#0dbfe5;
 }

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

Правая часть (Сайдбар)

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<form method="get" action="/search" target="_blank">
<input name="q" value="" placeholder="Поиск...">
<input type=submit value="">
</form>

И стили для поиска:

#form-query {
 position:relative;
 background:#eeeeee;
 border:0px solid #e4e4e4;
 width:335px;
 height:31px;
 padding:8px 10px 7px;
 font-weight:100;
 font-size:18px;
 color:#000;
 margin-bottom: 30px;
}

#form-querysub {
 position:absolute;
 right:15px;
 top:15px;
 width:17px;
 height:17px;
 background:url(images/search. png) 0px 0px no-repeat;
 border:0px dashed #333;
 }

#form-querysub:hover {
 cursor: pointer;
}

Виджет

После кода поиска вставляем:

<div>

<h3>Виджет 2</h3>
<ul>

<li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li>

 <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li>

 <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li>
 <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li>
 <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li>
 <li><a href="#" title="Примеры идеального сочетания цветов в веб &#8211; дизайне">Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li>
 <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li>
 <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li>
 <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li>
 <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li>
 </ul>

</div>

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h3img и сохранить в папке images нашего шаблона.

CSS код виджетов:

.rightBox {
 margin-top:0px;
 margin-left:0px;
 width:330px;
 margin-bottom:30px;
 }

.rightBox h3 {
 width:335px;
 background:#f7f7f7 url(images/h3img.png) 320px 14px no-repeat;
 font-size:18px;
 font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
 color:#333;
 display:block;
 padding:10px 0 15px 20px;
}

.rightBox ul li{
 width:350px;
 padding:10px 0px;
 border-bottom:1px solid #f6f6f6;
 font-size:14px;
 line-height: 16px;
 }

.rightBox a {
 color:#333;
 }

.rightBox a:hover {
 color: #0dbfe5;
 }

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<div>
<a href="#"><img src="images/logo. png" alt="Блог" /></a>
</div>

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

CSS

#footer {
 margin-top:50px;
 height:100px;
 width:100%px;
 background: #0dbfe5;
 }

#footerInner {
 position:relative;
 border:0px solid #000;
 width:1200px;
 margin:0 auto;
 height:100px;
 }

#footerlogo {
 position:absolute;
 left:0px;
 top:25px;
 }

.footernav {
 position:absolute;
 right:0px;
 top:35px;
 }

.footernav ul li {
 float:left;
 }

.footernav ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:0px 0px 0px 25px;
 }

. footernav ul li a:hover{
 color:#333;
 }

В конечном итоге получаем вот такой шаблон:

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

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

До скорых встреч.

Photoshop против Sketch битва за чистейший HTML/CSS

Еще в марте мы написали статью, в которой изложили 3 причины использования Sketch и сравнили функцию “Export” с функцией Photoshop “Extract Assets”.

Тогда, на наш взгляд, Sketch выигрывал с небольшим преимуществом. Однако image assets не единственный тип активов, который вы можете взять из состава макета. В этой статье мы рассмотрим, как оба приложения справятся с такой деликатной задачей, как генерация HTML/CSS кода.

Метод 1: старый способ с Photoshop

С появления CS6, Adobe позволил их сообществу создавать свои собственные расширения для Photoshop. Это привело к созданию многих инструментов извлечения кода, как CSS Hat и CSS3Ps, который является бесплатным.

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

Метод 2: экспорт кода в Sketch

Стили слоев в приложении Sketch очень CSS-ориентированные (это, в конце концов, инструмент дизайна пользовательского интерфейса), так что очень легко щелкнуть правой кнопкой мыши и “Copy CSS Attributes”. “Shadow”, например, принимает четыре значения; X, Y, Blur и Spread, и это непосредственно переносится в CSS box-shadow: X Y Blur Spread. На мой взгляд, это самая простая форма извлечения кода.

Однако приложение Sketch, конечно, все еще довольно новое и у него нет помощника-приложения для редактирования кода. Я не знаю, намерен ли Bohemian Coding исправить это (было бы замечательно), но сейчас Sketch не имеет возможности расширения рабочего процесса с точки зрения кодирования.

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

Метод 3: извлечение кода с Adobe Brackets

За последние 18 месяцев Adobe прогрессировал; есть ряд мобильных приложений для снимка векторов, цветов из реальной жизни с помощью камеры устройства, и эти снимки автоматически синхронизируются с вашим аккаунтом Creative Cloud.

Но самым впечатляющим является сотрудничество Brackets и Photoshop. Brackets – редактор с открытым исходным кодом для фронтенд разработчиков, созданный с HTML, CSS и JavaScript. Несмотря на возможности “Live Preview” и интеграции с Edge Web Fonts, его пользовательский интерфейс довольно минимален, потому что вы добавляете только необходимые функции.

Импорт документов Photoshop в Brackets

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

Фактически, подписчик Creative Cloud может отправить вам “общую ссылку”, которую можно скопировать в Brackets, что позволяет начать расширение, не имея файла вообще. Давайте попробуем.

Во-первых, найдите боковую панель и иконку подсказки “Extract for Brackets (Preview)” – нажмите на нее, и вы увидите, образец документа Photoshop со всеми неповрежденными слоями, где вы можете переключать эти слои, как если бы вы были в самой программе Photoshop. Brackets очень хорошо вводит вас в курс дела, я постараюсь, чтобы он был кратким.

Измерение расстояния между двумя слоями

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

Быстрое кодирование с подсказками CSS

CSS подсказки это уникальная функция, и она показывает, что Brackets развиваются, несмотря на то, что Dreamweaver СС все еще существуют. Наш следующий шаг – выбрать слой из PSD и извлечь все стили из него.

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

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

Вердикт

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

Преобразование PSD в CSS код в рабочем процессе стиля split-screen, даже без PSD на вашем компьютере, является лучшей функцией, которую я видел в последние месяцы.

А самое лучшее это то, что Brackets бесплатен, независимо от того, есть ли у вас Photoshop или подписаны ли вы на Creative Cloud.

Высоких конверсий!

11-03-2016

Photoshop vs. Sketch: битва за самый чистый HTML / CSS

Еще в марте я написал статью, в которой изложены 3 причины использования Sketch и сравнил функцию «Экспорт» с «Извлекаемыми активами» в Photoshop.

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

Метод 1: Старый путь, с фотошопом

Начиная с CS6, Adobe разрешила своему сообществу создавать собственные расширения для Photoshop. Это привело к созданию многих признанных критиками инструментов извлечения кода, таких как CSS Hat и CSS3Ps , которые бесплатны.

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

Способ 2. Экспорт кода с помощью приложения Sketch

Стили слоев Sketch App очень ориентированы на CSS (в конце концов, это инструмент проектирования пользовательского интерфейса), поэтому очень легко щелкнуть правой кнопкой мыши и «Копировать атрибуты CSS». «Тень», например, принимает четыре значения; X, Y, Blur и Spread , и это переводит прямо в CSS box-shadow: X Y Blur Spread На мой взгляд, это самая простая форма извлечения кода, и она хорошо работает.

Тем не менее, Sketch App, безусловно, все еще довольно нов на сцене, и у него нет сопутствующего приложения для редактирования кода. Я не знаю, намеревается ли Bohemian Coding исправить это (это было бы здорово), но в данный момент у Sketch нет средств для расширения рабочего процесса с точки зрения кодирования.

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

За последние 18 месяцев Adobe добилась потрясающих успехов в плане непрерывности; Существует ряд мобильных приложений для захвата векторов, кистей и цветов из реальных моментов с помощью камеры устройства, и эти снимки автоматически синхронизируются с вашей учетной записью Creative Cloud.

Но самое впечатляющее сотрудничество — это работа со скобками и Photoshop. Brackets — это редактор кода с открытым исходным кодом для внешних разработчиков, созданный на основе HTML, CSS и JavaScript. Несмотря на возможности «Live Preview» и интеграцию с веб-шрифтами Edge, его пользовательский интерфейс на самом деле весьма минимален, поскольку ожидается, что вы добавите только те функции, которые вам нужны, с помощью расширений, созданных сообществом.

Импорт документов Photoshop в скобки

Начиная с выпуска Brackets 1.0 (когда Adobe отказалась от своего форка «Edge Code» и застряла с именем «Brackets»), веб-разработчики теперь могут импортировать документы Photoshop непосредственно в Brackets и извлекать информацию о дизайне, такую ​​как цвета, шрифты и другие атрибуты CSS, одновременно кодирование, даже если на их компьютере не установлен Photoshop.

Фактически, подписчик Creative Cloud может отправить вам «общую ссылку», которую вы можете скопировать в скобки, что позволит вам начать извлечение, даже не имея файла вообще. Давай попробуем.

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

Измерение расстояния между двумя слоями

Вы можете измерить расстояние между двумя слоями в Sketch App, щелкнув первый слой, удерживая Shift , а затем щелкнув второй слой. Я думал, что это было невероятно интуитивно (потому что это так), пока я не сделал то же самое в Extract for Brackets и понял, что могу скопировать значение в буфер обмена и использовать его в своей таблице стилей, не выходя из приложения. В действительности вы можете удерживать Shift и копировать любое значение в буфер обмена.

Как сделать Rapid-код с помощью CSS Hinting

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

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

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

Вердикт

Приложение Sketch и Photoshop борются уже довольно давно. Photoshop — это огромный многофункциональный инструмент. Хотя некоторые, безусловно, будут утверждать, что для обычного дизайнера пользовательского интерфейса это слишком «радует», у Sketch App есть две вещи, которых нет, и, возможно, никогда не будет — непрерывность и совместная работа.

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

И что самое приятное, Brackets бесплатен , независимо от того, есть ли у вас Photoshop или подписка на Creative Cloud.

Онлайн-кинотеатр ivi — фильмы, сериалы и мультфильмы смотреть онлайн бесплатно в хорошем качестве

Каждый день миллионы людей ищут фильмы онлайн, и никто не хочет усложнять себе жизнь – и вы наверняка один из них! А раз так, то ivi – это именно тот ресурс, который вам нужен. От лучших кинолент в HD-качестве вас отделяет буквально один клик. Мы не просто освобождаем от необходимости идти в кинотеатр или изучать программу телепередач – у посетителей нашего ресурса гораздо больше возможностей.

Видеотека ivi – это постоянно пополняющаяся коллекция в рунете, которая насчитывает более 60 тысяч отечественного и зарубежного контента, доступного для просмотра онлайн. Мы первыми в России подписали контракты с крупнейшими голливудскими студиями (Walt Disney, Warner Bros., Sony, 20th Century Fox, Universal, Paramount, MGM и другими) и на постоянной основе сотрудничаем с крупнейшими российскими компаниями и телеканалами.

Онлайн-кинотеатр ivi.ru – это:

1. уникальная рекомендательная система, учитывающая ваши предпочтения и предлагающая посмотреть именно то, что точно придется вам по душе;
2. просмотр в одно касание на любом из устройств, подключенном к вашему ivi-аккаунту – от смартфонов до телевизоров с технологией Smart TV;
3. возможность скачивать в память мобильного устройства лицензионный контент и смотреть его без доступа к Интернету;
4. уникальные условия и преимущества для обладателей подписки ivi, делающей кинопросмотр комфортным и приятным;
5. удобная и продвинутая система уведомлений, вы не пропустите выход крутого обсуждаемого блокбастера – мы известим о появлении подходящим для вас способом;
6. возможность добавлять фильмы в «смотреть позже», чтобы вернуться к ним в свободное время;
7. контент, для просмотра которого не требуется устанавливать видеоплееры или искать кодеки;
8. просмотр онлайн контента хорошего разрешения без регистрации и смс.

Откройте для себя возможность смотреть фильмы онлайн бесплатно в отличном качестве с кинотеатром ivi!

PSD в HTML мертв

PSD в HTML есть во всем Интернете. На самом деле, многие люди спрашивали меня, почему на Treehouse нет учебника из PSD в HTML. В дополнение к учебным пособиям существует множество компаний, которые принимают PSD и конвертируют его в веб-страницу примерно за 100 долларов США.

Ознакомьтесь со всеми нашими курсами HTML в Treehouse.

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

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

Бесплатная пробная версия Treehouse: Хотите узнать больше о HTML и стратегии дизайна? Нажмите здесь, чтобы попробовать бесплатную пробную версию Treehouse.

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

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

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

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

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

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

Был ли PSD в HTML хорошей идеей?

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

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

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

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

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

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

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

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

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

Screensiz.es предоставляет таблицы информации о популярных аппаратных устройствах.

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

Дизайн CSS

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

Срок погашения

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

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

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

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

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

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

Различные штрихи

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