Уроки Photoshop

Как сделать мигающую аватарку или баннер в Фотошопе

4

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

Пример женской мигающей аватарки 120x120

Сделать мигающую аватарку несложно. Для этого нам достаточно будет программы Adobe Photoshop CS3 (Adobe Photoshop CS2 и Adobe Photoshop CS4 тоже подойдут). Кроме возможности редактировать отдельные кадры нашей анимированной аватарки Фотошоп дает возможность создания самой анимации, т.е. нам достаточно будет одной этой программы.

Если вам не очень удобно делать анимацию в Photoshop, можно воспользоваться им для подготовки кадров аватарки или баннера, а саму анимацию сделать в другой программе. Наиболее популярная программа, которая позволяет делать анимированные картинки — Ulead GIF Animator 5. Я подробно описывал работу с ней в статье Как сделать анимированный GIF баннер. Лично я gif-анимацию всегда делаю в Ulead GIF Animator 5, а Photoshop использую только для подготовки кадров баннера или аватарки – привычка :).

(далее…)

Дизайн для умных

Демпинг в веб-дизайне

9

Демпинг в веб-дизайне

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

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

Создание сайтов

Дизайн 15-ти сайтов веб-студий: сапожники с сапогами и без

10

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

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

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

1. Первый сайт, который я хочу вам показать, мне очень нравится. Помимо оригинально и ненавязчиво реализованного гида для посетителя из 5ти шагов, подкупают рисованные персонажи, которые разные для каждого шага. Нет лишней информации, в то же время все на месте. Супер!

Пример дизайна сайта веб-студии

Адрес сайта: armexdesign.ru
(далее…)

Уроки Photoshop

Как отразить зеркально картинку в Photoshop

7

Из вчерашнего урока Photoshop вы могли узнать как поворачивать изображение вокруг своей оси. Сегодня я публикую еще один простенький урок-справку о том, как отразить зеркально изображение на картинке по вертикали или по горизонтали. Этот простой прием Фотошопа часто используется при подготовке сложных иллюстраций, коллажей и баннеров. Например, для создания эффекта отражения объекта в воде, зеркале или от полированной поверхности.

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

Подробная инструкция для новичков как сделать зеркальное отражение фотографии в Фотошопе

1. Открываем Фотошоп и загружаем в него выбранное изображение, которое мы хотим отражать: File -> Open…

2. Из главного меню программы Photoshop выбираем Image -> Rotate Canvas -> Flip Canvas Horizontal:

Меню Фотошопа

(далее…)

Уроки Photoshop

Как повернуть картинку в Photoshop по часовой или против часовой стрелки

4

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

Допустим, у нас есть некое фэнтезийное изображение девушки, свисающей с дерева:

Картинка, которую мы будем поворачивать в Фотошопе

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

(далее…)

Уроки Photoshop

Фотошоп онлайн

8

Иногда нужно немного подправить понравившуюся картинку, уменьшить размер фото, сделать из большой иллюстрации маленькую аватарку, повернуть картинку на 90 градусов, убрать эффект красных глаз на фото, сделать подпись к иллюстрации и т.п. Конечно, для всех этих и многих других задач отлично подходит программа Adobe Photoshop. Но что делать, если дистрибутива полноценной программы нет под рукой, а качать его с торренов или eMule нет времени или возможности? Достаточно просто погуглить и найти подходящий Фотошоп онлайн.

Попыток создать полноценную онлайн замену программе Photoshop было много. Большинство из них были либо очень слабенькими подобиями графического редактора с похожим на Фотошоп интерфейсом, либо требовали зарегистрироваться и/или оплатить доступ к расширенной функциональности. Но есть и приятные исключения, которые позволяют пользоваться Фотошопом онлайн бесплатно и без регистрации. Например, сайт pixlr.com:

Photoshop online на русском

Графический редактор на этом сайте представляет собой продуманный flash-модуль с интерфейсом, очень похожим на привычный Photoshop. Если у вас есть опыт работы в оригинальной программе Adobe Photoshop, то данный вариант Фотошопа онлайн будет вам понятен и на его изучение не нужно будет тратить время. Если же вы новичок, то интуитивно понятный русскоязычный интерфейс и всплывающие подсказки помогут вам освоить эту онлайн программу в кратчайшие сроки.

(далее…)

Аватарки

Новогодние аватарки

3

Вот-вот начнутся новогодние праздничные гуляния, а вы все еще без стильной новогодней аватарки? Непорядок! Если вам лень делать самому (или самой) красивую аватарку для новогодних постов в блогах друзей – можете пользоваться картинками из этого предпраздничного поста:

Новогодняя аватарка №1 Новогодняя аватарка №2 Новогодняя аватарка №3 Новогодняя аватарка №4
Новогодняя аватарка №5 Новогодняя аватарка №6 Новогодняя аватарка №7 Новогодняя аватарка №8
Новогодняя аватарка №9 Новогодняя аватарка №10 Новогодняя аватарка №11 Новогодняя аватарка №12

Как и в предыдущем сете женских фэнтезийных аватарок основу этого сборника из 12-ти новогодних аватаров 120х120 пикселей составляют праздничные образы из он-лайн игрушки «Бойцовский клуб». Большие образы за 10 минут с помощью Фотошопа были обрезаны, уменьшены и улучшены, чтобы вы могли скачать их все сразу или использовать по ссылке прямо из этого поста.

Инструкции и советы

Откуда берутся недозаполненные контентом сайты

4

контент для сайта

Для решения задачи разработки сайта типичной компании вполне достаточно дизайна на шаблоне и возможностей большинства бесплатных систем управления контентом (Joomla, WordPress, Typo3 и т.д.) с набором стандартных модулей. Типичный набор сайта компании малого или среднего бизнеса – новостная лента, модуль добавления статей и информации о компании, каталог продукции и фотогалерея для самых творчески настроенных. Выбор среди бесплатных шаблонов дизайна для сайта огромен, админки, которых изо дня в день заставляют решать типичные задачи, легко настраиваемы.

Так почему же клиенты отчаянно пытаются заказывать нестандартный дизайн с нестандартной функциональностью, переплачивая за свои прихоти цену, в несколько раз больше необходимой? Действительно ли компании так прониклись идеей необходимости своего присутствия в интернете, что им не жаль никаких денег ради качественного сайта?
(далее…)

Секреты верстки сайтов

Как окружить фото текстом и задать отступы текста от картинки

13

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

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

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

1
2
3
4
<img src="здесь_веб-адрес_картинки" alt="" /> alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;>

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

1
2
3
4
5
<img src="https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="" /> alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;>

(далее…)

Как сделать баннер

Как обойти антибанерные фильтры при размещении своей рекламы

3

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

Предлагаю увидеть работу двух работающих одновременно фильтров рекламы (антибаннерный модуль в антивирусе KIS9 и встроенный ad-охотник браузера Maxthon) на примере популярного сайта zaycev.net. Справа оригинальный сайт, без применения фильтра баннеров, слева – результат автоматической фильтрации (кликните по картинке для увеличения):

Пример работы анти-баннерных фильтров

По мере роста числа грамотных пользователей интернета эффект от баннерной рекламы будет снижаться и дальше – люди просто не будут ее видеть. Уже сейчас эффективность баннерной рекламы в США на 40% меньше, чем в русскоязычном интернете. Причиной тому являются не только фильтры баннеров, но и привычка не обращать внимание на анимированную блочную информацию, выработанная у опытных интернетчиков.

(далее…)