Фотошоп. Простые вещи.

[Alastor]

Как обещал, открою серию мини-уроков по всеми нами любимому продукту компании Adobe - Adobe Photoshop CS4.

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

Многие думают, что знают фотошоп хотя бы на 50% его возможностей. Я не буду в этих, назовем это заметками, уроках, описывать создание различных эффектов с помошью этого редактора. Такого добра в инете полно.

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

Итак, заметка первая.

Использование инструментов Slice Tool и Slice Select Tool для разрезки пунктов меню

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

1. Для начала создадим новый файл (Ctrl+N) размером, например, 400х400px покрасим его для контраста в синий цвет.

2. В меню View отметьте пункты Extras, Rulers, Snap:

Теперь напишем сами пункты меню. Для этого возьмем обычный Arial, размер 18pt, цвет белый, расстояние между строками регулируем с помощью панели Character - поставим для примера интервал 24pt.

*Чтобы вам было проще, просто скопируйте эти строки в созданный файл:

Lorem ipsum

Dolor sit amet

Consectetuer

Adipiscing elit

Sed diem nonummy

Nibh euismod

Tincidunt ut lacreet

Dolore magna

Aliguam erat volutpat

3. Выбираем инструмент Move Tool (клавиша V), зажимаем левую кнопку мышки (курсор должен находиться на линейке с делениями) и тащим направляющие со всех четырех сторон.

Так как мы отметили пункт View --> Snap, направляющие автоматически будут "прилипать" к краям текста очерчивая наше меню.

В итоге получится:

4. Далее выбираем инструмент Slice Tool и тянем от верхнего-левого угла меню к правому нижнему (как выделение в виндах). Выделение тоже будет "прилипать" к направляющим, так что не ошибетесь:

Наше меню обведено желтой рамкой:

5. Далее выбираем инструмент Slice Select Tool ( С ), в верхнем меню нажимаем копку Divide, так как у нас 9 пунктов меню, в верхнем поле ставим число 9, смотрим на результат.

Наше меню автоматически поделено на равные блоки:

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

Продолжение следует, извините, работа.

Edited March 10, 2010 by Alastor

[Энди]

Спасибо)

[Alastor]

Продолжим.

Картинку то мы слайсами разделили, а теперь встает резонный вопрос - "И что?". То есть как мы можем быстренько все это сохранить в нужном нам формате.

Объясню.

1. Выбираем - File --> Save for Web & Devices (или просто жмем Alt+Shift+Ctrl+S), видим такую картину:

В этом же окне выбираем инструмент Slice Select Tool

2. Я специально не стал тримировать наше меню (то есть обрезать его по контуру) чтобы было наглядней.

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

К примеру нам не нужны правый и нижний блоки, мы просто их не выделяем. Получаем следующее:

3. В настройках сохранения все стандартно:

Важно! Для каждого блока вы можете выбрать свой формат. Допустим для меню вы выбрали формат .PNG - то есть выделили с шифтом пункты меню, справа выбрали формат .PNG.

Если другие блоки вам нужно сохранить в формате JPEG, то просто задаете им этот формат на выходе.

Ну и дальше как обычно жмем Save, выбираете директорию сохранения и получаете:

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

Следующая заметка будет про точную подгонку отступов для создания меню на спрайтах.

Удачи.

Edited March 10, 2010 by Alastor

[LunatiK]

Критика: где подводные камни и предупреждения? Или свои шишки - это опыт ?

[Alastor]

Критика: где подводные камни и предупреждения? Или свои шишки - это опыт ?

ммм... ну вообще-то это самый простой способ и элементарная задача, шишек тут и нет почти.

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

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

Но все решается довольно просто.

Edited March 10, 2010 by Alastor

[Alastor]

Продолжаем.

Выше мы рассмотрели простой способ резки изображений (макетов). После небольшой практики вы будете резать макет любой сложности за пару минут.

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

То есть чтобы текст (ссылки) на наших кнопках располагались посередине относительно верха и низа блока.

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

Итак, одинаковые кнопки для меню на спрайтах (пример меню будет ниже).

1. Опять создаем новый файл (Ctrl+N) и закрашиваем его в синий цвет, как в предыдущей заметке.

2. Сделам 3 кнопки. Выберите шрифт Arial --> 14pt --> Sharp. Цвет белый.

Чтобы было быстрее просто скопируйте эти три строки в ваш документ:

Все были посланы

Гулять в парк

До вечера субботы

