Як зробити html код для банера і анімацію в Фотошопі

  1. Як зробити анімацію в Фотошопі.
  2. Як зробити html код для банера.

Так уже сталося, що мені подобається працювати з CSS кодом, тому було цікаво зробити кнопку нижче, яку можна використовувати в якості банера, тобто після натискання на неї ви перейдете на Головну сторінку shpargalkablog.ru:

шпаргалка блогера


<Style type = "text / css"> div.sb {text-indent: 0px; outline: 2px solid # f4e9ce; border: 2px solid # ddcca2; padding: 4px 3px 0px 3px; background-image: -moz-linear-gradient (# f4e9ce, # ddcca3); background-image: -webkit-gradient (linear, center top, center bottom, from (# f4e9ce), to (# ddcca3)); filter: progid: DXImageTransform.Microsoft.Gradient (gradientType = 0, startColorStr = # f4e9ce, endColorStr = # ddcca3); background-image: -o-linear-gradient (top, # f4e9ce, # ddcca3); height: 65px; width: 260px; font-family: Impact, Arial, Verdana; font-size: 200%; font-weight: 100; text-transform: uppercase; font-style: oblique; font-weight: bold; } Span.sb1 {border-bottom: # ddcca2 5px solid; color: # 991500; margin: 0; text-shadow: -1px -1px white, 1px 1px # 333; float: left; } Span.sb2 {color: # ddcca2; margin: 11px 0; position: relative; text-shadow: 1px 1px 1px # 000; float: left; } </ Style> <a href="http://shpargalkablog.ru/" title="Шпаргалка блоггера"> <div class = "sb"> <span class = "sb1"> Шпаргалка </ span> <span class = "sb2"> блогера </ span> </ div> </a>

Як зробити анімацію в Фотошопі.

Але оскільки цей нешкідливий код може відлякувати користувачів своїм обсягом символів, а картинка не є динамічною, то за допомогою програми ScreenHunter 5.1 Free я сфотографувала ділянку екрана монітора з даною кнопкою, тим самим перетворивши її в зображення. Ви можете не використовувати такий довгий шлях, намалювавши картинку в Adobe Photoshop з нуля . Але спочатку потрібно визначитися з розмірами майбутнього банера. Їх можна дізнатися в тій банерної мережі, з якої ви плануєте працювати. Я ж не була обмежена певними рамками.

Заходимо в програму Фотошоп. Тут нам знадобиться відкрити "Вікно" -

  • "Анімація",
  • "Шари" (гаряча клавіша F7),
  • "Інструменти".

Для зображення в форматах BMP і PNG шари ніяк не зробити, тому потрібно (для JPEG і GIF цей пункт пропускаємо):

  1. обвести картинку Так уже сталося, що мені подобається працювати з CSS кодом, тому було цікаво зробити кнопку нижче, яку можна використовувати в якості банера, тобто   після натискання на неї ви перейдете на Головну сторінку   shpargalkablog L (ласо),
  2. "Файл" - "Створити" (CTRL + N),
  3. командою V перенести зображення на створену область.

Через те, що прати елементи простіше, ніж домальовувати, то ми продублюємо, виділивши (Рис.2), що цікавить нас шар.

2), що цікавить нас шар

Потім, виділивши (див. Синій фон) один з шару і вказавши тільки на ньому очей, орудуем піпеткою (I) Потім, виділивши (див , Для автоматичного визначення та встановлення обраного кольору, і олівцем (B) для видалення непотрібних фрагментів шляхом їх зафарбовування в палітру фону. При цій процедурі я люблю збільшувати масштаб фотографій: якщо подивитися на Рис.1, то він дорівнює 100%, а я вказую в 300%, щоб залишити поза увагою зайві елементи. Також корисною функцією є прозорість шару (Рис.2).

В результаті отримаємо:

Далі поглянемо на вікно "Анімація" і створимо кілька кадрів.

Далі поглянемо на вікно Анімація і створимо кілька кадрів

Потім для кожного кадру проставляем око (очей) тільки на ті верстви, які повинні відображатися на ньому.

Потім для кожного кадру проставляем око (очей) тільки на ті верстви, які повинні відображатися на ньому

І встановимо для кадру той проміжок часу, протягом якого користувач його буде спостерігати, шляхом натискання мишкою на секунди.

І встановимо для кадру той проміжок часу, протягом якого користувач його буде спостерігати, шляхом натискання мишкою на секунди

За кнопці ► подивимося на кінцевий результат і при схваленні збережемо по команді "Файл" - "Зберегти для Web і пристроїв" (Alt + Shift + Ctrl + S) в форматі GIF. За цією методикою у мене вийшов такий банер, який я завантажила в альбом Picasa через чернетка Blogger : За кнопці ► подивимося на кінцевий результат і при схваленні збережемо по команді Файл - Зберегти для Web і пристроїв (Alt + Shift + Ctrl + S) в форматі GIF

Як зробити html код для банера.

Щоб клацнувши по анімаційної зображенні, можна було потрапити на сайт, поміщаємо її в конструкцію:

<a href=" адрес_сайта "title=" названіе_сайта"> <img src = "адрес_баннера" alt = "названіе_сайта" /> </a>

У моєму випадку:

<a href="http://shpargalkablog.ru/" title="Шпаргалка блоггера"> <img border = "0" height = "79" width = "266" src = "https: // 3364729736176253495-a-+1802744773732722657 -s-sites.googlegroups.com/site/spargalka1/rating/shpargalkablog-banner.gif "alt =" Шпаргалка блогера "/> </a>

І якщо на початку статті в тег a був укладений текст, то зараз ми вказуємо зображення.

IRC (Internet Relay Chat)