Совет 1: Как сделать задний фон

Иногда возникает желание (необходимость) заменить фон на определенной фотографии. С этим делом поможет справиться широко известный продукт компании Adobe – Photoshop. Несмотря на то, что это довольно сложный графический инструмент, вам не потребуются дизайнерские таланты для изменения фона на фотографии. Используя простое руководство, вы сможете сделать красивую фотографию для рабочего стола или удивить необычным подарком ваших друзей и родственников. Не стесняйтесь экспериментировать и у вас все получится.
Измененный задний фон.
Вам понадобится
  • программа Adobe Photoshop (желательно свежая версию), исходная фотография, фотография с нужным фоном, терпенье и аккуратность.
Инструкция
1
Итак, запускаем Photoshop. Нажатием комбинации Ctrl+O, открываем нужные файлы. В качестве примера изображений для обработки были выбраны две фотографии. Обратите внимание на портрет девушки в белом, это фото было выбрано потому, что цвет силуэта человека контрастно отличается от заднего плана.
Как сделать задний <strong>фон</strong>
2
Рекомендуется использовать фото именно с такой цветовой схемой, так как это более удобно для выделения контуров. Фотография с фоном может быть любой, но подходящей эстетически. Желательно, чтобы размеры изображений были примерно одинаковыми.
Как сделать задний <strong>фон</strong>
3
На портрете нужно выделить человека. С этим нам поможет справиться инструмент «Магнитное лассо» (рис. 3), который расположен на левой рабочей палитре. На нижней стороне фотографии наведите курсор на край контура девушки. Затем кликните и плавно ведите курсор как можно точнее по контуру тела. Хоть «Магнитное лассо» и способно «прилипать» к краям изображения, делать движения нужно предельно аккуратно. Вы увидите, как автоматически появляются контрольные точки, чтобы добавить ее самостоятельно кликните левой кнопкой мыши. Если у вас выделение отклонилось от курса, можно сделать отмену действия: нажать Esc и начать с начала или нажать Backspace и вернуться к предыдущей точке. Чем контрастней рисунок, том быстрее вы справитесь.
Как сделать задний <strong>фон</strong>
4
Когда будет достигнута последняя точка, вокруг выделенной области замигает пограничная линия. Если вас не совсем устраивает качество выделения, можно его еще немного улучшить, для этого на выделенной области кликните правой кнопкой мыши и воспользуйтесь пунктом «Уточнить край» (рис. 4), поэкспериментируйте с настройками, чтобы добиться наилучшего эффекта.
Когда будет достигнут оптимальный результат выделения, вырежьте или скопируйте фрагмент исходной фотографии при помощи комбинации Ctrl+X или Ctrl+C. Потом откройте желаемый фон и вставьте выеденного человека туда комбинацией Ctrl+V.
Переключитесь на инструмент «Перемещение» и поиграйте с местом расположения.
Как сделать задний <strong>фон</strong>
5
Получившийся результат (рис. 5) сохраните в нужном месте и формате, используя для этого «горячие клавиши» Ctrl+Shift+C.
Как сделать задний <strong>фон</strong>

Совет 2 : Как сделать неподвижный фон

