Как сделать лого для ксс

2. Теперь откроем рисунок. Нажимаем “Open” и выбираем нужный рисунок.

Halflife Logo Creator.rar (770.6 Кб, 59 просмотров)

Спрей с прозрачным фоном
1. Открываете в Фотошопе Ваш файл-картинку. Приводите размер картинки в пикселах кратном двум (например, 128х128, 256х256 пиксел)
[ Ссылки могут видеть только зарегистрированные пользователи. ]
2. Выделяете на картинке ту область, которая будет отображаться на спрее
[ Ссылки могут видеть только зарегистрированные пользователи. ]
3. Переходите на закладку «Каналы» и добавляете новый канал белого цвета (#ffffff) непрозрачностью 0%
[ Ссылки могут видеть только зарегистрированные пользователи. ]
и получаете следующее
[ Ссылки могут видеть только зарегистрированные пользователи. ]
4. Заливаете выделенную область белым цветом
[/IMG]http://bia-spb.clan.su/_pu/0/56168.gif[/IMG]
5. Выбираем в меню «Файл-Сохранить как», сохраняем как TARGA-файл, убедившись что стоит галочка «Альфа-каналы», «32 бита/пиксел», и не стоит галочка «Уплотнение (RLE)»
(Отступление. Этот ТАРГА-файл можно попробовать импортировать в КСС как спрей, но не всегда КСС корректно распознает такой файл с прозрачным фоном)
6. Качаете файл [ Ссылки могут видеть только зарегистрированные пользователи. ] и распаковываете в любое место на диске
3. Ваш TARGA-файл копируете в папку vtex\hl2\materialsrc\sprays
4. Запускаете vtex\tga2vtf.bat и, если targa файл был создан в соответствие с инструкциями, получаете в папке vtex\hl2\materials\sprays два файла *.vtf, *.vmt
5. Копируете эти файлы в папку \Steam\SteamApps\user\counter-strike source\cstrike\materials\VGUI\logos и в игре видите название своего спрея в списке (импортировать ничего не надо!)
6. Пункты 4,5,7,8,9 раздела «Простой спрей» применимы и здесь.

Анимированный спрей
1. В Adobe ImageReady (идет в пакете с фотошопом) конвертируете картинку так, чтобы каждый кадр выглядел отдельным файлом.
Для этого открываете файл анимации и выбираете file->export->animation frames as files.
2. Сохраняете каждый кадр в формат jpg. Потом идете в фотошоп и конвертируете каждый jpg файл в 32-битный формат TARGA (TGA) размером, кратном двум (например, 128х128, 256х256 пиксел)
3. Качаете [ Ссылки могут видеть только зарегистрированные пользователи. ] и распаковываете в любое место на диске.
3. Кладете все targa файлы в папку /hl2/materialsrc/animated/ (если нет такой папки, то создайте) и переименовываете эти файлы в spray001.tga, spray002.tga, spray003.tga и так далее соответственно.
4. Редактируете в этой же папке файл spray.txt в NotePad (он же Блокнот) и меняете значение «endframe» на количество кадров в Вашей анимации.
5. Запускаете convert.bat и, если targa файлы были созданы в соответствие с инструкциями, Ваш *.vtf файл появится в папке /hl2/materials/animated/
6. Если Ваш *.vtf файл оказался больше, чем 120kb, тогда Вам придется урезать кол-во кадров (или уменьшить размер каждого кадра), до тех пор пока размер файла не уменьшится до 120 кб. В противном случая Вы не сможете использовать Ваш лого.
7. Копируете получившийся файл в папку Х:\Program Files\Valve\Steam\SteamApps\user\counter-strike source\cstrike\materials\VGUI\logos
8. В NotePad (он же Блокнот) создаете новый файл и копируете туда следующий код:

Сохраняете («Сохранить как») этот текстовый файл под именем spray.vmt в ту же папку, что и spray.vtf.
9. Пункты 4,5,7,8,9 раздела «Простой спрей» применимы и здесь.

________________
:bender:

Как сделать свое лого в Counter-strike Source v34

Для просмотра онлайн кликните на видео ⤵

Видео урок как поставить спрей в CSS v34 Подробнее

Источник

Дизайн логотипа на CSS3

Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.

Сегодня обсудим, как создать логотип, используя основные свойства CSS3.

В этом уроке разберем логотип ниже. Также, заметим что CSS3 свойства поддерживаются не всеми браузерами. В настоящее время все основные браузеры, такие как Chrome, Safari и Firefox поддерживают. Для лучшего результата, проверьте демо в Chrome или Safari (последних версий).

Основные CSS3 свойства

Для разработки этого логотипа использовались два основных свойства CSS3.

1. border-radius:
Наверно вы заметили использование закругленных углов для головы, крыльев и некоторых других мест. Для закругления углов использовалось CSS3 свойство border-radius.

Это свойство будет принимать два значения. Первое значение будет горизонтальный радиус и второе значение будет вертикальным радиусом.

2. transform:
Это CSS3 свойство будет принимать много значений, таких как наклон, поворот, перевод и т.д., но нам для наклона достаточно воспользоваться одним значением — наклон. Как вы наверно уже заметили, нижний левый и нижний правый крылья поворачиваются. Для этого использовалось свойство transform: rotate(x degrees).

Разработка логотипа

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

Проектирование головы. Для разработки головы использовались контейнеры. Ниже приводится HTML и CSS для головы. Использовалось свойство border-radius, чтобы придать голове изогнутую форму.

Проектирование тела. Для проектирования тела использовался следующий HTML и CSS.

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

Проектирование крыльев. Для проектирования крыльев использовалось свойство transform: rotate().

Проектирование хвоста. Ниже приводится HTML и CSS для хвостовой части.

Окончательный HTML и CSS

Оригинал: CSS3 Logo Design by Srinivas Tamada

Источник

Кликабельный логотип или ссылка поверх изображения

Сегодня расскажу немного о верстке, HTML и CSS. Товарищи, верстальщики просьба не судить строго, поскольку я сам таковым не являюсь, а лишь немного знакомлюсь с теми или иными нюансами этого нелегкого дела по мере необходимости.

Задача следующая. В шапке сайта имеется цельное изображение, на котором располагается логотип сайта. Требуется сделать его кликабельным, чтобы при клике мы переходили на главную страницу. Хочу заметить, что следующие действия пригодятся, если вы не верстали шаблон с нуля, а просто хотите внести некоторые правки уже в чью-либо верстку — тему для wordpress, например.

Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:

Далее требуется добавить в HTML код новый слой. Находим в шаблоне место, где выводится изображение в шапке и размещаем там еще один элемент DIV. Получим что-то вроде следующей конструкции:

В файле стилей CSS пишем:

Здесь свойство position: absolute означает, что позиционирование будет происходить от левого верхнего угла страницы, а в данном примере — элемента

Свойство z-index задает порядок перекрытия слоями друг друга при наложении. Блок DIV с более высоким индексом будет располагаться выше чем тот, у кого значение ниже. Оно также используется для создания кликабельной подложка для фона.

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

Если есть какие-то замечания или советы — с радостью выслушаю в комментариях.

А мне вот всегда было интересно, можно ли сделать ссылку на логотип, который отображается как фон и прописывается в CSS.

Попробую разобраться с этим следующий раз.

Для этого нам потребуется только текст, заключенный в ссылку — Text (и находящийся в диве и одно свойство CSS:

#header a <
background:url(‘images/logo1.jpg’);

Дальше — нужный паддинг (отступ внутри рамки) в px.

padding: сверху справа снизу слева;
>

Проблема остается в тексте, который останется в центре картинки. Чтобы его сместить чисто по-горизонтали, можно воспользоваться text-indent прямо в нашем #header a.

#header a <
background:url(’images/logo1.jpg’) no-repeat;

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

Кстати, неправда. Даже ослик 7-ой и 6-ой грузят все отдельные файлы более-менее параллельно (вон на webo.in можно посмотреть диаграмкой). Т.е. грузится HTML и CSS, картинки из CSS, картинки имг. Стили вообще должны грузиться как можно быстрее, т.к. браузер именно по ним строит верстку, поэтому они даже в опере достаточно быстро грузятся. Вот у меня ЦСС так и не удалось ужать меньше 4 кБ, гзип я пока не применяю, поэтому рефлаш все-таки есть через секунду после начала загрузки страницы на плохой скорости.

Плюс не стоит забывать об оптимизации — если все в ЦСС картинки по возможности поместить в один CSS Sprite (как у меня — при том, что десяток различных элементов используется, спрайты позволяет уменьшить количество HTTP-запросов по картинкам до 2-х), а также сохранять в гиф-пнг с ограниченной палитрой (в фотошопе выбрать save to web as и поиграть с цветами и их количеством), то все будет грузиться аццки быстро и гораздо клевее.

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

Уясню для себя ход ваших мыслей:
а) У вас есть фон
б) вы хотите чтоб часть фона была ссылкой
в) вы делаете новый слой с картинкой части фона и накладываете его точно поверх.
Вы в принципе всё делаете правильно но могу упростить задачу. Делаете прозрачный gif, размером той части фона которая должна быть ссылкой, вместо того чтобы «Для начала вырезаем с помощью photoshop изображение логотипа, который должен быть кликабельным:».
Что мы в итоге имеем:
а) меньше гемора с точностью позиционирования.
б) облегчаем суммарный вес картинок на сайте.

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

