Главная - Без рубрики - Бесплатные инструменты для дизайна – онлайн

Бесплатные инструменты для дизайна – онлайн

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

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

Речь пойдет о инструментах дизайна.

1.Pattern4u — Classic | Kollermedia.at

Ресурс с большим количеством готовых к использованию фоновых рисунков:

14

Здесь вы сможете найти большую коллекцию бесплатных фоновых рисунков различных цветков, оттенков и вариантов. В меню выберите раздел (Lined, Dotted, Squares, Classic, Dirty, Funky, Real), скачайте архив с паттерном.

Как его установить в своем шаблоне?

Чаще всего, – надо редактировать файл style.css. Если у вас используется фоновый рисунок наподобие скачанного (в архиве лежат картинки размером 74х74px) – найдите в вашем файле style.css блок свойств, который отвечает за свойства фона. Как вариант, чаще всего авторы шаблонов прописывают фоновый рисунок или цвет в селекторе BODY. Например, вот так:

[php] #body {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
background-image: url(‘images/Page-BgTexture.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
[/php]

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

В примере выше есть большая картинка по имени Page-BgTexture.jpg, и с помощью свойств она зафиксирована вверху и по центру, без скроллирования и без тиражирования.

Вам надо:

  • Заменить ссылку на имя своей картинки.
  • Убрать значение свойства “no-repeat” и заменить на “repeat”.
  • Удалить две последние строки.

Я показал вам выше пример селектора BODY с одной из шаблонов. Вот как он выглядит сейчас:

16

Я уменьшил страницу сайта. Вы видите, что стоит одна большая картинка в виде фона (вязальные клубки). Картинка размером 1980х1316px, весом – 533 Кб. Давайте попробуем ее заменить так, как я рассказал чуть выше.

Я скачал для примера фон размером 74х74px:

pattern

Загрузил картинку в папку шаблона /images.

Заменил ссылку на старую картинку – новой, pattern.gif

Удалил “no-repeat”, точнее – заменил на “repeat” (не размножать – размножать).

Удалил две последние строки в свойствах селектора BODY.

Получилось вот так:

[php] #body {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
background-image: url(‘images/pattern.gif’);
background-repeat: repeat;
}
[/php]

В итоге – фон сайта стал таким:

17

2. PatternCooler

На этом ресурсе вы не только можете скачать бесплатные фоны, но и создать свой собственный. Попробуйте в меню найти ссылку – Editor new и поэкспериментировать.

18

3. Stripemania — Полосатый генератор фона

Создайте свой полосатый фон. Наверняка, кому-то понравится такой вариант:

19

4. Tartan Designer

Еще один Онлайн ресурс. Тартановый фон – тоже очень красиво:

20

В следующий раз я вам расскажу о Онлайн-ресурсах, с помощью которых можно создавать варианты CSS-стиля для сайта, а также корректно обработать файл стилей.

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

www.x-host.ua — вы ищите хостинг для своего сайта? Еще не нашли? Тогда обратите внимание сюда. Один из лучших хостингов в Украине

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*