3. Делаем точно так же, как и в предыдущей заметке, то есть сначала привязываем направляющие к меню (Move tool --> тащим мышкой). Snap в меню View должен быть включен.

4. Выбираем инструмент Slice Tool и выделяем им наше меню:

5. Выбираем инструмент Slice Select Tool, наверху нажимаем кнопку Divide, Вводим цифру 3 (у нас 3 пункта меню) и получаем разделенное на 3 равных блока меню:

Нажмите несколько раз Ctrl+ для зума (увеличьте до 300%). Внимательно смотрим - результат нас не устраивает. По центру, точно между направляющими находится только средний пункт, а кнопки должны быть одинаковыми:

Нам надо это как то исправить. И теперь в дело вступают наши глазки.

Для этого мы, не отменяя активного инструмента Slice Select Tool выделяем верхний пункт нашего меню (просто один раз щелкнем по нему) - выделение останется только на нем.

Нажимая клавишу "Вверх" (стрелочка на клавиатуре) двигаем рамку выделения до тех пор, пока пункт меню не окажется точно посередине. Средний пункт не трогаем, результат нормальный, а нижний пункт таким же образом двигаем вниз. У нас получилось:

Уменьшим приближение до нормального - 100% (Ctrl -)

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

а) Выделяем первый пункт меню (инструмент Slice Select Tool по прежнему активен) и нажимаем: Ctrl+C ; Ctrl+N ; Ctrl+V (во всех диалоговых окнаж жмем "ОК").

В результате получается первая вырезанная заготовка:

б) Можете повторить процедуру с этим же пунктом меню еще раз, а можете просто сделать дубликат картинки (нам нужно 2 копии):

Заготовки у нас есть. Теперь надо их как то объеденить.

Смотрим размер кнопки (сверху Image --> Image Size) - размер 125px на 20px.

в) Теперь надо создать заготовку под спрайт (Ctrl+N). Размеры мы знаем, высоту увеличивам в 2 раза, то есть создаем новый файл 125px на 40px.

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

г) В верхнем меню выбираем - Image --> Adjustments --> Hue/Saturation и проставляем значения как на картинке - кнопка при наведении указателя будет меняться с синего на оранжевый:

Разворачиваем первый дубликат кнопки (синий) и заготовку под спрайт (который высотой 40px).Режим Snap должен быть включен.

И просто перетаскиваем в верхнюю часть нашего спрайта синюю кнопку, а в нижнюю оранжевую (они сами прилипнут к краям):

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

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

В следующем посте.

Edited March 11, 2010 by Alastor

[Alastor]

Собственно, вот результат: http://www.freeway-design.ru/sample/

(я сделал разные цвета у кнопок)

А вот и сам код, который прост как коровья лепешка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprite example</title>
<style type="text/css">


* {
	margin:0;
	padding:0;
}

body {
	background:#0054a6;
}

a.sprite1 {
	display:block;
	width:125px;
	height:20px;
	background: url(i/s1.png) left top;
	}

a.sprite1:hover {background-position:left 20px;}


a.sprite2 {
	display:block;
	width:125px;
	height:20px;
	background: url(i/s2.png) left top;
	}

a.sprite2:hover {background-position:left 20px;}

a.sprite3 {
	display:block;
	width:125px;
	height:20px;
	background: url(i/s3.png) left top;
	}

a.sprite3:hover {background-position:left 20px;}

ul {
	margin:3em 0;
	padding:0;
}

ul li {
	margin:0;
	padding:0;
	list-style-type:none;
}

</style>
</head>

<body>
<div style="margin-left: 4em; margin-top: 10em;">
<ul>
<li><a href="#" class="sprite1"></a></li>
<li><a href="#" class="sprite2"></a></li>
<li><a href="#" class="sprite3"></a></li>
</ul>
</div>


</body>
</html>

[Alastor]

Следующая заметка. Использование Clipping Mask.

Наверное многие видели на разных сайтах, как сквозь заголовок, надпись, видна фотография. То есть такой эффект "фотографического текста".

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

Работать мы будем вот с таким исходным изображением/простеньким коллажем, которое я специально для вас приготовил. сохраните себе на винт:

1. В фотошопе создаем новый файл (Ctrl+N) по размеру изображения (800x286), цвет фона белый

а) Выбираем шрифт Impact, цвет шрифта ЧЕРНЫЙ. Ставим кегль 200pt и пишем верхнюю строку как на картинке, буквы заглавные.

б) Тем же шрифтом, черным цветом но не заглавными буквами пишем следующую строку как на картинке. Кегль 88pt (точно по ширине подгонять не стал, на глаз):