Я пользуюсь таким же вариантом как и angelZ. Если хотите могу дать ссылку на статью, где я это расписывал!

WebMast, можешь оставить ссылку в комментариях дабы не только я мог воспользоваться этим методом.

А ещё, это можно сделать средствами HTML:
Пусть мы имеем картинку 100*100 и нам надо сделать ссылкой прямоугольник м-у точками: 40;40 и 90;60
Тогда пишем:

Способ старый, но зато CSS не трогаешь, а эффект как от варианта с прозрачным гифом.

VaNToS, HTML в комментариях не хочет отображаться, напиши, пожалуйста, на мыло — stod84@gmail.com, я подправлю запись.

Мои решения вопроса:

0) Начнём со способа рассмотренного в заметке.

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

1) Проще всего действительно прозрачный gif (1х1 пиксель) — при этом всё делается так же, как описано в заметке, но не нужно ничего в фотошопе вырезать. Важно! задать размеры, чтоб gif потянулся на весь логотип.

Плюсы: просто и быстро; для пользователя всё замечательно.
Минусы: По логике вещей, логотип можно считать смысловым элементом страницы. При попытке, например, его «сохранить как» или распечатать страницу (если нет отдельного стиля для печати) логотипа не будет — как бы подстава получается.

3) Еще одна модификация способа из заметки: картика логотип аккуратно вырезается и сохраняется в png.

