Фон для сайта
В сети Интернет существует громадное количество сайтов. Сколько же их конкретно, пожалуй, ни кто ответить не сможет. В наше время ни одна фирма или компания не обходится без своего сайта, каким бы родом деятельности она не занималась. Сегодня создать свой сайт, при желании, может каждый. Первые вопросы, которые приходят в голову при таком желании: “Как грамотно выбрать фон для сайта”.
Раньше при создании сайтов на задний фон ставили какой-либо сплошной цвет и особо над этим не задумывались. Сейчас же все изменилось, если, к примеру, у сайта в качестве фона изображение, то он выглядит намного привлекательнее. Поэтому задуматься есть о чем. Так как грамотно выбрать бэкграунд для сайта? Попытаемся в это разобраться.
Если в качестве фона выбрана картинка, то и область самого фона необходимо сделать значительной, иначе пользователь не сможет ее рассмотреть. Для этого придется принести в жертву область текста, сделав ее более узкой. Перегибать палку с уменьшением области текста, превращая ее в газетную колонку, тоже не стоит. Необходимо подобрать оптимальный вариант и не забывать, что посетители заходят почитать текст, а не посмотреть на фон сайта.
Как вариант, можно сделать картинку фона видимой лишь в шапке сайта и его подвале, по бокам увеличить область текста, здесь же продемонстрировать лишь орнамент или узор фона. Если взять такой вариант оформления за основу, то область шапки сайта и область подвала надо будет делать глубокими.
При желании в качестве фона можно использовать анимацию. Такой фон для сайта сделает ресурс живым, смотрится к тому же довольно стильно и не напрягает глаз. У такого анимационного фона есть одна отрицательная особенность, он отвлекает от чтения контента. Если вы хотите, чтобы посетители сайта читали контент внимательно, то от анимационного фона лучше отказаться.
Фон должен подходить к тематике сайта. Если в качестве фона выбрана картинка, то она должна соответствовать тематической нише сайта.
Фотографические изображения, используемые как фоновые изображения для сайта, смотрятся гораздо лучше, чем нарисованные. При использовании в качестве фона какого-либо изображения, необходимо максимально уменьшить вес картинки. Таким образом, фон не будет нагружать сайт. Также не будет лишним проанализировать постоянную аудиторию сайта. Если в большинстве своем это окажутся люди, у которых слабое интернет-подключение, то от картинки лучше отказаться и использовать как фон для сайта бесшовную текстуру или однотонный цвет.
www.aduvan.ru
15+ ресурсов в помощь дизайнеру
Фоны для сайтов и блогов, а еще и бесплатные — всегда необходимый и полезный источник для веб-дизайнера. Согласитесь, иногда так тяжело найти именно то, что необходимо в данную конкретную секунду для текущего проекта. Поэтому наличии набора сайтов, где можно скачать бесплатные бэкграунды — никогда не помешает. Именно поэтому предлагаем вашему вниманию подборку сайтов с бесплатными образцами фонов для сайтов.
Dinpattern
Portfelia
Pixeldecor
Donbarnett
Kollermedia
Alice-grafixx
Squidfingers
Everydayicons
Colourlovers
Deviantart
The Design Inspiration
Ava7
Patterncooler
Fractured-sanity
Patterrific
Patternhead
Автор: Дежурка
Также вам могут пригодится:
www.dejurka.ru
Фон — Backgorund для сайтов — Online сервисы
Backgorund — один из первых элементов дизайна сайта. Создание фона для сайта должно происходить в совокупной прорисовке всего дизайна в графическом редакторе.Но иногда бывают случаи, когда срочно нужна фоновая подложка. Для таких случаев и для новичков в веб дизайне предлагаю подборку online сервисов по фонам (Backgorund).
Генераторы фонов:
http://www.stripegenerator.com/ — Один из самых известных «генераторов полос».
http://www.stripemania.com/ — Для поклонников полосок.
http://www.tartanmaker.com/ — Генерирует достаточно необычные узоры.
http://www.ogim.4u2ges.com/gradient-image-maker.asp — Хороший редактор фона.
http://lab.rails2u.com/bgmaker/ — фон из вашей картинки
http://www.tilemachine.com/ — Редактор + База фонов.
http://bgmaker.ventdaval.com/ — Пиксельный редактор в реальном времени. (удобно)
http://bgpatterns.com/ — Фоны из иконок.
http://www.colourlovers.com/patterns/add — Редактор красивых фонов
http://stripedbgs.com/ — Очень простой редактор фонов
http://www.pixelknete.de/dotter/ — Редактор с просмотром фона
http://mudcu.be/bg/ — цветной генератор
http://repperpatterns.com/tool/ — мультяшные bg
Базы готовых фонов:
http://www.patterncooler.com/ — Отличный выбор фонов.
http://www.dinpattern.com/ — База фонов.
http://patterns.ava7.com/ — Удобная база с фильтром цветам и узорам.
http://thedesigninspiration.com/category/patterns/ — Большая база фонов.
http://browse.deviantart.com/resources/applications/patterns/ — Есть интересные фоны.
http://everydayicons.jp/patterns.html — Небольшая подборка хороших фонов.
http://www.squidfingers.com/patterns/ — Бесконечные узорные фоны.
http://alice-grafixx.de/patterns — База разнообразных фонов.
http://www.kollermedia.at/pattern4u/ — Фоны по жанрам узоров.
http://donbarnett.com/tiles/tile.htm — Оригинальный сайт с оригинальными фонами.
http://www.pixeldecor.com/patterns.shtml — Небольшая подборка фонов.
http://patterrific.com/category/patterns/ — База Бэкграундов
http://www.noqta.it/dromoscopio/ — База фонов для сайта
http://www.portfelia.com/ — база фонов
http://www.brusheezy.com/patterns — Backgorund для сайты
http://www.stm.dp.ua/web-design/color-site.html — Однотонный цветовой фон
http://subtlepatterns.com/ — хороший набор паттернов
http://hotbliggityblog.com/ — фоны для блогов
http://patternhead.com/ — небольшая база фонов
http://lostandtaken.com/gallery — Платные и Бесплатные фоны
Background в CSS
Свойство background позволяет установить одновременно до пяти характеристик фона: background: [background-attachment || background-color || background-image || background-position || background-repeat] | inheritbackground-attachment — привязка. По умолчанию задано scroll — фон перемещается при прокрутке вместе со страничкой. Можно зафиксировать его, задав fixed.
background-color — цвет фона. Выбирается из обычной палитры цветов;
background-image — картинка для фона. Указывается адрес файла изображения;
background-position — расположение фонового рисунка: в центре, слева, справа, снизу или сверху.
background-repeat — повторение выбранной картинки.
background-size, появившееся в css3. позволяет растянуть фоновое изображение до нужного размера (можно задавать значения в пикселях, в процентах от контейнера, чьим фоном оно является, «уместить» его в данный контейнер (cover), а также растянуть по высоте или ширине контейнера(contain).
«Если с фоновыми изображениями требуется задать цвет фона , он указывается в последнюю очередь.»
И на по следок рекомендации по background
0) Используйте оригинальные (не cкаченные) фоны для сайта1) Фон должен сочетаться со всеми элементами сайта (ваш кэп)
2) Не используйте яркие, ядовитые цвета фона.
3) Не используйте сложный рисунок.
4) Шрифт на фоне должен быть читабельным и не напрягать зрение пользователя.
5) Совсем не знаете какой фон выбрать? — оставьте белый — это классика (или светлые тона).
6) Цвет фона должен успокаивать зрения, (или хотя бы не напрягать его).
7) Фон не должен отвлекать на себя много внимания от содержания (сверх красивый или необычный рисунок — не вариант для фона).
8) Не используйте анимированный фон! — нет, нет это не красиво. Да я знаю о чем говорю =)
9) Используйте простой, но оригинальный фон, который позволит легко воспринимать контент сайта. P.S: От фона зависит половина восприятия юзерами всего сайта, отнеситесь к выбору фона должным образом, удачи.
*Не используйте ветку для набора постов — благодарю.*
www.nulled.cc
Фон для сайта, css фоны для сайта, онлайн сервисы фонов для сайта
Здравствуйте, сегодня хочу поделиться с вами сайтами, где можно бесплатно скачать/создать фоновые изображения для сайта (паттерны), векторные изображения для фона сайта, CSS фоны для сайта, а также приведу пару онлайн-сервисов – генераторов фонов для сайта.
Скачать исходники для статьи можно ниже
Сайты, где можно скачать изображения для фона сайта.
1. “pattern8.com”
Все фоны для сайта бесплатны и бесшовные!
Ресурс ведется аж с 2008 года, правда в последнее время новых паттернов нет, но старых – достаточно много.
Процесс скачивания фоновых картинок достаточно прост – без сторонних сайтов – выбираете нужный паттерн и жмете кнопку Download:
2. “free-patterns.info”
Много бесплатных бесшовных фонов для сайтов.
Чтобы скачать паттерн – нужно поделиться сайтом в социальных сетях – нажать на кнопку социальных сетей – после чего появиться кнопочка Dounload!
3. “dinpattern.com”
Много бесплатных бесшовных фонов для сайтов.
4. “brusheezy.com/patterns”
Много бесплатных бесшовных фонов для сайтов.
5. “webdesignledger.com/freebies/200-beautiful-seamless-patterns-perfect-for-web-design/”
Много бесплатных бесшовных фонов для сайтов.
6. “all-free-download.com/free-vector/pattern.html”
Здесь есть как бесплатные фоновые изображения, так и платные.
Бесплатных фоновых изображений множество, однако, перед установкой фона на сайт придется его обрезать, так как есть “шов” – белая полоса по бокам картинки.
Для удаления шва – можно воспользоваться встроенной функцией wordpress, но об этом в самом низу статьи.
Как сохранить изображение – достаточно просто – открываем нужное, кликаем по нему правой клавишей мыши и сохраняем.
7. “cp.c-ij.com/en/contents/3125/list_45_1.html”
Множество бесплатных паттернов, единственный минус они представлены в формате А4 и в формате PDF.
Формат PDF – не проблема – есть бесплатные онлайн сервисы по преобразованию PDF в JPG – например: “smallpdf.com/ru/pdf-to-jpg”.
8. “pinterest.com”
Здесь можно скачать достаточно хорошие фоны для сайта бесплатно, например вот по такому запросу:
“pinterest.com/anniejovan/free-scrapbook-paper/”
Скачать паттерн можно правой клавишей мыши.
9. “layoutparablog.com/search/label/background”
Здесь можно найти интересные паттерны для сайта.
10. “subtlepatterns.com/thumbnail-view/”
Здесь можно найти черно-белые паттерны (фоны) для сайта.
11. “colourlovers.com/patterns”
Здесь вытаскивать паттерны придется через правую клавишу мыши – далее “Просмотр кода элемента” (в Яндекс браузере) – ищем ссылку на изображение и скачиваем на комп.
CSS фоны для сайта
1. “lea.verou.me/css3patterns/#”
2. “css3pie.com/demos/gradient-patterns/”
Онлайн-сервисы по созданию фона сайта.
– “patternizer.com/izfa”
– “repperpatterns.com/tool”
– “bgpatterns.com”
– “pixelknete.de/dotter/”
– “bgmaker.ventdaval.com”
– “tartanmaker.com”
– “stripegenerator.com”
– “stripemania.com”
– “colourlovers.com/seamless”
– “subblue.com/projects/guilloche”
– “stripedbgs.com”
– “patternify.com”
и др.
Встроенные инструменты wordpress для редактирования фона:
1. Масштабирование фона:
Если вы, наконец-то, нашли фоновую картинку для сайта, но вам кажется, что ее рисунок слишком большой/маленький – то это легко можно исправить.
Например мы загрузили фоновую картинку на сайт, установили её в качестве фона сайта (Внешний вид – фон) и у вас получилось что-то такое:
Но вам кажется, что листики слишком большие (
Чтобы это исправить переходим обратно в пункт “Медиафайлы” – в подпункт “Библиотека”, находим фоновую картинку – нажимаем на нее, а далее жмем кнопку “Редактировать”:
И справа у вас появиться пункт “Масштабировать”:
Изначально у меня стоит 166*166 пикс. – поменяем на 100*100 пикс.
Далее опять установим фон сайта (Внешний вид – Фон), выбрав наше измененное фоновое изображение (100*100 пикс.) и посмотрим как будет выглядеть сайт:
2. Удаление шва (поле по бокам) фонового изображения:
При редактировании медиафайлов в wordpress можно воспользоваться инструментом – “Обрезать”.
Для того, чтобы обрезать изображение, нажмите на него и выделите нужную часть, удерживая левую кнопку мыши, а затем нажмите на кнопку “Обрезать”:
PS: Если вы знаете другие сайты (источники), где можно бесплатно скачать/создать фоновые изображения для сайта – то укажите их в комментариях.
mnogoblog.ru
Анимационные фоны для сайта
Доброе время суток. Перед Вами очень хорошая сборка анимационных фонов для сайта в семи разных вариациях. Анимация в основном связана с передвижением, появлением и исчезновением фигур, слов или рисунков. Я буду описывать каждый эффект по отдельности и внизу каждого анимационного фона будет кнопка «Демо» и кнопка «Скачать», а в низу сайта кнопка для скачивания всех вариаций + бонус: одностраничник, на котором все эти фоны представлены на одно странице. И так, поехали:
Анимационный фон, который я назвал «Кругляшки»
У нас на фоне стоит изображение, которое автоматически подгоняется под разрешение монитора, а на этом фоне «плавают» прозрачные круги разных размеров. Они то появляются, то исчезают. Появление, передвижение и исчезновение абсолютно рандомное. Смотрится стильно, глаз не напрягает и может сделать Ваш сайт более живым. Только прошу — не ставьте такой анимационный фон на все что угодно, так как если сайт чисто информативный и на нем много информации, именно текстовой, то такой фон будет немного отвлекать и рассеивать внимание.
Скачать Demo
Анимационный фон «Звездное небо»
Реализация звездного неба с помощью jquery, html и css. Анимация достаточно качественная, можно заменить фоновую картинку на ночное небо и эффект будет еще круче. Пробуйте :))
Скачать Demo
Фоновый эффект «Квадратики»
Неплохой эффект 3D, особенно с тем изображением, которое уже стоит в демо версии. Может показаться топорно, но вы всегда можете поэкспериментировать и сделать с помощью css квадраты или другие фигуры и сделать так, как вам нравится. Данный анимационный эффект работает по такой же схеме, как и остальные эффекты.
Скачать Demo
Анимация фона треугольниками
Наверное самая неудачная реализация этого эффекта, но кому то может пригодиться!
Скачать Demo
Анимационный фон под кодовым названием «Слова»
Пошло что-то новенькое. Здесь реализована анимация слов, которые можно менять в js файле. Смотрится интересно и думаю многим может пригодится. Думаю, что вариантов использовать такой фоновый эффект на сайте масса. Забираем!
Скачать Demo
Фоновый эффект с ласковым названием «Пузырьки»
Приятный фоновый эффект, наподобии пузырьков. Они увеличиваются в размерах, а потом пропадают Действительно создается впечатление, что это лопаются пузырьки.
Скачать Demo
Самый интересный анимационный фон «Рисунок»
Подобно, развивающейся на ветру, ленточке этот фоновый эффект создает впечатление, что эта «фигура» рисуется в онлайн режиме. Красиво переплетаясь, этот рисунок имеет свойство увеличиватся в размерах и примерно через минуту он покроет всю поверхность фона. Смотрите демо и скачивайте!
Скачать Demo
Не думаю, что вы никогда не искали что то подобное, вот мне лично всегда хотелось какие то промо сайты украшать анимационным фоном примерно таким, как «Кругляшки». В этой сборке вы найдете фоновый эффект под себя.
А это как раз то, о чем я говорил. Если вы нажмете на «Демо», то попадете на страницу с полноценным сайтом одностраничником, где представлены все варианты-эффекты анимации фона в этой статье. А если нажмете на кнопку «Скачать», то скачаете архив со всеми вариантами анимационных фонов и плюс шаблон сайта одностраничника. Всего хорошего!
bayguzin.ru
Красивые фоны для детских сайтов
Красивые фоны для детских сайтов
Бэкграунды 03.09.2016Красивые фоны для детских сайтов помогают понять случайному посетителю сайта куда он попал, так как задний фон задает тематическую принадлежность сайта и если он в меру, по детски веселенький, то еще и позитивно влияет на настроение. При выборе фона, важно чтобы он гармонировал с общей стилистикой сайта и не был чересчур ярким. Если к примеру детские шаблоны сайтов стилизованы в постельных тонах, в этом случае яркий, задний фон будет преобладать над контентом, что конечно же не правильно.
Поэтому, правильный выбор фонов особенно касается детских сайтов, так как посетителями могут быть как мамы и папы, так и дети, для которых вам важно сохранить приятное впечатление о своем сайте. Поэтому фон для детского сайта нужно подбирать внимательно, пробуя разные варианты. Нужно помнить, что фон сайта является вспомогательным и не должен забирать на себя все внимание посетителя сайта, концентрируя его на содержании (контенте сайта).
Ниже представлена коллекция из бесшовных фонов для сайта детской тематики. Бесшовные, означает, что фон может повторяться в любую сторону и шва между картинками не будет видно, так как линии и цвет на границе картинки, будет четко совпадать с предыдущей.
Фон детские рисунки на стене
Детский фон самолетики в голубом небе
4 детских бесшовных бэкграунда
Мультяшный фон детские самолетики
Детский фон девочка, цветы и зайчик
Фон для детского сайта Девочка и кролик
Нарисованный детский фон веселые ребята
Фон нарисованный цветными карандашами
Разноцветный детский фон игрушки
Веселый детский фон с животными для сайта
Детский фон аист с новорожденным
Детский фон игрушки для малышей
Бежевый фон для детского сайта летний дождик
Фон для сайта счастливое детство
Выводы
Для интернет магазинов детских товаров лучше использовать неяркие, пастельные фоны. Если вам понравился какйто фон из представленной коллекции, вы можете увеличить его прозрачность до 60-80% чтобы картинка стала не такой яркой. Для обычных сайтов и блогов подойдет любой детский фон.
Поделиться!
Еще статьи по теме
i-won.ru