Фон веб-страницы может быть привязан к ее содержимому или вести себя независимо от него. В первом случае при прокрутке содержимого в окне браузера фоновое изображение тоже будет прокручиваться, а во втором оно может оставаться неподвижным. Для реализации фиксированного заднего плана страницы следует использовать язык описания стилей CSS - только он может гарантировать одинаковое поведение фона в разных типах браузеров.
Как сделать неподвижный фон
Инструкция
1
Воспользуйтесь имеющимся в CSS свойством background-attachment, чтобы указать должен ли быть фон страницы фиксированным или подвижным. Всего это свойство может иметь три значения - если вы не указываете никакого из них, то по умолчанию считается, что background-attachment имеет значение scroll. При таком значении фоновое изображение прокручивается вместе с контентом страницы. Значение inherit копирует поведение фона родительского элемента, а значение fixed делает фоновую картинку независимой от содержимого - оно оставаться неподвижным при прокрутке страницы. Его вам и следует использовать.
2
Подготовьте CSS-инстукции для использования в страницах, фон которых нужно зафиксировать. Если вы не будете помещать CSS-код во внешний файл описания стилей, то эти инструкции надо разместить между открывающим и закрывающим тегами style:<style type="text/css">
// здесь будут описания стилей
</style>Описание поведения фона страницы надо привязать к элементу BODY - в терминологии языка CSS он будет называться «селектором» и записываться будет так:BODY {
// здесь будут описания тела страницы
}Свойства, относящиеся к этому селектору надо разместить внутри фигурных скобок, разделяя их точкой с запятой:BODY {
background-attachment: fixed;
background-image: url(images/BG.gif);
}Первая строка фиксирует фоновое изображение, а вторая указывает адрес файла, содержащего фоновую картинку, относительно адреса страницы. Эти две строки можно записать и в одной сложной CSS-инструкции таким образом:background: url(images/BG.gif) fixed;
3
Вставьте весь код для фиксации фона в текст страницы. В законченном виде он может выглядеть, например, так:<style type="text/css">
BODY {background: url(images/BG.gif) fixed;}
</style>Разумеется, вам надо заменить адрес размещения и название файла фоновой картинки. Код лучше поместить перед тегом </HEAD>, хотя это и не обязательное условие.
Видео по теме

Совет 3 : Как задать цвет фона

Как правило, базовый цвет фона веб-страницы задается с использованием языка описания стилей CSS (Cascading Style Sheets - «каскадные таблицы стилей»). Реже для этого используются возможности языка HTML (HyperText Markup Language - «язык разметки гипертекста»). Иногда элементы описания CSS помещаются внутрь HTML-тегов.
Как задать цвет фона
Инструкция
1
Используйте атрибут bgcolor тега body, если хотите максимально упростить процедуру указания фонового цвета и свести к минимуму изменения в исходном коде. Описание всех элементов страницы помещается в исходнике страницы внутрь блока HTML-кода, который начинается с тега <body> и завершается тегом </body>. Атрибут bgcolor указывается в открывающем теге и содержит именованное значение цветового оттенка (например, Red или Chocolate) или соответствующий ему шестнадцатеричный код цвета (#FF0000 или #D2691E, соответственно). В самом простом варианте такой тег может быть записан, например, так:<body bgcolor="Red">Или так:<body bgcolor="#FF0000">Оба варианта задают одинаковый красный цвет для фона документа.
2
Используйте свойство background-color, если хотите задать цвет фона документа при помощи языка описания стилей - этот метод применяется намного чаще. Блоки описания стилей могут быть либо включены в исходный код документа, либо записаны в отдельный файл с расширением css. Ссылка на внешний файл помещается в заголовочную часть страницы (между тегами <head> и </head>) и выглядит примерно так:<style type="text/css" media="all">@import "style.css";</style>Если же CSS-инструкции нет необходимости выносить в дополнительный файл, то @import "style.css"; надо заменить, например, таким тестом:body {background-color: Red;}Здесь body указывает, что инструкция внутри фигурных скобок, определяющая красный цвет фона, относится к тому самому тегу body языка HTML. И здесь существует несколько систем определения оттенков цвета, но чаще всего используются шестнадцатеричные коды:body {background-color: #FF0000;}
3
Замените свойство background-color на background для компактного описания более сложной фоновой структуры. Например, если кроме фона определенного цвета, в подложку документа надо поместить какой-либо рисунок. Такое описание может выглядеть, например, так:body {background: Red url(img/BGimage.gif) no-repeat;}
4
Подготовьте на основе выбранного вами варианта код, задающий цвет фона документа, и вставьте его в исходник страницы. Сделать это можно, например, с помощью онлайн-редактора страниц системы управления сайтом или в любом текстовом редакторе.
Видео по теме
Полезный совет
Определить шестнадцатеричный код цветового оттенка можно с помощью резидентных программ (например - ColorImpact, Ruler), либо с помощью он-лайн калькуляторов.
Источники:
  • Он-лайн конвертер цветовых оттенков в шестнадцатеричные значения

Совет 4 : Как зафиксировать фон

Иногда замысел дизайнера требует, чтобы фоновое изображение оставалось неподвижным при прокрутке посетителем содержимого страницы. Это можно сделать, изменив с помощью инструкций языка CSS (Cascading Style Sheets - «каскадные таблицы стилей») используемую по умолчанию установку поведения фона.
Как зафиксировать фон
Инструкция
1
Добавьте в веб-документ описание стилей для блока body, содержащее свойство background-attachment со значением fixed, и фон страницы будет оставаться неподвижным при прокрутке документа. Этот способ фиксации фона будет работать во всех браузерах, поддерживающих любой из ныне действующих CSS-стандартов, начиная с версии 1.0. Кроме значения fixed, для этого свойства стандартами предусмотрены еще два варианта - scroll и inherit. Если в описаниях стилей документа не указано никакого значения для background-attachment, то по умолчанию считается, что оно установлено в scroll. В этом случае фон будет перемещаться вместе с прокруткой содержимого страницы. Значение inherit указывает, что для свойства background-attachment этого элемента должно быть использовано то же самое значение, что и для его родительского элемента.
2
Дополните тег <body> нужной страницы атрибутом style и поместите в него описание стилей, фиксирующее фон. Например, это может выглядеть так:<body style="background-attachment: fixed">.Можно здесь же указать и адрес фонового изображения:<body style="background-attachment: fixed; background-image: url(img/pic.gif);">.Адрес и название картинки (img/pic.gif) замените вашими собственными значениями. Такой способ удобен тем, что требует наименьших изменений в коде страницы, однако чаще описание стилей выносят в отдельный блок в заголовочной части документа или даже в отдельный файл.
3
Если хотите использовать отдельный CSS-блок с инструкциями для фиксации фона страницы, то поместите перед тегом </head> исходного кода, например, такие строки:<style type="text/css">
BODY {background: url(img/pic.gif) fixed;}
</style>.Не забудьте указать правильное имя и адрес фонового изображения вместо img/pic.gif.
Видео по теме

Совет 5 : Как сделать фон страницы сайта

Сайт, как средство донесения информации, должен оставаться актуальным. Все содержимое страницы отвечает этим требованиям. Создание фона - это важная часть оформления всей композиции сайта в дальнейшем.
Как сделать фон страницы сайта
Вам понадобится
  • - любой графический редактор;
  • - изображение для фона.
Инструкция
1
Композиционно фон сайта не должен выходить на первый план и отвлекать внимание от информации, расположенной на странице. Выбирая изображение, руководствуйтесь правилами колористики. Подберите текстурированное изображение, в котором вы сможете в дальнейшем менять цветовую гамму, а не сюжет.
2
Загрузите графический редактор и создайте шаблон будущего фона. Работайте с файлом, где количество пикселей на дюйм будет превышать 800*600. Отрегулируйте яркость и контрастность изображения. Сохраните его в формате jpeg в наилучшем качестве.
3
В зависимости от такого, какой конструктор сайтов вы используете, последовательность действий может отличаться. Загрузите свой сайт и зайдите в меню редактирования. Проследуйте в закладку «Работа со стилем», перейдите в раздел «Образцы фона».
4
Перед вами откроется достаточно большой выбор стандартных вариантов фона. Пролистайте их до конца и нажмите на кнопку для загрузки своего изображения, далее кликните на кнопку «Обзор» и прикрепляйте созданный файл.
5
Подождите полной загрузки и не переключайте закладки в интернете. Отредактируйте изображение под формат вашей страницы. Выбирайте полное заполнение листа, закрепляйте фон для всех страниц сайта. Проверьте сочетание выбранного вами шаблона и фона, отрегулируйте общую гамму цвета и сохраните изменения.
Видео по теме
Полезный совет
Фоновое изображение должно быть простым и стильным, избегайте сложных сюжетов и композиций. Для посетителя сайта важна читаемость информации и логика перемещения по странице.
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500