03.10.08 в рубрике Уроки Photoshop

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

1. Все началось с того, что я каким-то образом нашел в Сети эту картинку

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

3. Я открыл Photoshop и, с помощью инструмента Pen Tool [P], нарисовал части тела жука. Каждый элемент на новом слое

4. В стилях слоя (Layer Style) наложил градиент таким образом, чтобы выделить тени и осветления, придав фигурам первоначальный объем

5. С помощью инструментов Кисть (Brush Tool) [B] и Размытие (Blur Tool) [R] делаю тени более отчетливыми. Там, где нужно затемнить, использую кисть с мягкими краями черного цвета, где добавить света — белого цвета. Дабы смягчить переходы, размываем их. Каждый блик и тень тоже рисовались на отдельном слое. Так удобнее, если в дальнейшем захочется что-то отредактировать

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

7. Тем же путем, как и раньше, разукрасил панцирь и добавил ему потертостей. Дорисовал слегка светящийся глаз

8. Осталось добавить кое-какие штрихи, изображение rss-иконки и жук готов.

Вот и все. Надеюсь, что Вам эта информация окажется полезной. Что скажете?

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

Popularity: 1%

02.10.08 в рубрике Улучшить Блог

Знаете ли Вы, что такое favicon и как его использовать себе во благо? Если нет, то эта информация для Вас

Favicon — это такой небольшой значок, 16×16 пикселей, который появляется в строке браузера, рядом с адресом сайта. Казалось бы, небольшой элемент, который служит простым украшением и не выполняет никакой практической функции. Но такое суждение ошибочно.

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

Точно так же обстоят дела на просторах Интернета, если у Вас корявый и неприятный сайт, то никакой favicon не спасет.

Изначально favicon’ы использовал Microsoft Internet Explorer для закладок. И таким образом можно было считать, какое количество посетителей отправляет страницы сайта в избранное. Сейчас он получил более широкое применение, например, его отображают поисковики. Для старых браузеров favicon’ы создавались в формате ico. Отсюда и название favicon — сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE. Как правило их и сейчас делают в этом формате, но новые браузеры поддерживают favicon’ы в форматах gif и png.

Favicon можно нарисовать самому или найти готовый в Сети. Но последнего я настоятельно не рекомендую делать. Представьте, что у Вас из кармана будет торчать носок или платок, но которым на протяжении недели пользовался весь отдел. Или другой вариант – платок никаким образом не сочетается по цвету и качеству ткани с остальной одеждой.
Что там дальше?..

Popularity: 1%

27.09.08 в рубрике Дизайнерские Штучки, Фриланс

Вот и закончена работа еще над одним проектом. Макет нарисован, шаблон сверстан и «одет» на движок, недочеты откорректированы, сайт протестирован и работоспособен. Все просто супер

Так я оцениваю работу над созданием нового дизайна для сайта «Пишу о том, что думаю». Vitashok, автор сайта, оказался одним из лучших заказчиков, которые мне встречались. Он изначально доверил мне всю работу, полностью положившись на мой вкус. Оговорено было, что по окончанию создания макета, перед тем как приступить к верстке, мы вместе обсудим некоторые нюансы, дабы только улучшить финальный результат.

Такое поведение – это лучшее и наиболее правильное решение со стороны заказчика, как по мне. Коль выбрали меня в качестве исполнителя, доверяйте моему вкусу. А иначе не стоит тратить мое и свое время, да и доверять деньги тем, в ком сомневаетесь, я бы не советовал.

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

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

Второе: дирижабль, в качестве rss-иконки. А вот как эта идея родилась, я объяснить не могу. Просто «щелчок» в голове и идея готова. Думаю, что эта ситуация знакома всем.

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

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

А есть и другие мысли, у которых уже видны контуры, но они сильно размыты и завуалированы, все как в голове!

Летающий лыжник – сильно выделяется и, мягко говоря, не вписывается в общую композицию? А вам в голову никогда не приходили абсурдные, не вписывающиеся ни в какие рамки мысли? Вот именно! Хотя, об этом персонаже я еще расскажу в другой раз, кто он и откуда вообще взялся.