Плюсы: не нарушается логика (скорее семантика) страницы; если картинка немного съезжает в сторону — это незаметно. Все красиво.
Минусы: получаем проблему с форматом png в IE и еще несколько килобайт для пользователя (хотя некоторые утверждают, что png жмет даже лучше чем gpeg, но не знаю — точно не в фотошопе).

Вердикт — если семантика страницы не важна — используем прозрачный gif поверх, иначе играемся с png.

PS столько получилось, что стоит даже статью в своем блоге запостить 🙂

Kitich, я как увидел — был приятно шокирован! Спасибо за разъяснения. Действительно для отдельного поста материал:)
Я сам вообще не верстаю, но сталкиваюсь с шаблонами при разработке сайтов, поэтому привел вариант, который вижу наиболее часто. Бывало и с прозрачными gif, но это чаще используется для небольших иконок — карта сайта, домашняя страница, а вот лого постоянно оформлено в DIV, который поверх фона. В этом случае хорошо, что можно картинку сохранить.

Немного дополню, раз такое обсуждение. PNG действительно жмет лучше GIF для малоцветных изображений. Для этого в Photoshop’е надо сохранять Save as for Web и выбирать количество цветов в палитре, правильно подбирая также и способ рассеивания. Лучше jpeg точно — т.к. не проявляются артефакты при сжатии. С PNG-8 нет проблем ни в одном из новых браузеров, в т.ч. и в ИЕ6, выигрыш по сравнению со сжатым GIF — 5-10%, по сравнению с JPEG — больше. Если же нужна полупрозрачность (для лого обычно не надо), то действительно, будут проблемы с PNG-24.

Сохранение логотипа также вещь ненужная обычно, поэтому фон предпочтительнее все же. Кроме семантики, играет роль также и оптимизация — обычно блокируется параллельная загрузка более, чем 3х файлов, и CSS начинает грузиться почти сразу с HTML. И изображения в фоне грузятся быстрее — именно это нам и надо, чтобы отнести все картинки не оформления в «пост-загрузку» (условно говоря).

