Уроки фотошоп. Световые эффекты

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

Такс начнем

1 ШАГ

Добавьте Layer Style (Эффекты слоя) на background layer (Задний фон). Для этого тыкните ПКМ на background и нажмите Layer from Background . Добавьте Gradient Overlay (Наложение градиента) и Pattern Overlay(Наложение текстуры)


2 ШАГ

Я нашел одну прикольную иконку чашки на одном очень кульном сайте. Вы можете скачать эту иконку тут


3 ШАГ

выберите инструмент Ellipse Tool (U) и сделайте круг на новом слое как показано ниже. Добавьте Gaussian Blur (Filter>Blur>Gaussian Blur или Фильтр>размытие> размытие Гаусса) с радиусом в 30 px



4 ШАГ

Создайте новую группу (Create a new group) в панели Layers (Слои). Назовите группу Световой Эффект, измените blend mode на Color Dodge (Осветлени) и переместите слой с кругом, который вы сделали в эту группу.



5 ШАГ

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



6 ШАГ

Используем Layer Styles (Эффекты слоя) на этих искрах.



7 ШАГ

Давайте добавим немного дыма. Создайте новый слой и назовите его ДЫМ измените его blend mode на Color Dodge (Осветление) и выберите Lasso Tool (Лассо ) Поставьте 40 px для Feather и создайте выделение как показано ниже. Потом убедитесь что foreground(Передний Цвет) белый background (задний цвет) черный, Filter>Render>Clouds (Фильтр>Освещение>Облака). PS вы можете повторять данный эффект до тех пор пока облака вам понравятся.



8 ШАГ

И давайте с помощью Layer Styles (Эффекты слоя) создадим красивый текст.



Ну вот и конечный результат



PSD файл можете скачать отсуда

Автор урока : Fabio Sasso

 

Как прощё всего разместить плеер с музыкой или видео на ЛиРу и ЖЖ?

Очередное дополнение в

Я уже писал, как размещать в сообщении плеер с видео и музыкой используя достаточно широкоизвестный JW FLV Media Player. Но, как я понял, этот способ довольно сложен для многих. Вот и мы с создателем известного блога «Надо Бухать!» ppmax создали специальный конструктор для простого получения кода этого плеера, как для ЛиРу, так и для ЖЖ или других блогов.
Кому интересно



LI 5.09.15

Музыка в дневнике

Сделаем список песен в дневнике. Если есть прямая ссылка на музыкадьный файл можно в дневник добавить код

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_URL" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" height="27" width="400">

Вместо MP3_URL нужно прописать ссылку на mp3 файл!!!!!!

Например ссылка на музыкалный файл:

<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=//img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3" target="_blank">//img1.liveinternet.ru/images/attach/c/0/3705...128394_06__real_snow_white.mp3</a>

код должен выглядеть следущим образом

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=//img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" height="27" width="400">

Вот какой вид плеера мы получим

Можно сделать что бы плеер открывался в новом окне при нажатии на кнопку "слушать":

Название песни: real_snow_white

Но для этого нужно разрешить в Вашем браузере всплывающие окна с сайта vln.dp.ua.

Код для такого варианта:

<span style="font-family: verdana; font-size: 15px;">Название песни: NAME</span><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://vln.dp.ua/au.php?mp3=MP3_URL"><img src="//img0.liveinternet.ru/images/attach/c/0/35/914/35914736_mp3.gif" border="0" align="absmiddle" /></a>

Не забываем вместо MP3_URL прописывать ссылку на mp3 файл, а вместо NAME - название песни!!!!!!

Ну и для тех кто не хочет возится с кодом, зайдите на http://vln.dp.ua/mp3.php, заполните два поля с названием песни и ссылкой на файл и вы получите готовые коды для вставки в дневник

Применение таблиц

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

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

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

Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )

<table border="1"> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

Коды рисунков смайлов ( видны при редактировании черновика или поста )

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

<img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" />

Все что теперь осталось это разместить рисунки каждый в своей ячейке таблицы

<table border="1"> <tbody> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> </td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> </td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /> </td> </tr> </tbody> </table>

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )

Что бы не загромождать код я в дальнейшем буду показывать только часть кода где делаем изменения

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody> ............. ............. </tbody> </table>

Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> .......... ........... </tbody> </table>

Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смайлы</th> <th>Маленькие смайлы</th> </tr> .......... ........... </tbody> </table>

Большие смалы	Маленькие смайлы

Добавим к каждому смайлу название.

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смалы</th> <th>Маленькие смайлы</th> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" />Большой1 </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" />Маленький1 </td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" />Большой2 </td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" />Маленький2 </td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" />Большой3 </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" />Маленький3 </td> </tr> </tbody> </table>

Вид таблицы мягко говоря не очень :)

Большие смалы	Маленькие смайлы
Большой1	Маленький1
Большой2	Маленький2
Большой3	Маленький3

Исправим это добавив еще 2 колонки для названий смайлов

Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!

<table border="1"> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смалы</th> <th></th> <th>Маленькие смайлы</th> <th></th> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> </td> <td>Большой1</td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> </td> <td>Маленький1</td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td>Большой2</td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> </td> <td>Маленький2</td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> </td> <td>Большой3</td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /> </td> <td>Маленький3</td> </tr> </tbody> </table>

Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Объеденим попарно ячейки с названием колонок.

<table border="1"> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th colspan="2" rowspan="1">Большие смалы</th> <th colspan="2" rowspan="1">Маленькие смайлы</th> </tr> ................... ................... </tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет

Заодно и строку с названием колонок выделю фоном

<table> <tbody> <tr bgcolor="#ccf0cc"> <th colspan="2" rowsapn="1">Большие смалы</th> <th colspan="2" rowspan="1">Маденькие смайлы</th> </tr> ..... ..... <td bgcolor="#f0cccc"> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td bgcolor="#f0cccc">Большой2</td> <td> ....... ....... </td></tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))

Для этого добавим в ячейку с этим смайлом параметр background

<table> <tbody> <tr bgcolor="#ccf0cc"> <th colspan="2" rowsapn="1">Большие смалы</th> <th colspan="2" rowspan="1">Маденькие смайлы</th> </tr> ..... ..... <td bgcolor="#f0cccc" background="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg"> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td bgcolor="#f0cccc">Большой2</td> <td> ....... ....... </td></tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Что еще творить с таблицей зависит только от вашей фантазии :)) Можно каждую строку выделить своим цветом добавиви в параметр background. Можно для каждой ячейки или строки задать фоновый рисунок прописав background. Вместо текста в ячейках можно прописать ссылки.

ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом

<img src="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg" width="116" height="116" alt=" (116x116, 2Kb)" title="Это фоновый рисунок" />

ВСЯ МУЗЫКА - liveinternet.ru

НОВИНКА - NEW


Музыка на www.liveinternet.ru, (ЛиРу).

Программа скачивания музыки из ЛиРу

Limuz 1.5 - программа для скачивания музыкальных композиций с сервера www.liveinternet.ru.

Инструкция по эксплуатации и ссылка на скачивание