Когда почти вся работа над созданием макета сайта была завершена, неожиданно родился еще один образ – летающий телевизор. Не буду настаивать, что это полностью моя выдумка. Меня терзают смутные сомнения, что кто-то до меня уже его использовал. Нет, я его ни у кого не подсмотрел и нигде раньше не встречал. Просто он чертовски хорош! И я боюсь поверить, что первый, кто до такого додумался. Я влюбился в этот образ. И, несмотря на то, что телевизоры маленькие и прилеплены сбоку, вот кто истинный главный герой данной работы. Достаточно заглянуть в футер, дабы в этом убедиться.
В топку Red Bull и другие энергетики, сила мысли – вот что окрыляет неимоверно!

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

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

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

Кому интересно, я регулярно слушал два диска:
1. Extreme Girlzz Fest
2. Slipknot — All Hope Is Gone (2008)

Slipknot сильно изменился, теперь его не отличить от Stone Sour. Но, лично мне, такое изменение в «легкую» сторону больше нравится.

Предлагаю вашему вниманию вещи, которые способствовали моей работе:
1. Слот – Кукла Вуду
2. Tracktor Bowling – Время (давно не было, чтобы какая-то песня меня так цепляла; если даже не нравится такая музыка, то текст равнодушным оставить не может точно).
3. Блондинка Ксю – Ты не Первый
4. Xe-none — [Rave]olution (открыл для себя новую группу с оригинальным звучанием).
5. Slipknot — Dead Memories
6. Slipknot – Gehenna (обязательно дослушать до припева, не перемотать, а именно дослушать).
7. Slipknot – Snuff

Самая «жесткая» вещь из списка: Слот – Кукла Вуду.
И Slipknot – Gehenna, но тут очень яркий припев. Остальные – не припопсованные баладки, но большинству должны понравиться.

Вы можете их Скачать.
Вес архива 70Mb

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

P.S. И не забывайте про акцию по обмену ссылками

Popularity: 1%

15.09.08 в рубрике Улучшить Блог

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

Радует то, что это почти всегда одно и тоже. Исключение, пожалуй, один случай: когда на сайте выпадающее меню. К примеру, есть кнопка «уроки», наводя на которую, выпадает целый список: «уроки photoshop», «уроки flash», «уроки 3D Max» и т.д. Для пользователя такое меню на сайте очень удобное, но для поисковых систем такая конструкция усложнит и замедлит индексацию.

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

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

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

Хватит слов, перейдем к делу

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

Этот код помещается в каскадную таблицу стилей (CSS). Если Вы еще не в курсе, что это такое, прочитайте книгу «Блочная Верстка» из содержания которой почерпнете массу полезной информации.

Вернемся к меню для сайта и его коду.

• #nav {
  width: 990px;

  /*ширина всего меню навигации */

  height: 50px;

  /*и, разумеется, его высота*/

  background: url (img/nav.jpg) no-repeat #374f37;

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

  font-size: 18px;

  /*размер шрифта */

  float:left;

  /*делает так, что наш блок с меню располагается справа; на самом деле меню растягивается на всю длину сайта и нам это вроде не нужно, но этот параметр понадобятся, чтобы не «косячил» макет, чтобы меню «дружило» с остальными блоками */

  }

• #nav ul {
  margin:4px 0 0 25px;

  /*меняя эти параметры, я «двигаю» кнопки относительно фона */

  list-style:none;

  /*меню создается в виде списка, а команда «none» указывает на то, что у строк этого списка не будет указателе в виде цифр или маркеров; чтобы лучше уяснить, что я имею ввиду, удалите эту строку, когда будете делать свое меню для сайта и увидите, что из этого получится; когда посмотрите – вернете строку на место*/

  }

• #nav li {
  display:inline;

  /*чтобы наши кнопки выстраивались в линию, а не столбцом */

  }