По map’ам тоже добавлю — не всегда можно сверстать все фоном. Вообще, мапы сейчас надо использовать только в одном случае — если мы хотим сократить колво изображений на странице, подключаемых через img. Это вполне нормальный подход.

Во всем остальном обзор методов — отличный.

ну PNG-8, как я понимаю, полупрозрачности не даёт 🙁
И все же где-то сталкивался с таким мнением: Фотошоп не использует всех возможностей PNG-24 — жмет не самым лучшим образом. Рекомендовался какой-то софт даже для работы с PNG, но я тогда не обратил внимание, к сожалению.

Про «пост-загрузку» спасибо. Встречался с таким мнением, но только теперь понял, почему так 🙂

А я просто обычно сам свои макеты собираю, так что приходится :).

Да, PNG-8 не доставляет. Но пихать 24 туда, где он не нужен — тоже не стоит :). По поводу жмет не лучшим образом — возможно, еще 5-10% можно сэкономить, так что если вспомнишь, какой софт — опиши в своем блоге (я подписчик уже, да)))

С «пост-загрузкой», конечно, не все так просто. Я вот по материалам sunnybear, документов Yahoo и прочему пытаюсь дописать талмуд по оптимизации блога (в частности, Вордпресса), но вот с этим вопросом пока только вопросов больше, чем ответов.

Господа, прежде чем предлагать ПНГ24 (причём полученный на выходе из шопа) посмотрите статистику использования ослов 5-й и 6-й версий. К сожалению многих верстальщиков, включая меня, их использует большинство. А те танцы с бубном, необходимые для запуска альфа канала ИМХО не стоят тех килобайт и красоты.
Так что посмотрите какая прелесть этот пнг24, смахните скупую слезу и забудьте про него пока мир офисного планктона и тех у кого админы не позволяют ставить никакие другие браузеры кроме предустановочных (я не говорю про браузеры на движке осла) не пересядут как минимум на 7-го осла.)))

2 Kitich
Я думаю автор не будет против небольшого оффтопа. )))
А какое для вас решение нормальное? Ява?
И ещё вопрос, пнг в текстурном бакграунде?

to angelZ:
Не такие уж и с бубном )) Нужно один раз найти нормальное для себя решение и юзать. Но мы уходим в оффтопик. Обещаю прикрутить у себя на блоге комментарии за выходные 🙂

to angelZ:
К сожалению, не помню 🙁 последний раз действительно сталкивался с проблемой давно и это было на http://asu.ntu-kpi.kiev.ua

Тогда, помню, выяснилось, что популярные хаки, которыми я пользовался, криво работают (совсем неожиданный поворот) на Опере 🙂 В итоге потратил много времени, но что именно сделал — не помню. Надо будет покопаться и написать отдельно.
Проблема бекграунда, скорее всего, таким образом не решается, но утверждать не буду.

Я вовсе не против дискуссий)) Тем более таких интересных и полезных. Лично мне использование png не мешает, в принципе, там есть какой-то хак через htc файл, который я встречаю в большинстве последний сверстанных проектов.

Боянчег, но новичкам самое оно )

Как вариант, который я использую (кстати даже не прийдется ничего вырезать с помощью фотошопа, делать gif или png, если что-то, мне лень было читать все коменты, просто пробежлся и вроде подобного никто не предлагал=) ).

Вобщем суть такова — на div в background’e которого задана картинка, накладываем другой div с прописаным css-свойством position:absolute; в зависимости от того какую часть картинки, хотите сделать ссылкой подгоняете этот div на нужное место, (для удобства для начала задаем border:1px solid; чтобы было видно куда двигать 🙂 естественно затем убираем или же приравниваем к 0px) задаем высоту и ширину там же в CSS (Например: width: 150px; height: 36px;), затем уже в самом div’e прописываем событие onClick=»document.location=’index.php’» — это для примера index.php можно указать ссылку куда хотите =))). А да, и желательно бы к нашему div-ссылке 🙂 указать z-index какой-нибудь по выше чем 1 =).

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

обнуление этих значений можно провести через * < margin: 0; border: 0>🙂

