Материал из Wiki.
Ныряем в Фотошоп, гребём CSS-ом и вообще творим безобразия над klikvip light-фидом
«Мелочи не играют большой роли. Они решают всё.»
Фид – это тот инструмент, который превращает ваш траффик в звонкую монету. Ни для кого не секрет, что чем привлекательнее для сёрфера выглядит фид, чем меньше он походит на стандартные фиды других дорвейщиков, тем выше на нём CTR (click thrue ratio) и тем больше кликов делает сёрфер. Давайте рассмотрим процесс создания привлекательного фида на конкретном примере. Пусть у нас есть трафф по запросу Preved Krasavcheg.
Что первым делом даёт понять сёрферу, что он зашёл на серьёзный контентный сайт? Это шапка. Я делаю свои фиды шириной 700-800 пикселей. Соответственно и шапку мы будем делать такой же. Открываем фотошоп. Жмём Ctrl+N. Пусть ширина будушей шапки будет 700 пикселов, и высота – 80.
Что должно быть на шапке? В первую очередь на ней должна быть обозначена тема сайта, что бы сёрфер сразу убедился, что попал по правильному адресу. C помощью инструмента Text набираем:
Слабовато для шапки, правда? Попробуем добавить какую-нибудь интересную картинку.
Например, вот эту:
Открываем её в новом окне фотошопа и перетаскиваем мышкой изображение супермена в окно с нашей шапкой. Мне показаось, что супермен будет лучше смотреться, если его зеркально отразить на 180 градусов. Для этого я жму Edit > Transform > Flip Horizontal (Редактировать > Трансформация > Отразить по горизонтали).
После перетаскивания картинки в окно с будущей шапкой получается вот так:
В панели Layers (слои) активируем слой с картинкой (просто кликнув на значке слоя мышкой) и начинаем подгонять картинку под размер будущей шапки. Для начала перетащим слой с картинкой влево-вверх.
При этом изображение супермена заслонило надпись Preved Krasavcheg (так как слой с картинкой находится выше слоя с надписью). Ничего страшного. Надписью будем заниматься потом. К слову, у меня на будущей шапке находятся три слоя (сверху-вниз):
- слой с картинкой
- слой с надписью
- слой с белым бэкграундом
По всему видно, что супермен не влезает. Жмём Ctrl+T. Это инструмент free transform, с его помощью можно менять размеры картинки. По периметру картинки появляется прямоугольник трансформации.
Наводим мышку на квадратик, который расположен в нижнем правом углу прямоугольника трансформации. Курсор приобретает вид двух стрелок. Чтобы размеры оставались пропорциональными и изображение не сплющивалось и не растягивалось, как в кривом зеркале, нажимаем Shift. При нажатом Shift, жмём левую кнопку мышки и тащим нижний правый угол прямоугольника трансформации вверх-влево. Как видите, картинка уменьшается в размерах. Отпускаем кнопку мыши, отпускаем Shift и жмём Enter – трансформация закончена. Теперь размер картинки – весьма подходящий. Только её надо немного передвинуть. Для этого жмём на клавиатуре V и мышкой перетаскиваем картинку туда, где на наш взгляд, она будет смотреться наиболее симпатишно (для передвигания можно также пользоваться стрелками на клавиатуре)
Вот что у нас получилось:
Убираем белые буквы с картинки. Для этого жмём на клаве S и работаем инструментом Clone Stamp. Этот инструмент рисует изображением из одной части картинки на другой части этой же картинки. Наводим мышку на небо, которое находится под белыми буквами, жмём Alt и делаем щелчок мышкой. Курсор превращается в этакую мишень. Отпускаем Alt. И теперь самое интересное – наводим мышку на белые буквы, жмём левую кнопку и рисуем «небом» по буквам. Как вы можете заметить, белые буквы «закрашиваются небом». При этом внизу параллельно движениям мышки бегает крестик, обозначающий, из какого места в данный момент берётся паттерн для закрашивания (если крестик залезает на красный плащ супермена вместо неба, и этот же проклятый плащ вместо неба начинает появляться на буквах - просто повторите комбинацию Alt + щелчок мышкой, чтобы брать паттерн немного из другого места).
Ну вот, теперь никакие левые надписи не портят картинку:
Сделаем так, чтобы переход от картинки к белому бэкграунду не был резким: Layer>Add Layer mask>Reveal all (Слой > Добавить маску слоя > Показать всё). Пока ничего не изменилось. Мы лишь добавили к картинке так называемую «маску». Рассказывать про маски я здесь не буду, ибо это долго. При желании вы можете прочитать про них в любом мануале по Фотошопу. Выбираем инструмент градиентной заливки. Помещаем курсор на границу белого бэкграунда и синего небесного фона картинки (там, откуда выглядывает восклицательный знак) и протягиваем мышку (при нажатой левой кнопке) поближе к супермену. Теперь правый край картинки постепенно растворяется в белом бэкграунде.
Самое время заняться надписью. Для начала перетащим в панели слоёв (Layers) значок её слоя на самый верх. Теперь слой с надписью находится выше всех остальных слоёв.
Переместим надпись в более подходящее место (мышкой или стрелками клавиатуры).
С точки зрения дизайна плохо использовать в композиции много не связанных друг с другом цветов. Иначе композиция не будет выглядеть как единое целое. Поэтому попробуем подобрать цвета надписи согласно уже использующимся на изображении супермена цветам. Для этого выбираем инструмент Text, на верхней панели кликаем на синий квадратик, обозначающий, каким цветом текст залит на данный момент. Появляется окошко Color Picker. Ничего там не трогаем, а сразу передвигаем мышку на грудь супермена. При этом курсор приобретает форму пипетки – это означает, что мы назначим тексту тот цвет, который укажем на картинке. Щёлкаем мышкой. Жмём ОК. Теперь цвет надписи соответствует цвету формы на груди супермена. Визуально мало что изменилось, но как вы уже знаете, мелочи решают всё.
Одним из самых сильных средств, которыми композиция может повлиять на зрителя, является контраст. Внесём контраст в надпись, опираясь на уже известный закон избегания множественности цветов. Зальём надпись Preved красным цветом плаща супермена. Для этого с помощью инструмента Text выделяем надпись Preved и опять с помощью пипетки назначаем надписи цвет плаща супермена.
Чтобы надпись лучше читалась на фоне неба, сделаем ей небольшую белую окантовку: Layer > Layer Style > Outer Glow (Слой > Стиль слоя > Внешнее свечение). Выставляем настройки, как показано на картинке.
Ну вот, шапка готова:
Приступим к цветам ссылок на фиде. Опять будем отталкиваться от того, что цветов на сайте не должно быть много и они должны быть связаны друг с другом. Для тайтлов и урлов возьмём цвет надписи Krasavcheg, а для дексрипшенов – цвет надписи Preved. В фотошопе инструментом Пипетка наводим на надпись Krasavcheg, кликаем. Основной цвет на панели инструментов окрашивается в синий. Кликаем по нему и в открывшемся окошке смотрим в самый низ – там указано значение этого цвета в web-палитре: #0077A6.
Открываем template.php в текстовом редакторе.
С помощью CSS сделаем так, чтоб тайтлы были нужного нам цвета (#0077A6):
Параллельно определяем шрифт (Arial) и размер шрифта (16 пикселов в высоту) для тайтлов:
<a href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status=;return true;"
onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=color:#0077A6; font-family: Arial;
font-size: 16px><?=$p_links[$i]['title']?></a>
Определяем цвет (#0077A6), шрифт (Arial) и размер шрифта (12 пикселов в высоту) для текста урлов ссылок:
<a href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status='';return true;" onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=''color:#0077A6; font-family: Arial; font-size: 12px''><?=$p_links[$i]['srurl']?></a>
Аналогично определяем внешний вид дескрипшенов. Для этого по уже известной методике в Фотошопе определяем цвет надписи Preved в web-палитре (C7413A).
<a id="id2" href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status='';return true;" onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=''color:#C7413A; font-family: Arial; font-size: 12px''><?=$p_links[$i]['desc']?></a>
Меняем внешний вид рилэйтедов, будем использовать уже знакомые цвета 0077A6 и C7413A :
<p style=''color: #C7413A; font-family: Arial; font-size: 15px''><b>Related News</b></p>
<?for($i=0;$i<count($p_related);$i++){?>
<a href="search.php?q=<?=$p_related[$i]['uq']?>&aff=<?=$print['aff']?>&saff=<?=$print['saff']?>" onMouseOut="window.status='';return true;" onMouseOver="window.status='Search for " <?=$p_related[$i]['q']?> \"';return true;" style=="color: #0077A6; font-family: Arial; font-size: 13px"><?=$p_related[$i]['q']?></a><br>
<?}?>
Ту же операцию производим и с ресент сёрчами.
<p style=''color: #C7413A; font-family: Arial; font-size: 15px"><b>Most popular sites</b></p>
<?for($i=0;$i<count($p_recent);$i++){?>
<a href="search.php?q=<?=$p_recent[$i]['uq']?>&aff=<?=$print['aff']?>&saff=<?=$print['saff']?>" onMouseOut="window.status='';return true;" onMouseOver="window.status='Search for " <?=$p_recent[$i]['q']?> \"';return true;" style=''color: # 0077A6; font-family: Arial; font-size: 13px''><?=$p_recent[$i]['q']?></a><br>
<?}?>
Открываем Дримвивер (или любой другой wysiwyg html-редактор). Создаём новый документ. В нём создаём вот такую таблицу:
Как видите, в веркнюю ячейку я уже поместил нашу распрекрасную шапку.
Выберем фон для окна браузера – для этого я в Фотошопе возьму с помощью инструмента Пипетка образец цвета тени на плаще супермена. Это цвет #6e1f18. Как вы заметили, белый цвет бэкграунда страницы прекрасно контрастирует с бордовым цветом бэкграунда окна браузера. При этом я опять использую цвет, уже имеющийся в композиции. По большому счёту в дизайне будущего фида используются всего три цвета: бордовый, синий и белый. Я всегда стараюсь использовать в дизайне не более трёх-четырёх цветов. Использование большего количества цветов часто делает сайт похожим на винегрет. А винегрет и дизайн – понятия несовместимые.
Кстати, более подробно про подбор гармоничных цветов можно почитать здесь http://www.getinfo.ru/article262.html.
Левый столбец в таблице мы будем использовать для вывода релэйтед и ресент сёрчей, и правый – для основной выдачи фида. Зададим жесткую ширину этих столбцов. Для этого в Фотошопе создадим прозрачный gif-файл размером 1х1 пиксель. Открываем Фотошоп, жмём Ctrl+N, ширину выставляем 1 пиксель, высоту – тоже 1 пиксель, цвет фона выставляем «прозрачный». Сохраняем рисунок как 1х1.gif
В Дримвивере помещаем этот 1х1.gif в верхние правую и левую ячейки под шапкой (нижние ячейки не трогаем).
В левой ячейке делаем так:
<img src="1х1.gif" width="200" height="1">
В правой так:
<img src="1х1.gif" width="500" height="1">
У каждой из этих ячеек выставляем высоту в 1 пиксел: <td height="1">
Теперь левый столбец будет ВСЕГДА иметь ширину 200 пикселов, а правый – 500 пикселов.
В нижнюю левую ячейку вставляем код релэйтед и ресент сёрчей (я немного поменял заголовки, так как на мой взгляд у современных сёрферов, облазивших не один фид, надписи Recent Searches и Related Searches не вызывают ничего, кроме головной боли):
<p style=''color: #C7413A; font-family: Arial; font-size: 15px''><b>Related News</b></p>
<?for($i=0;$i<count($p_related);$i++){?>
<a href="search.php?q=<?=$p_related[$i]['uq']?>&aff=<?=$print['aff']?>&saff=<?=$print['saff']?>" onMouseOut="window.status='';return true;" onMouseOver="window.status='Search for " <?=$p_related[$i]['q']?> \"';return true;" style=''color: #0077A6; font-family: Arial; font-size: 13px''><?=$p_related[$i]['q']?></a><br>
<?}?>
и
<p style=''color: #C7413A; font-family: Arial; font-size: 15px''><b>Most popular sites</b></p>
<?for($i=0;$i<count($p_recent);$i++){?>
<a href="search.php?q=<?=$p_recent[$i]['uq']?>&aff=<?=$print['aff']?>&saff=<?=$print['saff']?>" onMouseOut="window.status='';return true;" onMouseOver="window.status='Search for " <?=$p_recent[$i]['q']?> \"';return true;" style="color: #0077A6; font-family: Arial; font-size: 13px"><?=$p_recent[$i]['q']?></a><br>
<?}?>
После вывода ресент и рилэйтедов неплохо будет поставить сёрчбокс:
<p>
<form style="padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;" action="search.php" name='Search' method="post">
<input type="hidden" name="aff" value="<?=$print['aff']?>">
<input type="hidden" name="saff" value="<?=$print['saff']?>">
<span style="color: #C7413A; font-family: Arial; font-size: 15px">Search:</span><br>
<input type="text" name="q" size="15" maxlength="100" style="font-family: Arial; font-size: 12px; color: #0077A6; text-align:right"><br>
<input type="submit" value="Search">
</form>
</p>
В правую ячейку вставляем код основной выдачи фида:
<p style=''color: #C7413A; font-family: Arial; font-size: 20px''><b><?=$print['q']?></b></p>
- (пусть сёрфера под шапкой нашего фида встречает весёленький крупный заголовок, соответствующий основному киворду).
<?for($i=0;$i<count($p_links);$i++){?>
<a href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status='';return true;" onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=''color:#0077A6; font-family: Arial; font-size: 16px''><?=$p_links[$i]['title']?></a><br>
<a id="id2" href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status='';return true;" onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=''color:#C7413A; font-family: Arial; font-size: 12px''><?=$p_links[$i]['desc']?></a><br>
<a href="<?=$p_links[$i]['curl']?>" target="_blank" onMouseOut="window.status='';return true;" onMouseOver="window.status='<?=$p_links[$i]['rurl']?>';return true;" style=''color:#0077A6; font-family: Arial; font-size: 12px''><?=$p_links[$i]['srurl']?></a><br>
<?}?>
Да, чуть не забыл. Для ячеек, где будут выводится основная выдача, ресенты и рилэйтеды, я указал следующие параметры: для левой <td valign="top" align="right" style="padding: 15px; border-right: 1px solid #C7412A"> и для правой <td valign="top" align="left" style="padding: 20px">. Таким образом, весь контент в ячейках будет выравниваться по верхнему краю, в левой ячейке текст будет выравниваться по правой её стороне и иметь отступ 15 пикселов от границ ячейки, справа ячейка по всей высоте будет иметь окрашенную в уже знакомый цвет #C7412A границу толщиной 1 пиксел;
в правой ячейке текст будет выравниваться по левой её стороне и иметь отступ 20 пикселов от границ ячейки.
Добавляем необходимый код в <head> нашего документа:
<html>
<head>
<title>Top 20 sites about <?=$print['q']?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="refresh" content="600;
URL=search.php?q=<?=$print['uq']?>&aff=<?=$print['aff']?>&saff=<?=$print['saff']?>">
</head>
Теперь сохраняем документ как template.php в папке feed_data.
Вот, что у нас получилось:
Я бы кликнул. Честное слово!
© benzole.
[Источник] | 03 марта 2005
INCOMERADE / Wiki / Дизайним собственный фид
Заглавная страница
