Метка: пошаговая инструкция

Уроки Photoshop

Делаем закругленные углы картинок в Фотошопе

34

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

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

 

Обычная фэнтезийная аватарка Аватарка с закругленными углами

 

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

(далее…)

Уроки 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 использую только для подготовки кадров баннера или аватарки – привычка :).

(далее…)

Уроки Photoshop

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

7

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

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

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

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

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

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

(далее…)

Уроки Photoshop

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

4

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

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

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

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

(далее…)

Уроки Photoshop

Как сделать черно-белое фото из цветного

5

Черно-белая фотография в Фотошопе

Черно-белое фото – это наиболее лаконичный и простой способ показать душу качественной фотографии. Поэтому, в этом уроке Photoshop я расскажу, как из цветной фотографии получить черно-белое изображение. Конечно, можно быстро обесцветить фото или рисунок, воспользовавшись комбинацией горячих клавиш Photoshop Ctrl+Shift+U:

Обесцвеченное в Photoshop фото

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

(далее…)

WordPress

Как прикрепить новость или статью в WordPress

0

Иногда бывает нужно прикрепить пост (статью или новость) в блоге WordPress, чтобы публикация не сдвигалась вниз при добавлении более новых записей. Достаточно долго в блогах на WordPress не было стандартной возможности прикреплять записи и для закрепления поста вверху страницы приходилось устанавливать специальные плагины, например, WP Sticky. Многие блогеры до сих пор используют плагин WordPress WP Sticky чтобы прикреплять посты, хотя есть более простой и удобный способ – использовать стандартную возможность самой админки WordPress.

Предлагаю вам подробную инструкцию того, как прикрепить новость или анонс статьи вверху страницы своего блога. Инструкция написана для версии WordPress 2.8.4 и выше. Если у вас более старая версия движка WordPress, настоятельно рекомендую обновиться до самой новой, дабы избежать проблем со взломом блога.

Как прикрепить пост вверху страницы блога WordPress:

1. Открываем админку WordPress, придумываем текст поста, добавляем в него иллюстрации, ключевые слова и публикуем.

2. Находим опубликованную запись, которую мы собираемся прикрепить над остальными постами блога (Администрирование->Записи->Изменить). Наводим указатель мышки на заголовок поста и нажимаем на появившуюся ссылку Свойства:

Свойства записи в WordPress

(далее…)

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

Как читать информацию с текстового файла в Flash с помощью ActionScript

5

Достаточно часто при создании баннеров на Flash требуется, чтобы текст баннера менялся время от времени. Например, можно сделать универсальный акционный flash-баннер, который рекламирует обучающие семинары компании и менять в них дату проведения мероприятия и его тему. Или же баннер, который демонстрирует хиты продаж с ценами, которые тоже время от времени меняются. Конечно, можно сделать базу данных и читать информацию из нее, но если нужно менять 1-2 параметра в баннере, морочиться с базой необязательно. Можно читать параметры для flash-ролика из текстового файла с расширением .txt с помощью кода ActionScript. И сделать это совсем не сложно.

1. Открываем среду разработки flash. В уроке используется Adobe Flash CS3 Professional, но не обязательно использовать именно ее. Adobe Flash 8 тоже подойдет, исходник .fla в скачанном архиве к этому уроку сохранен для Flash 8. Более ранние версии Flash проект .fla не откроют, хотя код ActionScript урока в них работать будет.

2. Создаем новый проект Flash. Он обязательно должен использовать ActionScript 2.0, для ActionScript 3.0 нужны совсем другие действия.
(далее…)

Подробные инструкции

Как узнать IP-адрес своего компьютера

2

Узнать свой IP («ай-пи») можно множеством способов. Предлагаю три из них, пользуйтесь тем, который вам удобнее (лично мне удобнее 3-м).

Способ №1. Заходим на сайт, который определяет IP вашего компьютера

Можно зайти на сайт или форум, на котором установлен код определения IP-адреса посетителя. Например, на специальную страничку Яндекса или на сайт smart-ip.net. Можно поискать и другие сайты, определяющие IP адрес вашего компьютера, вбив в строку поиска запрос типа «адрес сайта который определяет IP».

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

Адрес IP можно посмотреть в свойствах своего подключения к интернету. Для Windows XP нужно сделать следующее:

1. Открываем Пуск->Панель управления->Сетевые подключения.

2. Находим ярлычок подключения к интернету и дважды по нему кликаем.

3. В открывшемся окне переходим на вторую закладку «Сведения»:

IP-адрес в свойствах подключения к интернету

Самая нижняя строка и будет вашим IP-адресом.

(далее…)

Уроки Photoshop

Как убрать красные глаза на фото в Фотошопе

21

Этот короткий и простой урок рассчитан на новичков, которые не умеют пользоваться программой Adobe Photoshop, но хотят научиться убирать «эффект красных глаз» со своих фотографий. Проблема распространенная, но легко решаемая.

Начиная с версии Adobe Photoshop CS2, программа Фотошоп обзавелась полезным инструментом Red Eye Tool, который позволяет одним парой кликов мыши убрать красные глаза на вашем фото. Т.е. для выполнения этого урока вам нужен Фотошоп версии CS2, CS3 или CS4. В подготовке этого урока использовался Photoshop CS3.

Допустим, у вас есть фотография симпатичной девушки, которая будет еще более симпатичной, если не будет красноглазой:

Фото с красными глазами

Сделаем так, чтобы ее глаза были естественного цвета.

(далее…)

Как сделать баннер / Подробные инструкции

Как сделать анимированный GIF баннер

50

анимированный GIF баннер

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

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.
(далее…)