Безплатни снимки, шарки, изображения за фон на вашия сайт

Сигурно ще се съгласите с твърдението, че дизайнът или визията на един сайт има също толкова голямо значение за бъдещето му, колкото и неговото съдържание. Но докато да създадете съдържанието на вашия сайт е сравнително лесно, то изработката на добър дизайн е свързана, от една страна с професионални познания и работа със специализирани програми за обработка на изображения и от друга - с използване на различни снимки, фонове, текстури и т.н. Тъкмо за последното бих искал да споделя с вас една колекция на Amanda от Blogger Buster от подбрани качествени сайтове, където можете да намерите огромно разнообразие от безплатни картинки, снимки и др. и да се възползвате от тях при създаването или дооформянето на визията на своя сайт. Вярвам, че тази колекция от сайтове за безплатни изображения ще бъде полезна не само на начинаещите и със сигурност ще спести на всеки много време от търсене и лутане сред морето от подобни платени и безплатни ресурси.

Големи фонови изображения

Големите изображения за фон, поставени зад основното съдържание на сайта, създават едно различно впечатление, особено ако самото съдържание на сайта не е много. Подобно решение се използва на страницата за вход в е-пощата на Yahoo!, както и на други големи или по-малки сайтове. Но да се снабдиш с качествено изображение с подобни размери и то точно да пасва на тематиката на сайта ти никак не е лесно (освен ако можете да си създадете сами). В списъка по-долу Аманда е събрала сайтове с изключително добри и разнообразни безплатни големи изображения.

Колекция от големи фонови изображения с контрастираща средна зона, в която да се постави съдържанието на сайта.

HOT Bliggity Blog

Shabby Blogs

Освен прекрасна колекция от контрастиращи фонове, в сайта ще откриете и много безплатни бутони, банери и други елементи за дизайна на един сайт.

The Cutest Blog on the Block

Dotty Dot Dot
Стотици големи фонове с възможност за преглед в пълния им размер

Jelly Pages
Богати на цветове фонове, организирани по категории и стилове

Blogger Blog Backgrounds
Малка колекция красиво илюстрирани фонови изображения

Фонове от единични или повтарящи се големи изображения

CG Textures

Огромна колекция от големи фотографии и текстури, групирани в категории

Texture Warehouse
Богата галерия от висококачествени фонови текстури, споделени в условията на Лиценз за Съзидателно Споделяне - Creative Commons License (Attribution-NonCommercial-ShareAlike 2.0).

Every Stock Photo
Невероятна търсачка за висококачествени изображения, публикувани за безплатно ползване. Просто я използвайте, за да намерите типа изображение, от който имате нужда.

Alice Graphixx
Десетки страници с висококачествени текстури и снимки.

Фонове от повтарящи се шарки и текстури

Популярен вариант за фон е използването на повтаряща се шарка или текстура. По-долу са изброени някои от най-добрите източници на фонови шарки за сайтове.

Koller Media
Съдържа широка гама от пълноцветни шарки.

Shizoo Design
Неизбродима колекция от прекрасни фонови шарки (с някои големи елементи в дизайна).

Din Pattern
Предоставя отлично подбрана колекция от качествени повтарящи се шарки, които да използвате в своите сайтове безплатно.

Squidfingers
Цели страници с разнообразни шарки за фон.

K10k
Почти 1000 безплатни пиксел-шарки за фонове от повтарящи се елементи.

milleseicentopercento
Малка на прекрасна селекция от фонови изображения.

Patterns of Change
Галерия от необичайни, но интересни шарки за фонове от Liza Phoenix.

BG-Repeat
Включва богата колекция от шарки и текстури.

Он-лайн инструменти за създаване на шарки

BgPatterns
Безплатен инструмент за създаване на шарки. С него можете лесно да създадете своя шарка по свой дизайн.

Colour Lovers
Една от най-големите колекции на създадени от потребители шарки за фон. Тук също можете да проектирате своя собствена шарка сами.

Надявам се, че горната колекция от безплатни изображения, шарки и текстури ще ви бъде полезна в постигането на дизайн за вашия сайт, с който да се гордеете.

Ще се радвам, ако споделите и други подобни места в Интернет, както и ако ме подкрепите и/или препоръчате този материал.

Направи си сайт - въпроси и трикове

Как да променя фона на сайта в blogger

Вече изяснихме, че блоговете в blogger позволяват пълна свобода по отношение това да бъдат персонализирани, тъй като можем не само да сменяме шаблона им, но и да модифицираме самия HTML код на страниците. Такава една персонализация е и промяната на фона (background) на шаблона. Защото използването на шаблони не означава непременно да ги използваме в цветовата гама, в която са създадени. И тъй като шаблонът може да има различни секции, ще разгледам как може да се смени фона, както ако е цвят, така и ако е изображение, за всяка една от тях.

