[clubbyinstant]

ВАШ ТЕКСТ <img src="http://img-fotki.yandex.ru/get/6403/134889438.66/0_86766_8715024e_XL.jpg" border="0" alt="" width="700""/><div><table width="700" style="background-color:#c34a57;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ</td></tr></tbody></table><img title="by Instant" src="http://img-fotki.yandex.ru/get/6603/134889438.66/0_86763_b7ae9680_XL.jpg" border="0" alt="" width="700" height="341"/></div>

@темы: #Арт, #Белый, Все рамочки, #Розовый

---

[clubbyinstant]

ВАШ ТЕКСТ <img src="http://img-fotki.yandex.ru/get/6402/134889438.66/0_86761_5b3ba5a6_XL.jpg" width="650" height="250"/><div><table width="650" style="background-color:#ffffff; border-left-color: #000000;border-left-style: solid;border-left-width: 2px; border-right-color: #000000;border-right-style: solid;border-right-width: 2px;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6600/134889438.66/0_86768_7f112d9_XL.jpg" height="45"/></div>

@темы: #Арт, #Белый, Все рамочки, Рамочки с анимацией

---

[clubbyinstant]

ВАШ ТЕКСТ <img src="http://img-fotki.yandex.ru/get/6400/134889438.66/0_8676a_970c862b_XL.jpg" border="0" alt="" width="700" height="554"/><div><table width="700" style="background-color:#eedbc8;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6503/134889438.66/0_8676b_462e1e64_XL.jpg" border="0" alt="" width="700" height="97"/></div>

@темы: #Арт, Все рамочки, #Розовый

---

[clubbyinstant]

ВАШ ТЕКСТ <img src="http://img-fotki.yandex.ru/get/6405/134889438.65/0_8669a_74d8577c_XL.jpg" width="700" height="309"/><div><table width="700" style="background-color:#bfeaec;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ </td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6503/134889438.65/0_86698_6ebef492_XL.jpg" width="700" height="30"/></div>

@темы: #Арт, Все рамочки, #Голубой, Рамочки с анимацией

---

[clubbyinstant]

Создано по заказу Аксинья <img src="http://img-fotki.yandex.ru/get/6602/134889438.65/0_86674_ad2770c0_XL.jpg" width="700" height="583"/><div><table width="700" style="background-color:#2f2536;"><tbody><tr><td style="padding: 0px 40px;" align="center"><span style="font-family: Lucida Grande; color: #ffffff; font-size: 19px;">Создано по заказу Аксинья </span></td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6602/134889438.65/0_86673_6a0ce6c2_XL.jpg" width="700" height="124"/></div>

@темы: #Арт, Все рамочки, #Фиолетовый

---

[clubbyinstant]

ВАШ ТЕКСТ. Рамка создана по заказу Elen Rose для клуба заметки Берлин <img src="http://img-fotki.yandex.ru/get/6831/134889438.83/0_e371c_ce59e2eb_orig" width="700" height="258"/><div><table width="700" style="background-color:#bfb2e2;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ. Рамка создана по заказу Elen Rose для клуба заметки Берлин</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6500/134889438.65/0_862a1_e0673c8c_XL.jpg%20width=" height="124"/></div>

@темы: #Фото, Все рамочки, #Розовый, #Фиолетовый

---

[clubbyinstant]

ВАШ ТЕКСТ. Создано по заказу Карамелюшк' для клуба happiness~ <img src="http://img-fotki.yandex.ru/get/6745/134889438.83/0_e371b_4a03f22_orig" alt="" width="700" height="447"/><div><table width="700" style="background-color:#d8dbbc;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ.</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6603/134889438.65/0_8653a_3bd82a34_XL.jpg" border="0" alt="" width="700" height="124"/>

@темы: #Фото, #Розовый, #Бежевый

---

[clubbyinstant]