2. Переносим нашу фотографию на текст (просто перетаскиваем мышкой), чтобы она его полностью закрывала:

3. Зажимаем Shift и выделяем на панели Layers оба текстовых слоя:

4. Щелкаем по выделенным слоям правой кнопкой мышки и выбираем Rasterize Type:

5. Щелкаем еще раз правой кнопкой и выбираем Merge Layers:

Слои объединились в один.

6. Выделяем слой с фотографией, щелкаем правой кнопкой и выбираем Create Clipping Mask:

7. Смотрим результат. Подвигайте фото под текстом для наиболее удачного положения:

Оставляю вам простор для творчества. Инструмент Clipping Mask дает очень много возможностей.

Удачи.

Edited March 11, 2010 by Alastor

[Clayton]

Это, то что ты рассказываешь, действительно очень просто. Можно оставить заявку?)

Расскажи про модульные сетки, основы типографики для веба и цветовые палитры

[Verder]

Это, то что ты рассказываешь, действительно очень просто. Можно оставить заявку?)

Расскажи про модульные сетки, основы типографики для веба и цветовые палитры

Это для кого-то просто, а кто-то, кто только начинает работать с фотошопом, найдет эти мелочи полезными.

По заявке

А что рассказать про модульные сетки? Для меня модульная сетка - лист бумаги формата А4. В фотошопе все на глаз, иногда, чтобы выровнять элементы, использую привязку по сетке (Snap to Grid) или вытаскиваю гайды.

Основы типографики, вообще-то, немного не по теме. Если будет время просто создам темку по этому попросу. И про это много написано в ководстве. И написано правильно.

Цветовые палитры... рассказать как по правилам используются, что можно или что нельзя? Все можно. Я просто, чтобы проверить как сочетаются цвета, делю файл на две части, добавляю два слоя (впритык друг к другу) и начинаю подбирать. В браузере цвета выглядят немного по другому, поэтому, когда уже вроде как подобрал цвета в фотошопе или иллюстраторе, создаю хтмл страничку разделенную на две части (или на сколько надо частей), ставлю им выбранные в фотошопе бэкграунды и смотрю. Если еть необходимость корректирую в фотошопе.

Вот пример того, что можно все - http://www.freeway-design.ru/dentas/ - блок с градиентом. Вроде ну никаким боком, на первый взгляд, он в общую цветовую гамму не входит. А вот поэкспериментировал и понравилось именно такое сочетание. Так что тут только путем подбора.

[Clayton]

Ководтство толком не читал, надо будет посмотреть. По остальному в целом все понятно. Надо практиковаться. А про фотки можешь рассказать? Вот на вышеуказанном сайте, фотки в меню выглядят очень хорошо) Какие принципы/инструменты используешь при обработке?

[Игорь Ермаков]

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

[Verder]

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

Можно.

Завтра напишу.

Только никогда не забывайте, что, как сказал умный человек, которого вы все знаете - http://www.artlebedev.ru/kovodstvo/sections/157/

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

[Clayton]

Посмотрел в гугле, действительно что-то ужасное получается. Это типа, увековечить свою физиономию на виртуальном портрете

Вот по теме обработок фото, еще вот что интересно. Как обычные фотки, вот в такие превращаются?

http://gidro-montage.ru/themes/burenie/images/header.jpg

http://ivtour.ru/themes/ivtur/images/header.jpg

[Verder]

Посмотрел в гугле, действительно что-то ужасное получается. Это типа, увековечить свою физиономию на виртуальном портрете

Вот по теме обработок фото, еще вот что интересно. Как обычные фотки, вот в такие превращаются?

http://gidro-montage.ru/themes/burenie/images/header.jpg

http://ivtour.ru/themes/ivtur/images/header.jpg

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

Слишком все пластмассовое, ненатуральное. Я не приверженец такого подхода.

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

Через какое-то время начинают просто бесить. Особенно если начинаешь замечать детали.

[Clayton]

Все ж интересно попробовать. Где можно про технологию почитать? По коллажам находится что-то, только не это)

[Great Rash]

Как обычные фотки, вот в такие превращаются?

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

Вообще поизучайте повнимательней палитру слоев (Layers), там много интересного найти можно, ага. В частности, вам будет интересна кнопка "Create new fill for ajustment layer" (кружок такой наполовину черный, наполовину белый). Поиграйтесь с этим делом.

Ну и небольшой шум (Filter->Noise->Add Noise) в районе 2-3% на некоторых картинках просто чудеса творит

