<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Risotto &#187; Photoshop</title>
	<atom:link href="http://blog.sleety.org/category/photoshop/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.sleety.org</link>
	<description>Темы для Wordpress на русском языке.</description>
	<lastBuildDate>Wed, 31 Mar 2010 13:10:51 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Как сделать веб-значок в Photoshop</title>
		<link>http://blog.sleety.org/photoshop/making-simple-web-icon/</link>
		<comments>http://blog.sleety.org/photoshop/making-simple-web-icon/#comments</comments>
		<pubDate>Thu, 20 Sep 2007 22:45:54 +0000</pubDate>
		<dc:creator>deerstop</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[веб-значок]]></category>
		<category><![CDATA[как сделать]]></category>

		<guid isPermaLink="false">http://blog.sleety.org/photoshop/making-simple-web-icon/</guid>
		<description><![CDATA[Веб-значок (web icon) всегда украшает страницу, а сделать его довольно просто. Давайте сделаем значок в форме бумажного листа. Вот такой:


Итак, откройте Photoshop и создайте новый документ размером 40х40 пикселей. Для начала добавьте новый слой: Ctrl + Shift + N или Layer -> New -> Layer на панели управления. На этом слое мы и будем рисовать. [...]]]></description>
			<content:encoded><![CDATA[<p>Веб-значок (<em>web icon</em>) всегда украшает страницу, а сделать его довольно просто. Давайте сделаем значок в форме бумажного листа. Вот такой:<br />
<span class="empty"><img src='http://blog.sleety.org/wp-content/uploads/2007/09/webicon-list.gif' alt='Веб-значок в форме листа A4' title='Веб-значок в форме листа A4'/></span><br />
<span id="more-10"></span><br />
Итак, откройте Photoshop и создайте новый документ размером 40х40 пикселей. Для начала добавьте новый слой: Ctrl + Shift + N или <em>Layer -> New -> Layer</em> на панели управления. На этом слое мы и будем рисовать. Выберите инструмент Rectangular Marquee Tool и выделите прямоугольную область, как показано на примере:</p>
<p><a href='http://blog.sleety.org/wp-content/uploads/2007/09/selection.gif' title='Выделение прямоугольной области'><img src='http://blog.sleety.org/wp-content/uploads/2007/09/selection.thumbnail.gif' alt='Выделение прямоугольной области' /></a></p>
<p>Обведем наш будущий листочек по контуру. На панели управления <em>Edit &#8211; > Stroke</em>, устанавливаете цвет границы по вкусу (предпочительно, серый). Я, в данном случае, использую цвет <strong>#acacac</strong>.</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/stroke.gif' alt='Обводка по контуру' title='Обводка по контуру'/></p>
<p>Увеличьте масшатб изображения. Выделите уголок листочка с помощью Rectangular Marquee Tool, как показано на рисунке:</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/select-corner-3.gif' alt='Выделяем уголок' title='Выделяем уголок'/></p>
<p>Щелчок правой кнопкой, найдите функцию Free transform (свободная трансформация).</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/free-transform-4.gif' alt='Free transform' title='Free transform'/></p>
<p>Цепляйтесь мышкой за верхний правый уголок выделения и тяните его в противоположном направлении, зажав Shift. Тяните до тех пор, пока уголок не станет приемлимого размера. Он должен как бы отобразиться зеркально.</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/apply-transf-5.gif' alt='Инструмент Free transform' title='Инструмент Free transform'/></p>
<p>Перетащите уголок на предназначенное для него место &#8212; в угол. :)</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/angle-in-the-angle-6.gif' alt='Получившееся изображение' /></p>
<p>Далее выбираем инструмент &#171;Линия&#187; (Line Tool).</p>
<p><a href='http://blog.sleety.org/wp-content/uploads/2007/09/line-tool.gif' title='Line Tool'><img src='http://blog.sleety.org/wp-content/uploads/2007/09/line-tool.gif' alt='Line Tool' /></a></p>
<p>И рисуем прямую линию (<strong>зажмите Shift</strong>), как бы перечеркивая на уголок. </p>
<p><a href='http://blog.sleety.org/wp-content/uploads/2007/09/almost-ready_7.gif' title='Line Tool - угол'><img src='http://blog.sleety.org/wp-content/uploads/2007/09/almost-ready_7.gif' alt='Line Tool - угол' /></a></p>
<p>Ну вот, уже получается что-то отдаленно напоминающее лист бумаги. :) Осталось создать тени, чтобы наш листик выглядел более натурально. Для этого копируйте вашу косую линию, сделанную с помощью Line Tool (выделите слой с линией, затем на панели управления <em>Layer -> Dublicate Layer&#8230;</em>) и аккуратно перемещайте новый слой вниз и чуть влево.</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/shadow1.gif' alt='Делаем тень' title='Делаем тень'/></p>
<p>Совместите края линий, как если бы вы накладывали друг на друга лесенку, и уменьшите прозрачность (Opacity) нижней линии до 60%. </p>
<p><a href='http://blog.sleety.org/wp-content/uploads/2007/09/opacity.gif' title='Opacity - 60 процентов'><img src='http://blog.sleety.org/wp-content/uploads/2007/09/opacity.thumbnail.gif' alt='Opacity - 60 процентов' /></a></p>
<p>Повторите операцию два раза, каждый раз уменьшая прозрачность на 20%. Вот что должно получиться (я увеличила изображение, чтобы вы видели, как тень постепенно сходит на нет). Похожего результата можно было бы добиться, используя градиенты, но вручную получается аккуратнее.</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/angle-is-ready.gif' alt='В результате' /></p>
<p>В принципе, значок уже выглядит неплохо. Скройте фоновый слой (Background Layer), нажав на изображение глазка. Объедините видимые слои: <em>панель управления -> Layer -> Merge Visible</em>. Вместо белого цвета должен остаться прозрачный фон.</p>
<p><a href='http://blog.sleety.org/wp-content/uploads/2007/09/invisible-background.gif' title='Объединение слоев'><img src='http://blog.sleety.org/wp-content/uploads/2007/09/invisible-background.thumbnail.gif' alt='Объединение слоев' /></a></p>
<p>Выделите внутреннюю поверхность листа любым удобным инструментом (например, &#171;волшебной палочкой&#187;, <em>Magic Wand</em>)</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/select-inner.gif' alt='Выделите внутреннюю поверхность листа' /></p>
<p>Выбираете на панели управления <em>Layer -> New Fill Layer -> Gradient&#8230;</em>. Создаете градиент от серого к прозрачному со следующими настройками:<br />
<img src='http://blog.sleety.org/wp-content/uploads/2007/09/gradient.gif' alt='От серого к прозрачному' title='От серого к прозрачному'/></p>
<p>Вот и всё. Если градиент получился слишком темным, просто уменьшите его прозрачность (Opacity), как показано на рисунке:</p>
<p><img src='http://blog.sleety.org/wp-content/uploads/2007/09/gradient-opacity.gif' alt='Делаем градиент прозрачным' title='Делаем градиент прозрачным'/></p>
<p>Конечный результат:<br />
<img src='http://blog.sleety.org/wp-content/uploads/2007/09/final.jpg' alt='Конечный результат' /></p>
<p>Удалите белый фоновый слой и сохраните значок с прозрачным фоном: <em>File -> Save for Web</em>, выберите формат изображения GIF и поставьте галочку около значения <strong>Transparency</strong> (&#171;Прозрачность&#187;).</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sleety.org/photoshop/making-simple-web-icon/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