Промяна цвета на фона или шрифтовете в страницата

Тази задача е изключително лесна за изпълнение, тъй като blogger предлага специално създаден модул, където лесно да дефинирате цветовете за фон или тези на шрифтовете за всички части, елементи и секции на страницата си.

Идете в Оформление -> Шрифтове и цветове. Вляво се намират всички използвани в сайта ви елементи, вдясно - техните цветови характеристики, долу - изглед на страницата, отразяващ промените, които правите. Можете да експериментирате неограничено, защото промените се отразяват в самата страница едва след натискане на бутона "Запазване на промените".

Промяна/смяна фона на страницата или на нейните секции с изображение

1. Подготовка

Тази задача изисква малко повече усилия и модифициране на самия код на шаблона, но в крайна сметка, не е кой знае колко сложна за изпълнение. Най-напред е нужно да си изясните за коя част на страницата искате фонът да е изображение. Всяка секция в страницата си има име:

1. Цялата страница: body {
2. Секцията с публикациите: #main-wrap {
   
3. Страничната лента: #sidebar-wrap {
   
4. Заглавката: #header-wrap {
5. Долния колонтитул (footer): #footer-wrap {
6. Други секции:#... {
   

Тези имена може и да се различават в известна степен или да са повече на брой, в зависимост от използвания шаблон. Важен е принципът. А той е, че всяка секция определя фона (цвят или картика) чрез функцията background:______; Например:

body {
background:$bgcolor;

или

#sidebar-wrapper {
background-color:#B38481;

и т.н.

След като вече сте наясно къде искате фонът ви да е картинка, трябва да осигурите и самото изображение. Да осигурите, означава освен да го намерите, още то да е с подходящ размер и да има видим Интернет адрес.

• Размер и управление на фоновото изображение

По подразбиране, поставеното като фон изображение, се самомултиплицира колкото пъти е нужно, за да запълни целия фон. Колкото по-малко е то, толкова повече пъти ще се мултиплицира и обратно. Затова е добре да съобразите неговия размер с пространството на секцията, за фон на която искате да го поставите. Една от лесните за ползване безплатни програми за обработка на изображения е IrfanView, но вие можете да използвате и всяка друга, която ви позволява да редактирате изображения.

От друга страна, вие можете да управлявате поведението на фоновото изображение. По подразбиране, фоновото изображение винаги се позиционира в горния ляв ъгъл на съответната секция, освен ако нейните настройки не указват друго. С няколко декларации в кода, обаче вие можете да накарате изображението да се "държи" по друг начин. Ето ви кратък списък на тези декларации:

1. да не се мултиплицира: background-repeat: no-repeat;
2. да се мултиплицира само хоризонтално: background-repeat: repeat-x;
3. или вертикално: background-repeat: repeat-y;
4. да се разположи на желана позиция: background-position: top left; (горен ляв ъгъл)
   други възможни позиции са: top center; top right; center left; center center; center right; bottom left; bottom center; bottom right;
5. да се разположи на точно определено място: background-position: x% y%; или xpx ypx;
   (x е позицията по хоризонтала, а y е тази по вертикала)
6. да е фиксирано на едно място, когато скролирате: background-attachment: fixed;

• видим Интернет адрес на фоновото изображение

След като сте подбрали желаното изображение и то е подходящо (или сте го направили подходящо) за секцията в страницата си, за която искате то да бъде фон, следва да му осигурите видим Интернет адрес. Един лесен начин - като го добавите в публикация в blogger - трик, който обясних по повод поставянето на предикона на сайта. Другите възможни варианти са свързани с предпочитано от вас място в Интернет, където можете да качвате изображения. Това, което ви е нужно, е URL-то на изображението.

2. Промяна/смяна на фоновото изображение

Е, вече сте на финалната права. Идете в Оформление -> Редактиране на HTML кода. Открийте кода на желаната от вас секция. Ако например говорим за фон на цялата страница, това е следният код:

body {
background-color:
...
}

Можете да го замените с този:

body {
background:#000000 url(http://адрес-на-картинка.jpg) no-repeat center center fixed;
}

който в разширен и по-прегледен вариант може да изглежда и така:

body {
background-color:#000000;
background-image: url(http://адрес-на-картинка.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

Модифицирайте кода, съобразно вашите нужди и желания и указанията по-горе. Когато сте готови, натиснете бутон "Визуализция", за да проверите дали всичко е така, както сте очаквали и когато всичко е наред, запазете промените.

Това е. Вярвам, че ще се справите. А при проблеми, винаги можете да ме потърсите.

Ако информацията ви е била полезна, подкрепете ме!

Направи си сайт - въпроси и трикове