Как пример как раз вот эта: http://gidro-montage.ru/themes/burenie/images/header.jpg

[Clayton]

Продолжим.

Картинку то мы слайсами разделили, а теперь встает резонный вопрос - "И что?". То есть как мы можем быстренько все это сохранить в нужном нам формате.

Объясню.

1. Выбираем - File --> Save for Web & Devices (или просто жмем Alt+Shift+Ctrl+S), видим такую картину:

В этом же окне выбираем инструмент Slice Select Tool

2. Я специально не стал тримировать наше меню (то есть обрезать его по контуру) чтобы было наглядней.

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

К примеру нам не нужны правый и нижний блоки, мы просто их не выделяем. Получаем следующее:

3. В настройках сохранения все стандартно:

Важно! Для каждого блока вы можете выбрать свой формат. Допустим для меню вы выбрали формат .PNG - то есть выделили с шифтом пункты меню, справа выбрали формат .PNG.

Если другие блоки вам нужно сохранить в формате JPEG, то просто задаете им этот формат на выходе.

Ну и дальше как обычно жмем Save, выбираете директорию сохранения и получаете:

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

Следующая заметка будет про точную подгонку отступов для создания меню на спрайтах.

Удачи.

Вот в этом пункте кстати, что б бы сохранялись только выделенные нужно еще в настройках при сохранении указать Selected Slices, а то он не смотря на выделения все равно все сохраняет)) Я так чето запарился пока не заметил, думал че не получается =)

[Shin]

А почему этот 'slice' не может сохранить прозрачное изображение? Я сохраняю в .png с галочкой на transparency, обычно, всё нормально сохраняется, а после 'slice' фон не прозрачный, а белый(

[Clayton]

А почему этот 'slice' не может сохранить прозрачное изображение? Я сохраняю в .png с галочкой на transparency, обычно, всё нормально сохраняется, а после 'slice' фон не прозрачный, а белый(

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

[Shin]

О, действительно, спасибо) Только я уже руками код создал, всё как надо, но на в будущем это тоже пригодится))

Edited May 2, 2010 by Shin

[Red Planet]

Здравствуйте. При сохранении "Save for Web & Devices" все время появляется следующее сообщение (прикреплено) несмотря на то, что в названии использую латинские символы, цифры, знак подчеркивания, дефис. Что ему не хватает и чем это чревато?

[Great Rash]

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

[Red Planet]

Верстаю макет, есть несколько вопросов:

1. Ссылки в шапке, те, что в столбик. Как вырезать маркер? Кружок правильной формы не вырезается, получается рубленый со всех сторон, если использовать Ctrl+Нажатие на слой. Я понятия не имею о vector mask, которая там имеется, но задача сейчас в том, чтобы вырезать.
   
2. Можно ли средствами HTML+CSS заставить меняться цвет маркера при наведении мыши с белого на оранжевый как указано на макете? Если нет, то как это сделать?
   

[sigma77]

Верстаю макет, есть несколько вопросов:

1. Ссылки в шапке, те, что в столбик. Как вырезать маркер? Кружок правильной формы не вырезается, получается рубленый со всех сторон, если использовать Ctrl+Нажатие на слой. Я понятия не имею о vector mask, которая там имеется, но задача сейчас в том, чтобы вырезать.
   
2. Можно ли средствами HTML+CSS заставить меняться цвет маркера при наведении мыши с белого на оранжевый как указано на макете? Если нет, то как это сделать?
   

1. Что значит "рубленный со всех сторон"? Выбираете "Slice Tool", выделяете им нужную область. Правой кнопкой мыши "Edit slice option...". Задаете нужное название. Отключаете при необходимости ненужные слои. File - Save for Web & Devices. Задаете нужный формат. Жмете Done, задаете нужные параметры сохранения.

2. Сохраняете 2 картинки (активного и обычного состояния). Пунктам меню в качестве бэкграунда задаете картинку обычного состояния и позиционируете его слева. С помощью псевдо класса :hover меняете бэкграунд на обычный.

[Red Planet]

Что значит "рубленный со всех сторон"?

Не кружок, а рубленая со всех сторон непонятная фигура.

Выбираете "Slice Tool", выделяете им нужную область. Правой кнопкой мыши "Edit slice option...". Задаете нужное название. Отключаете при необходимости ненужные слои. File - Save for Web & Devices. Задаете нужный формат. Жмете Done, задаете нужные параметры сохранения.

Это мне и нужно было, спасибо. 

Edited August 15, 2010 by Red Planet