Спасибо Вам огромное! Я с помощью Вашей статьи сделала новую шапку на свой сайт «В Полный Рост» — вот, посмотрите: enioway.ru
Теперь сайт загружается гораздо быстрее — еще раз, огромное Вам спасибо!

Давольно-таки интересно, но все это я читал, когда только открыл книжку по css.Статья для ленивых)

Спасибо, статья очень полезная, особенно для новичков. Вопрос: у меня рамка вокруг ссылки и в левом углу значок, типа изображение 🙁 Не подскажете как убрать?

Екатерина, нужно в файле стилей CSS найти тег «а» или класс, который для него определен, и отредактировать их.

так я в классе для хедера и ссылки хедера поставила значение border: none

div.art-Header-logo
<
position: absolute;
margin: 1px 445 93 13px;
z-index: 2;
>

или не здесь? или вообще везде, что касаемо тега «а»?

Речь идет о «моем книжном»? В каком браузере возникают рамка и значок?
Ил на хостинг залита версия без «артефакта»?

Да, о нем, но я пока тренируюсь на локалхосте, поэтому там ничего нет:) работаю в мазиле. Так что делать-то?

Просто сложно вылавливать подобные глюки, не видя всего кода — они могут возникать из-за других стилей или элементов кода, которые не видит никто кроме вас 🙂

И самый главный совет: скачайте для своего firefox (вот за что я люблю этот браузер) расширение firebug (https://addons.mozilla.org/en-us/firefox/addon/firebug/). Я сам всегда использую его для вылавливания ошибок верстки. Оно добавит внизу окна кнопочку и позволит проанализировать любые элементы страницы и стили, которые к ним применяются. Просмотрите стили вашей ссылки и внешних/внутренних по отношению к ней элементов — скорее всего, увидите, откуда берется лишняя рамка.

за расширение спасибо огромное))))удобно! но вот с рамкой болт 🙁 не выходит…

2. Предположим, что вы просмотрели с помощью расширения стили, примененные к ссылке и всем элементам, которые отображаются на экране в том же месте, и тоже не нашли никаких косяков.

Если вы не сделали чего-то из вышеперечисленного, делайте (хотя по пункту 2 сейчас пройдемся подробнее).

3. Переберите элементы, которые выводятся в нужном месте экрана (ссылка, изображение и все сопутствующие элементы) и найдите во вкладке «макет» firebug’а элемент с ненулевым border’ом. Если такой есть, перепроверьте еще раз стили, которые к нему применены.

4. Если такого элемента не нашли, проверьте соседние элементы — может туда попало что-то лишнее.

5. Возможно, дело не в border’е, а есть какой-нибудь внешний элемент с отступом и фоном, который создает эффект рамки.

5. Если ничего умного в голову больше не приходит (а пока не приходит), попробуйте использовать сброс стилей в начале css-файла (что-то типа http://meyerweb.com/eric/tools/css/reset/) — возможно браузер цепляет что-то свое.

Пока ничего больше не придумал 🙁

Спасибо большое за помощь:) Я начала все заново и внимательно-внимательно, и все получилось. Видимо по невнимательности и на уставшую голову:) Спасибо еще раз, пошла на паб переносить!

Поздравляю. Заодно чему-то новому научились )

Здравствуйте! Правильно ли я делаю? У меня не получается(((
В index.php у меня так:

В template.css так (в самом конце дописала):
.logo1 <
position: absolute;
margin: 1px 0 0 1px;
z-index: 100;
>

Ничего не изменяется почему-то(((

Сейчас как раз вожусь с лого. Пост в тему, буду разбираться.

Тоже думаю, как ссылку на изображение поставить, если оно описывается в CSS…попробую с прозрачным гифом сделать )))

Мил человек, большое тебе человеческое спасибо, 4 часа перебирал уроки всяких криворуких и только этот блог смог хоть чем-то помочь, спасибо-спасибо!

А как сделать кликабельной картинку НЕ прямоугольной формы? Например, треугольную?

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

Kitich, спасибо, это оно! Минут 10 вспоминал как эти теги называются.

Ни как не могу сделать задний фон кликабельной ссылкой, как на кино порталах(

Фокус, рассмотрел решение этой задачи в этой статье.

Источник