Как создать красивый фон для сайта?

Прочитав эту статью, вы узнаете, как создать красивый фон для сайта, как изменить фон сайта и многое другое. Мы будем использовать технологии HTML+CSS и программу Adobe Photoshop.

Завтра мы начинаем изучение HTML, и начнем с первого тега TITLE (подпишитесь, чтобы его не пропустить). Этот тег отвечает за заголовок окна браузера. Также разберем влияние этого тега на ваш сайт, относительно привлечения трафика.

Есть несколько способов получить фоновое изображение: создать самому и скачать уже готовые фоны. Мы рассмотрим оба варианта. Начнем с первого, создание фона в фотошопе. Я покажу самый простой способ создания фонового изображения в фотошопе.

Итак, открываем фотошоп и создаем новый документ любым, например 300×300. Цветовой режим поставим 8 бит, чтобы изображение весило меньше и быстрее загружалось при загрузке сайта. Вы можете поставить 16 или 32 по вашему усмотрению.

Создание фона в фотошопе

Теперь выберите инструмент «Кисть (B)»:

Создание фона в фотошопе

Щелкните правой кнопкой мыши по любому свободному месту на рабочем документе и выберите кисть в форме звезды размером 24 или 29 пикселей:

Создание фона в фотошопе

Теперь можете пощелкать левой кнопкой мыши в области документа, чтобы посмотреть, как работает кисть. Меняя основной цвет в палитре цветов и размер кисти, изобразите, что-то подобное:

Создание фона в фотошопе

Теперь сохраните это изображение, выбрав из главного меню команду «Файл» — «Сохранить для Web и устройств» или нажмите сочетания клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно, в котором вам необходимо выставить следующие настройки, перед тем, как сохраните изображение (эти настройки я выставляю как рекомендуемые, по желанию можете их поменять):

Создание фона в фотошопе

Нажмите кнопку «Сохранить». Сохраните фон под именем «fon1.png». Все, фон готов! Вот такой простой, легкий фон готов. Сейчас мы не будем его подключать, а создадим еще один, очень простой фон, но в тоже время очень стильный.

Создаем новый документ размером 3×3. Настройки оставляем те же, что и в первом документе. Увеличиваем созданный документ до предела (3200%). Выбираем инструмент «Карандаш (B)»:

Создание фона в фотошопе

Теперь можете выбрать цвет вашего фона, я выберу светло-серый цвет, вы можете выбрать любой, но не сильно яркий. Размер карандаша должен быть 1 пиксель. Изменить его можно так же, как меняли кисть — правой кнопкой мыши. Рисуем так, как показано на рисунке ниже.

Создание фона в фотошопе

Сохраняем его так же, как и предыдущее изображение, только под именем «fon2.png».

Теперь у нас готово 2 фона собственного производства. Теперь давайте подключим эти фоны к сайту. Делать это мы будем с помощью HTML+CSS.

Создайте 2 файла: «index.html» и «style.css». Оба файла должны быть созданы в кодировке UTF-8. Если не знаете, как создавать такие файлы, то об этом я напишу чуть позже (подпишитесь, чтобы не пропустить статью).

Код, который должен содержать файл «index.html» приведен ниже:

ЭТО ВЕСЬ НАШ САЙТ, ЕГО СОДЕРЖИМОЕ И Т.Д.

Код, который должен содержать файл «style.css» приведен ниже:

Теперь поясню некоторые фрагменты кода. Думаю, что с HTML все понятно, но все же вкратце:

  • </code> определяет настройки браузера для текущего html-документа</li>
    <li>тег «<code>…
    » содержит служебную информацию
  • тег «» содержит тело документа. В нашем случае он содержит тег «
    </code>» с универсальным идентификатором «<code>id="mainsite"», в котором будет находиться наш импровизированный сайт (это обычный белый блок, для наглядности фона)

Теперь переходим к файлу «style.css».

Этот код подключает к тегу «» фоновое изображение для сайта с помощью свойства «background». Вместо слов «адрес до изображения» укажите точный путь до вашего изображения. Т.к. у меня изображение лежит там же, где и основные два файла, мой адрес будет выглядеть так:

Не забывайте указывать расширение файла.

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

 