ВАШ ТЕКСТ. Рамка создана для 'Esther для клуба Об'нУлЯЙ <img src="http://img-fotki.yandex.ru/get/6502/134889438.64/0_861c5_10bda465_XL.jpg" border="0" alt="" width="700" height="480"/><div><table width="700" style="background-color:#e2d5c2;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ.</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6400/134889438.64/0_861c7_5385fe31_XL.jpg" width="700" height="118"/></div>

@темы: #Фото, Все рамочки, #Розовый, #Бежевый

---

[clubbyinstant]

ВАШ ТЕКСТ. Рамка создана для 'Esther для клуба Об'нУлЯЙ <img src="http://img-fotki.yandex.ru/get/6502/134889438.64/0_861aa_ad555323_XL.jpg" border="0" alt="" width="700" height="197"/><div><table width="700" style="background-color:#62acbe;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ.</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6501/134889438.64/0_861ac_7c0f9cdb_XL.jpg" width="700" height="74"/></div>

@темы: #Фото, Все рамочки, #Синий

---

[clubbyinstant]

Ваш текст. Рамка создана для 'Esther для клуба Об'нУлЯЙ <img title="" src="http://img-fotki.yandex.ru/get/6402/134889438.64/0_861a5_68347397_XL.jpg" border="0" alt="" width="700" height="421"/><div><table width="700" height="43" style="background-color:#c3a1b1"><tbody><tr><td style="padding: 0px 40px;" align="center">Ваш текст.</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/6502/134889438.64/0_861a3_c2c7af5a_XL.jpg" border="0" alt="" width="700" height="113"/></div>

@темы: #Арт, Все рамочки, #Розовый

---

[clubbyinstant]

Рамка создана для Summer Reena----->lоve Summer :З <img src="http://img-fotki.yandex.ru/get/6400/134889438.63/0_858c2_936f8be8_XL.jpg" border="0" alt="" width="700" height="426"/><div><table width="700" height="43" style="background-color:#dbdbde;"><tbody><tr><td style="padding: 0px 40px;" align="center"><center>ВАШ ТЕКСТ</center></td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/5808/134889438.63/0_858c0_e6ebc893_XL.jpg" border="0" alt="" width="700" height="160"/></div>

@темы: #Знаменитости, Все рамочки, #Серый

---

[clubbyinstant]

ВАШ ТЕКСТ. Эта рамка была создана для Esther HTML-код: <img src="http://img-fotki.yandex.ru/get/6400/134889438.63/0_8532f_72c8b2e0_XL.jpg" border="0" alt="" width="700" height="287"/><div><table width="700" height="43" style="background-color:#f4c8a2;"><tbody><tr><td style="padding: 0px 40px;" align="center">ВАШ ТЕКСТ.</td></tr></tbody></table><img src="http://img-fotki.yandex.ru/get/5706/134889438.63/0_8532e_71b1f515_XL.jpg" border="0" alt="" width="700" height="86"/></div>

@темы: #Арт, #Рыжий, Все рамочки

---

Создание бесшовной шапочки для дневника на я.ру.

[clubbyinstant]

Урок создания бесшовной шапочки для дневника на я.ру.
Урок создан по заказу: Marionelhek (Урок предназначен для оформления страницы на я.ру и перенесен в это сообщество в связи с закрытием сайта, если вам он пригодится, я буду рада).
Почти в каждом клубе по дизайнам есть урок по созданию бесшовной шапочки. И я должна была рассказать о том, как создаются бесшовные фоны, но почему-то, я создала урок не на ту тему и когда поняла это, было уже поздно. Приношу свои извинения ^^
А теперь о шапочках. Обычно создают документ высотой 118 px, вставляют туда некоторую часть из картинки, дублируют ее и зеркально отражают. Мне не нравится этот способ, потому что не у многих получается это красиво. На счет "красиво" мне бы хотелось рассказать в следующем уроке. В создании шапочек я не стала изобретать велосипед, все создается в программе фотошоп из нескольких фрагментов картинки с использованием инструмента "Векторная маска".
Не знаю, как сделать этот урок понятнее, так что, если у вас останутся вопросы, оставляйте их в комментариях этой темы.
1. Для начала выберем изображение. Например вот это:

2. Создаем новый документ высотой 118 px и любой шириной, я обычно делаю по шире, чтобы шапочка была поинтереснее и на ней было больше деталей. Я создала документ шириной 700 px.

3. Переходим в документ с изображением. Выбираем инструмент "Прямоугольная область", в панели настроек, наверху, выбираем Стиль: "Задан. Размер", Шир.: 700 пикс., Выс.: 118 пикс.
Выделяем фрагмент изображения, который нам нравится.

4. Копируем эту часть в наш документ (Ctrl+C и Ctrl+V).

5. В меню выбираем Фильтр- Другое- Сдвиг.

6. Появится окно "Сдвиг". Нам нужен сдвиг "По горизонтали". Меняем его параметр так, чтобы шов оказался где-то по середине, чтобы нам было удобно его перекрыть. (Для создания бесшовного фона используется и сдвиг по вертикали)

7. Снова возвращаемся в документ с нашей картинкой и вырезаем другой фрагмент с помощью прямоугольного выделения. Так же копируем его в наш документ с шапочкой.

8. Теперь начинается самое интересное. Мы выбираем наш верхний слой и на панели слоев, внизу, нажимаем кнопку "Добавить векторную маску". Рядом со значком слоя должен появиться значок маски белого цвета. Щелкните один раз по этому значку, чтобы выделение было на нем. Это важно.

9. На панели инструментов выбираем инструмент "Градиент" и в палитре выбираем черный цвет. Далее с помощью этого градиента убираем все лишнее (зажимаем Shift, чтобы градиент был прямой) с краев нашего изображения, то есть мы перекрываем только наш шов. Так же можно выбрать "Радиальный градиент", на панели настроек инструментов и убрать лишние детали с его помощью.

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

11. Если все детали вас устраивают, выделите все слои (нажмите на верхний слой, зажмите Shift, нажмите на нижний слой) и щелкните правой клавишей мыши. В меню выбираем "Объединить слои". Шапка почти готова.

12. Можно еще добавить что-нибудь вроде полосы с другим оттенком, с помощью любых инструментов. Я использовала "Кривые".

13. Когда наша шапочка готова и вы довольны результатом, сохраняем ее: Файл-Сохранить как... В окне сохранения выбираем формат .jpg и выбираем наилучшее качество.

15. Готово ^^
Создание дизайна ограничивается лишь вашими умениями работы с программами и воображением.

Картинка из урока

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

@темы: Lessons

---

[clubbyinstant]

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

<a href="ССЫЛКА">ТЕКСТ ССЫЛКИ</a>

Клуб by Instant

Или в виде изображения:

<a href="ССЫЛКА"><img src="АДРЕС ИЗОБРАЖЕНИЯ"/></a>

Со вторым вариантом все понятно, а если нет, можно посмотреть уроки клуба: Уроки
Здесь мы рассмотрим первый вариант оформления ссылок.
Чтобы оформить наш текст нужно написать внутри тега <a> тег style=" ", вот что может быть внутри style:

<a style="text-shadow: {ЧИСЛО}px {ЧИСЛО}px {ЧИСЛО}px #ЦВЕТ; text-decoration:{Значение}; border-bottom:{ЧИСЛО}px {Значение}; border:{ЧИСЛО}px {Значение}; color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ШРИФТА; font-style: СТИЛЬ ШРИФТА;" href="ССЫЛКА" target="{Значение}">ТЕКСТ ССЫЛКИ</a>.

Список, конечно не полный, но я постаралась вместить то, что я чаще всего использую для оформления. Теперь рассмотрим все по отдельности:
ТЕНЬ ТЕКСТА:

[text-shadow: {ЧИСЛО1}px {ЧИСЛО2}px {ЧИСЛО3}px #{ЦВЕТ};]-тень текста (ссылки). {ЧИСЛО1}px- сдвиг по x. {ЧИСЛО2}px- сдвиг по y. {ЧИСЛО3}px- радиус размытия. #{ЦВЕТ}- цвет тени.

ТЕКСТ Код: <a style="text-shadow: 5px 5px 3px #000000;">ТЕКСТ</a>

ПОДЧЕРКИВАНИЕ И Т.П.:

[text-decoration:{Значение};]- добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом или отменяет и оформление. none; Отменяет и подчеркивание ссылки. line-through; Перечеркивание текста. overline; Линия проходит над текстом. underline;  Устанавливает подчеркнутый текст.

Клуб by Instant Код:<a style="text-decoration:none;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:line-through;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:overline;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:underline;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a>

ГРАНИЦА ВНИЗУ ТЕКСТА:

[border-bottom:{ЧИСЛО}px {Значение};]- толщина и стиль границы внизу. {ЧИСЛО}px- толщина границы. Значения: dotted; dashed; solid; double; groove; ridge; inset; outset;

ТЕКСТ Код:<a style="border-bottom:1px dotted;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:1px dashed;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:1px solid;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px double;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px groove;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px ridge;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px inset;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px outset;">ТЕКСТ</a>

РАМКА ВОКРУГ ТЕКСТА:

[border:{ЧИСЛО}px {Значение};]- толщину и стиль вокруг ссылки. {ЧИСЛО}px- толщина границы. Значения: dotted; dashed; solid; double; groove; ridge; inset; outset;

ТЕКСТ Код:<a style="border:1px dotted;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:1px dashed;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:1px solid;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px double;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px groove;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px ridge;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px inset;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px outset;">ТЕКСТ</a>

ЦВЕТ ТЕКСТА:

[color: #{ЦВЕТ ТЕКСТА};]- цвет текста.

ТЕКСТ Код:<a style="color: #ff2d2d;">ТЕКСТ</a>

ШРИФТЫ:

[font-family: {ИМЯ ШРИФТА};] Шрифты: Monotype Corsiva Impact Georgia Lucida Console MS Mincho Haettenschweile Batang Segoe Print Comic Sans MS Mistral Verdana

Текст Код:<a style="font-family: Monotype Corsiva;">Текст</a> Текст Код:<a style="font-family: Impact;">Текст</a> Текст Код:<a style="font-family: Georgia;">Текст</a> Текст Код:<a style="font-family: Lucida Console;">Текст</a> Текст Код:<a style="font-family:MS Mincho;">Текст</a> Текст Код:<a style="font-family: Haettenschweile;">Текст</a> Текст Код:<a style="font-family: Batang;">Текст</a> Текст Код:<a style="font-family: Segoe Print;">Текст</a> Текст Код:<a style="font-family: Comic Sans MS;">Текст</a> Текст Код:<a style="font-family: Mistral;">Текст</a> Текст Код:<a style="font-family: Verdana;">Текст</a>

СТИЛЬ ШРИФТА:

[font-style:  {СТИЛИ ШРИФТА};] Значения: normal- обычное начертание текста. italic- курсив. oblique- наклонное начертание.

Текст Код:<a style="font-style:normal;">Текст</a> Текст Код:<a style="font-style:italic;">Текст</a> Текст Код:<a style="font-style:oblique;">Текст</a>

ОТКРЫТИЕ ССЫЛКИ В НОВОМ ОКНЕ:

[target="{Значение}"] Значения: _blank - загружает страницу в новое окно браузера; _self -загружает страницу в текущее окно;

Клуб by Instant Код:<a href="http://clubs.ya.ru/4611686018427467549/" target="_blank">Клуб by Instant</a> Клуб by Instant Код:<a href="http://clubs.ya.ru/4611686018427467549/" target="_self">Клуб by Instant</a>

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

@темы: Lessons

---

Урок по созданию рамочки.

[clubbyinstant]

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

2. Создаем новый файл. Допустим его ширина будет 600px, высоту делаю примерно такой же.
Итак, моя рамочка будет состоять из трех частей: 1-верхняя; 2-средняя, в ней будет находиться наш текст; 3- нижняя часть.

3. В документе располагаю фон так, чтобы его нижняя граница касалась нижней части файла. Это очень важно. Далее просто редактирую фон, округляю сверху края (с помощью маски, можно сделать с помощью инструмента "Прямоугольник с округлыми краями"), так же меняю оттенок фона, чтобы он подходил под выбранное изображение, вставляю нашу картинку, добавляю и меняю другие детали или эффекты на свое усмотрение. Верхняя часть готова, сохраняем ее (в формате .png или .gif).

4. Открываем файл с нашим фоном и применяем к нему все те же эффекты, что и к первой части, ведь этот фон будет продолжением нашей рамки. Сохраняем изображение.

5. Чтобы не усложнять урок, я решила сделать нижнюю часть обычной линией в цвет обводки рамочки с шириной 600px и высотой 3px. Сохраняем.
6. Все детали готовы, можно загрузить их в Библиотеку изображений.
P.S. Не забываем про вес изображений ^^
ШАГ 2. Собираем нашу рамочку.
1. Как выглядит упрощенный код из урока (все так просто ^^):

<img scr=""/>
<div>ТЕКСТ<img scr=""/></div>

А теперь усложним:

<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
<div style="width: ШИРИНА ЭЛЕМЕНТАpx; background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
<center>
<p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВАpx; color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p>
</center>
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
</div>

2. Разберем его поподробнее.

<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
Это верхняя часть, здесь все просто.
Далее открывается тег <div>:
<div style="width: ШИРИНА ЭЛЕМЕНТАpx; background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
Сюда мы вставляем адрес нашей рамочки.
Внутри <div>...</div> находится наш тест, описываем его стиль и положение внутри рамочки:
<center><p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВАpx; color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p></center>
После располагается код нижней части:
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
и закрывается </div>
Важно: в "background-image:url('ИЗОБРАЖЕНИЕ'); - адрес ссылки пишется без "//static.diary.ru"

3. Мой вариант:

<img src="img-fotki.yandex.ru/get/5012/134889438.7d/0_c06..." width="600" height="379"/>
<div style="width: 600px; background-image: url('/userdir/3/2/5/9/3259691/81509596.gif');">
<center><p style="padding: 0px 20px 0px 20px; color: #49241f; font-family: Segoe Print; font-style: italic;">ВАШ ТЕКСТ.</p></center>
<img src="img-fotki.yandex.ru/get/9797/134889438.7d/0_c06..." width="600" height="3"/></div>

Ссылки на изображения которые я использовала:
fotki.yandex.ru/users/katherinelunar/view/78798...
img-fotki.yandex.ru/get/9493/134889438.7d/0_c06...
Результат можно посмотреть в самом низу, после урока.
Если у вас остались вопросы, задавайте их в комментариях этого урока.
Навигация по урокам сообщества: Перейти.

Результат урока:

Цветком печальным на ветру,
Не пророняя слов,
Увянет роза поутру
Под градом лепестков.

Придёт садовник в старый сад
Собрать букет цветов,
А на траве росой лежат
Слезинки лепестков.

@темы: Lessons

---

Урок по созданию навигации для дневника. Способ 2.

[clubbyinstant]

Создаем навигацию для дневника. Способ 2.
1.Создаем фон для меню, над ним будут располагаться наши ссылки. Сохраняем изображение.

2. Загружаем картинку в Библиотеку изображений.
3. Теперь пишем код для навигации:

<table style="background-image:url('ИЗОБРАЖЕНИЕ'); width: ШИРИНАpx; height: ВЫСОТАpx;"><tbody><tr><td>
<a href="ССЫЛКА 1">ТЕКСТ ССЫЛКИ</a>
<a href="ССЫЛКА 2">ТЕКСТ ССЫЛКИ</a>
<a href="ССЫЛКА 3">ТЕКСТ ССЫЛКИ</a>
<a href="ССЫЛКА 4">ТЕКСТ ССЫЛКИ</a>
</td></tr></tbody></table>

Важно: в "background-image:url('ИЗОБРАЖЕНИЕ'); - адрес ссылки пишется без "//static.diary.ru"
4. Мой код:

<table style="background-image:url('/userdir/3/2/5/9/3259691/81503663.gif'); width: 312px; height: 228px;">

<tbody><tr><td>
<p><a style="color: #ac8b99; font-family: Comic Sans MS; font-size: 14px;  padding: 0px 0px 0px 140px;" href="lemur-instant-stivi.diary.ru/">Моя страница</a></p>
<p><a style="color: #ac8b99; font-family: Comic Sans MS; font-size: 14px; padding: 0px 0px 0px 140px;" href="club-by-instant.diary.ru/">Мое сообщество</a></p>
<p><a style="color: #ac8b99; font-family: Comic Sans MS; font-size: 14px; padding: 0px 0px 0px 140px;" href="www.diary.ru/member/?3256256">Мой профиль</a></p>
<p><a style="color: #ac8b99; font-family: Comic Sans MS; font-size: 14px; padding: 0px 0px 0px 140px;" href="www.diary.ru/member/?3259691">Профиль сообщества</a></p>
</td></tr></tbody>

</table>

5. Результат:

Моя страница Мое сообщество Мой профиль Профиль сообщества

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

@темы: Lessons

---

Урок по созданию навигации.

[clubbyinstant]

Создаем простую навигацию из изображения для дневника.
1. Для начала нам нужно создать наше изображение в фотошопе или в любой другой удобной для вас программе. Например:

2. Разрезаем наше изображение на части и сохраняем каждую часть отдельно:
3. Загружаем наши картинки в Библиотеку изображений.
4. Нам осталось написать html-код для нашей менюшки, вот так он будет выглядеть:

<table><tbody><tr><td>
<a href="ССЫЛКА 1"><img src="ССЫЛКА НА КАРТИНКУ 1"/></a>
<a href="ССЫЛКА 2"><img src="ССЫЛКА НА КАРТИНКУ 2"/></a>
</td></tr></tbody></table>

"Ссылка 1" и "Ссылка2"- это адреса страниц.
Итак, код моей мини-навигации:

<table><tbody><tr><td>
<a href="lemur-instant-stivi.diary.ru/" target=_blank><img src="secure.diary.ru/userdir/3/2/5/9/3259691/8150349..." alt=""></a>
<a href="club-by-instant.diary.ru/" target=_blank><img src="secure.diary.ru/userdir/3/2/5/9/3259691/8150349..." alt=""></a>

Результат:
Если у вас остались вопросы, задавайте их в комментариях этого урока)
Навигация по урокам сообщества: Перейти.

@темы: Lessons

---

PSD collection.

[clubbyinstant]

PSD анимации для оформления аватарок.
Скачать все одним архивом: СКАЧАТЬ
Вы можете посмотреть примеры всех анимаций ниже)

***
Мини- инструкция.
1. Открываем PSD файл.
2. Помещаем нашу аватарку над слоем "Фон".
3. "Файл"-"Сохранить для Web и устройств"-"Сохранить".
***

***

***

Посмотреть. (49 шт.)

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

***
Буду рада, если моя работа не оставит вас равнодушными, и вы предложите свои идеи по улучшению клуба в теме: "Вопросы и предложения".

---

Дизайн. Навигация.

[clubbyinstant]

<Временно закрыто>

---

Уроки. Навигация.

[clubbyinstant]

Список уроков клуба:

• Все уроки.

• Навигация для дневника. Способ 1.

• Навигация для дневника. Способ 2.

• Создание рамочки.

• Создание и оформлению ссылок.

• Создание бесшовной шапочки для дневника на я.ру.