• #nav a {
  float:left;

  /*указывает, что кнопки должны выстраиваться слева направо */

  display:block;

  /*этот параметр нам нужен, чтобы у нас была не просто ссылка, а ссылка с «каркасом», который и будет создавать иллюзию кнопки */

  width: 98px;

  /*длина этого «каркаса» */

  height: 50px;

  /*и… правильно! */

  background:url («img/key.png») no-repeat;

  /*тут все, как и в случае с фоном для меню; кто не уяснил, пускай вернется чуть выше и повторит */

  text-align : center;

  /*положение текста внутри «каркаса» */

  text-decoration: none;

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

  padding:10px 2px 10px 0px;

  /*этими циферками можно подправить положение надписи внутри «каркаса», если нас что-то не устраивает: подвинуть, опустить и т.д. */

  color:#FFF;

  /*цвет надписи, когда кнопка не активна */

  }

• #nav a:hover {
  background-position:0% -50px;

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

  color:#66ff66;

  /*цвет текста, когда на кнопку наведен курсор */

  }

Вот собственно и все, как видите, ничего сложного. Осталось лишь рассказать про параметр «background-position» и зачем он нужен. Вообще, можно обойтись без него, а просто прописать «background» и путь к картинке (или цвет), на которую должен будет меняться фон при наведении курсора. Но в таком случае, если у пользователя слабая скорость Интернета, при наведении курсора будет происходить торможение: сначала фон пропадет вовсе, потом, когда только загрузится новая картинка, он изменится на нужный.

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

Чтобы показать меню на сайте, в код страницы нужно добавить такой кусок:

• <div id="nav">
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">О Сайте</a></li>
  <li><a href="#">Combats</a></li>
  <li><a href="#">Linux</a></li>
  <li><a href="#">Windows</a></li>
  </ul>
  </div>

Если Вы делаете шаблон для WordPress, то код должен выглядеть так:

• <div id="nav">
  <ul>
  <li class="<?php echo $highlight; ?>«><a href=»<?php echo get_settings ('home'); ?>"><?php _e ('Home','wp_multiflex'); ?></a></li>
  <?php wp_list_pages ('sort_column=menu_order&depth=1&title_li=' ); ?>
  </ul>
  </div>

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

Popularity: 1%

31.08.08 в рубрике Мысли

Спасение утопающих — дело рук самих утопающих

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

Но сейчас я все больше и больше склоняюсь к мысли, что в большинстве своем веб-дизайнеры — это люди, к которым нет причин относиться положительно. В частности меня «убивает», что каждый веб-дизайнер считает актуальным ругаться отборным матом в своем блоге. Почему, если кто-товыбрал для себя такой образ, его нужно поддерживать? Думаете, таким образом сможете получить подобную известность и авторитет? Извольте, но подобные действия уважения не прибавят.

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

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

Неужели нет хороших сайтов, которые были бы посвящены столь прекрасному, по своей сути, делу? К счастью — есть. К несчастью — их очень трудно отыскать в куче мусора.

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

О ком хотелось бы сказать изначально — это, конечно, Настя Манно. Девушка-блоггер — явление очень редкое, но весьма приятное. Блоггер, да еще и дизайнер — приятно вдвойне! А еще и очень милая — приятно втройне. Хотя, признаюсь, не была бы она веб-дизайнером, я бы ее не упомянул.

Настя — очень интересный и продуктивный человек. Блуждая по сети, я постоянно натыкаюсь на проекты, к которым она приложила свою руку. Стоит ли упоминать, что проекты от этого только выиграли?

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

Не так давно в Сети появился еще один блог — Дизайн Мания. О том, что это будет очень полезный и успешный проект, можно понять и так, тут и к гадалке не ходи. Достаточно просто посмотреть, кто является его автором. Неужели снова Настя? А вот и нет! Но тоже весьма интересная и известная в блог-сфере личность. Кто именно? — Зайдите и посмотрите.

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

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

Может, Вы тоже знаете интересные блоги на дизайн-тематику, о существовании которых я даже не подозреваю? А может, Вы являетесь его автором? В любом случае, поделитесь, буду благодарен

Popularity: 1%