» с идентификатором «mainsite». В CSS я прописал следующее:

  • div#mainsite – определяем, что необходимо найти тег «div» с идентификатором «maainsite» и применить к нему свойства прописанные в фигурных скобках:
  • margin: 0 auto; — выравниваю белый блок по центру
  • margin-bottom: 25px; — отступ белого блока снизу от окна браузера 25 пикселей
  • margin-top: 5px; — отступ белого блока сверху от окна браузера 5 пикселей
  • width: 70%; — ширина белого блока будет занимать всего 70% от 100% окна браузера
  • height: 1000px; — высота белого блока равна 1000 пикселей
  • background-color: #fff; — цвет фона белого блока белый
  • border: 1px solid #ccc; — блок имеет рамку в 1 пиксель сплошную серого цвета

Теперь можете запустить файл «index.html» и посмотреть, что получилось.

Чтобы изменить фон сайта необходимо просто поменять имя подключаемого изображения в блоке свойств CSS:

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

Цвет можете менять на ваше усмотрение. Очень хорошо просвечивает рельефность оранжевый цвет. И напоследок мне осталось посоветовать сайты, на которых можете найти себе интересный фон.

Первый сайт, расположен на бесплатном хостинге UCOZ, но фоны, которые предлагает сайт очень красивые: http://kub.ucoz.ru

Следующий сайт предлагает очень стильную и модную коллекцию фонов. Мне эти фоны очень понравились: http://web4diz.ru/download/fon/

Выбирайте понравившийся фон, скачивайте его и устанавливайте его для своего сайта. Как изменить фон сайта я уже рассказал выше, теперь все в ваших руках. Экспериментируйте!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 40 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Картинки и иконки для сайта на темном фоне
  • Стильный фон для сайта (часть 2)
Читатели оставили 30 комментариев к этой статье:
  • FeDDy@19.10.2011 в 03:35

    У меня все изображения лежат на сайте в папках, то как будет выглядеть путь до изобра жения? Как правильно его задать то?? Я задаю а там только крестик красный выводится и все, а самого изображение нет. Что делать то?

  • Олег Астанин
    Олег Астанин, 19.10.2011 в 06:38

    FeDDy@, ну а откуда мне знать, какие именно папки у вас есть и в каких папках лежат ваши изображения. Вам нужно прочитать статьи про относительные и абсолютные ссылки. И уже на основе полученных знаний правильно построить путь до ваших изображений.

    Ну, а, в кратце могу так сказать что если изображения лежат «глубоко» в папках, то путь может быть разный, например: /папка1/папка2/папка_с_изображениями/izobraj.jpg

    Или можете указать абсолютный путь к изображению указав и ваш домен:

    http://www.domen.ru/папка/еще_папка/image.jpg

    Еще может быть причина в том, что вы не аказали расширение вашего изображения. В таком случае оно не будет загружено. Проверяйте, читайте, пробуйте. Результатов жду в комментариях.

  • FeDDy@10.11.2011 в 04:39

    Все разобрался... Урок мне понравился... спасибо.

  • Наталья06.04.2016 в 14:15

    Кто не знает как сделать файл Index.html и Style.css в кодировке UTF-8, самый простой способ использовать текстовые редакторы. Оптимальные Notepad++ и Akelpad. Для вебразработчиков Notepad++ предпочтительнее. Обе программки бесплатные и легко находятся через поисковики. Установите программу, откройте, напишите код и нажмите Сохранить как в меню. Там в имени файла напишите Index.html или Style.css, в зависимости от того, какой файл создаете, поставьте в типах файлов "все файлы, выберите кодировку файла UTF-8 и кликните Сохранить. Вот и файл готов будет.

  • Татьяна06.04.2016 в 20:01

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

  • den114207.04.2016 в 22:48

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

  • mihcsa17.04.2016 в 20:54

    Норммально

  • Дмитрий17.04.2016 в 22:17

    Приветик. Ну наконецто наткнулся на то что мне действительно помогло. Все что ты выше описал конечно полезно, но я уже делал 2-3 сайта, и вот на тему автомобильного проката. И столкнулся с проблемой, что и на других сайтах есть такие же фоны, мониторят что ли? Спасибо, за информацию...

  • Володя19.04.2016 в 21:13

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

  • Яна24.04.2016 в 15:14

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

  • Рустам21.05.2016 в 12:31

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

  • Юрий28.05.2016 в 18:18

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

  • Роман Лигов30.05.2016 в 06:53

    Я пытался создать сайты через конструкторы сайтов, но они очень похожи на другие сайты, что меня очень огорчает. Создавать собственный сайт через PHP очень сложно, тем более если у тебя не опыта работы с ним.Даже если создать авторский дизайн, скорее всего что-то похоже уже есть у других.

  • Татьянка30.05.2016 в 15:11

    Очень актуальна тема. Вот подбираю готовый шаблон на Вордпресс. Но всю инфу записываю. Сайт этот у меня в избранных уже. Черпаю полезности одна за одной. хорошо админ открыт для общения. Отвечает на все вопросы и комментарии. Сайт живой и интересный. Рекомендую новичкам пройтись по всем страничкам

  • Екатерина09.06.2016 в 23:05

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

  • Инна15.06.2016 в 08:49

    Блин, для меня все это так тяжело, а очень хочется научиться всему этому, хочу создать свой небольшой сайт, пробовала много раз — но все никак ((( а деньги почему то жалко отдавать «дяде», когда можно это все самой сделать. Ну ничего буду дальше пытаться, может хоть с вашим руководством добьюсь желаемого успеха. Спасибо.

  • Дмитрий Ц20.06.2016 в 20:48

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

  • rom4ikh22.06.2016 в 01:51

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

  • Валентин23.06.2016 в 22:09

    Спасибо за информацию давно искал нормальную инструкцию о том, как сделать фон для сайта самостоятельно. Всё очень подробно и наглядно описано. Я еще новичок в деле сайтостроения, дизайна, оформления, но благодаря вашим уникальным инструкциям дело идет в гору! Сайт приобретает вполне достойный вид.

  • Олег Астанин
    Олег Астанин25.06.2016 в 23:26

    Валентин, если будут вопросы по фону обращайтесь!

  • Галина Гордеева10.07.2016 в 01:17

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

  • Евгения11.07.2016 в 20:55

    Спасибо большое за такую замечательную статью. Все доступно и понятно. Сейчас скачаю Adobe Photoshop и опробую)

  • Мартин16.07.2016 в 02:31

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

  • Татьяна22.07.2016 в 01:54

    Я добавлю эту статью в закладки, она мне пригодится. Моя сестра снимает короткометражки- триллеры, и я занимаюсь редактированием видео , в том числе и в Фотошопе. Там есть сцена, как героиня вытаскивает из себя нож. Сцена была снята с обычным ножом, нужно было нарисовать кровь на ноже и как она капает. Я покадрово все это рисовала. А теперь я узнала, что в Фотошопе можно создать фон — честно говоря, я об этом не думала. Теперь, если буду создавать сайт, открою вашу шпаргалку. Спасибо)

  • sasha28.07.2016 в 21:03

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

  • Самуил21.08.2016 в 03:50

    Хороший фон необходим для любого качественного сайта. Он является его лицом.

    В принципе ничего сложного в его создании нет, если немного поковыряться, но сперва, конечно, прочесть данную статью. Это азы, которые заинтересованному читателю знать просто обязательно.

  • Макс27.08.2016 в 15:20

    Именно таких советов никогда не слышал, тотчас же попробовал это сделать и вуаля! Всё заработало и стало очень привлекательным, так что эта страница уже в избранном. Надеюсь на продолжение!

  • sasha02.09.2016 в 22:37

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

  • Таня04.09.2016 в 21:25

    Я уже свой сайт на бумаге нарисовала. Страниц на 200 будет. Я копирайтер. И для меня не составит труда контент залить. а вот с фоном проблемка. Спасибо за советы

  • Владик15.09.2016 в 03:38

    Создание фона казалось бы и не такая уж сложная операция,но в реальности много в ней нюансов,вот сам когда этим занимался прочувствовал всё это) Здесь в даной статье много полезной информации которая дополнила ряд моих мыслей или напомнила забытое мною,спасибо

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter