Совет 1: Как сделать полупрозрачный фон

Изображения с полупрозрачным фоном изящно смотрятся на любом сайте за счет того, что кажутся будто бы выполненными из матового стекла. Такие картинки, частями просвечивающие фоновый рисунок веб-страниц, могут использоваться для навигации на сайте, а также как элементы логотипа или блоков ресурса. Наполовину прозрачный фон у любого изображения вы можете легко и быстро сделать в программе «Фотошоп».
Вам понадобится
  • - программа «Фотошоп»
  • - изображение, у которого необходимо сделать полупрозрачный фон.
  • - знать, как создавать новый слой
  • - уметь пользоваться инструментом «Заливка», чертить фигуры в фотошопе
Инструкция
1
Щелкните дважды по названию слоя с картинкой и в появившемся поле напишите любое новое название этого слоя. Это нужно для свободного перемещения этого слоя и получения прозрачного фона при удалении частей рисунка. Если у изображения уже есть непрозрачный однородный фон, то выделите его инструментом «Волшебная палочка». Для этого выберите этот инструмент на панели инструментов и щелкните мышкой по цвету фона, после чего выделятся все пиксели указанного вами цвета (по которому был произведен щелчок мыши) в пределах замкнутой области. Удалите выделенное, нажав клавишу Delete.
выделение фона инструментом «Волшебная палочка»
2
Если фон изображения неоднороден, то выделите саму картинку инструментом «Прямолинейное лассо» или «Перо». В случае выделения изображения инструментом «Перо» выложите нужный контур и при необходимости отредактируйте его инструметом «Перо+». При редактировании этим инструментом вы можете добавлять опорные точки щелчком мыши на линии созданного контура и, передвигая точки, менять его изгиб. Затем, не убирая курсор с контура, нажмите правую клавишу мыши и выберите «Образовать выделенную область». Растушевку установите на значение в 0 пикселей и поставьте галочку у параметра «Сглаживание». В результате этих действий контур будет преобразован в выделение. Удалите выделенное, нажав клавишу Delete.
Выделение самой картинки инструментом «Прямолинейное лассо»
3
Создайте новый слой и расположите его ниже слоя с картинкой. Наведя курсор на него, нажмите на левую клавишу мыши и, не отпуская кнопку, переместите курсор ниже слоя с изображением. Таким способом вы перетащите новый слой ниже слоя с картинкой. Ниже самого изображения создайте пока что непрозрачный фон нужного цвета и нужной фигуры.
создание нового фона на нижнем слое
4
В окне «Слои» при выделенном нижнем слое установите нужный процент его непрозрачности, перемещая рычажок в поле «Непрозрачность» и наблюдая за изменением прозрачности фона на картинке. Чем меньше будет значение непрозрачности, тем прозрачнее будет фон; чем больше - тем непрозрачнее.
регулировка непрозрачности слоя с <strong>фоном</strong>
5
Сохраните изображение с помощью команды «Файл-Сохранить как» в формате PNG, так как только этот формат способен передавать прозрачность и полупрозрачность картинки.

Совет 2: Как сделать картинку фоном для сайта

Перед многими владельцами сайтов возникает вопрос, как обновить сайт или привнести в него что-нибудь новое. Менять на сайте можно многое: шрифт, цветовую гамму, расположение информационных блоков, общий фон. В этой статье вы узнаете, как установить картинку в качестве фона для сайта.
Вам понадобится
  • Редактор html-кода
Инструкция
1
К изменению облика вашего ресурса можно пойти двумя путями. Первый - обратиться к специалисту (web-мастеру) и он за определенную плату внесет все необходимые изменения. Другой путь – сделать это самому. Для того, чтобы самостоятельно изменить внешний вид вашего сайта, вы должны изучить основы html–кода и воспользоваться одним из его редакторов.
2
Первое, на что следует обратить внимание перед тем, как установить картинку на сайт в качестве фона, это макет ширины сайта: фиксированный он или растягивающийся во весь экран. Если ширина фиксированная, то смело можете размещать картинку. Отображаться она будет у всех пользователей одинаково хорошо. Если сайт «резиновый», то изображение будет у каждого пользователя подгоняться под ширину экрана и может отображаться некорректно.
3
Итак, вы знаете ширину макета сайта. Подготовьте изображение для размещения. Загрузите его на сервер, где расположен ваш сайт. Картинка должна быть сохранена в одном из трёх форматов: jpeg, gif или png. Для корректного отображения фон должен быть по ширине таким же, как и ширина страницы.
4
Откройте в редакторе html-кода страницу, на которой вы хотите изменить фон. Найдите строку «background-image». Если такой строки нет, напишите её в поле тэга «body». Как на картинке.
В данном коде «url('images/bg.jpg')» - это путь к вашему фоновому изображению. Пропишите его. Сохраните изменения.
Как сделать <strong>картинку</strong> <em>фоном</em> для <b>сайта</b>
5
Откройте ваш сайт в одном из браузеров. Если путь к изображению указан правильно, вы увидите изменения.
Для редактирования html – страниц рекомендуется пользоваться программой Dreamweaver. Это мощный редактор, который позволит вам изменить многое на вашем сайте.
Обратите внимание
Для корректного отображения фон должен быть по ширине таким же, как и ширина страницы.
Совет полезен?
Для редактирования сайта пользуйтесь программой Dreamweaver.
Источники:
  • как сделать сайт картинки

Совет 3: Как сделать картинку полупрозрачной

Фотошоп открывает перед пользователями широкие возможности в обработке фотографий и рисунков – вы можете создать на выбранном изображении любой визуальный эффект, и количество этих эффектов ограничивается только вашим воображением, а также умением работать в Фотошопе. Одним из выразительных и красивых эффектов является прозрачность изображения. Умение делать фон фотографии прозрачным, а также уменьшать общую прозрачность рисунка поможет вам в дальнейшем редактировании изображений.
Инструкция
1
Откройте Фотошоп и загрузите фотографию или рисунок – любое изображение, которое вы хотите поместить на прозрачный фон. Нажмите Ctrl+O, чтобы выделить изображение целиком, а затем скопируйте выделенную область.
2
Создайте новый файл – откройте в меню File опцию New, и в окошке настроек выберите опцию Transparent. Созданный файл будет полностью состоять из прозрачного фона. Находясь на данном файле, нажмите Ctrl+V, чтобы вставить скопированную на предыдущем файле выделенную область. Ваше изображение в качестве второго слоя файла закроет прозрачный фон.
3
Выберите на панели инструментов любой инструмент, которым можно выделить те или иные области – вызовите их горячими клавишами M или W. Масштабируйте рисунок для удобства и выделите те области, которые вы хотите сделать прозрачными.
4
После того, как выделение будет готово, замкните его и нажмите Delete. Лишние фрагменты изображения исчезнут, и вместо них вы увидите прозрачный фон.
5
В некоторых случаях вам может потребоваться полупрозрачный рисунок – например, полупрозрачный текст может стать необычным украшением коллажа или веб-сайта, а также полупрозрачный текст можно использовать в качестве водяного знака. Для того чтобы нанести на фото полупрозрачный текст, откройте нужное изображение, а затем выберите в меню текстовый инструмент (Т).
6
Выберите нужный размер, шрифт и цвет, а затем поверх фотографии напишите нужный текст. В палитре слоев появится отдельный текстовый слой. Регулятор в строке Opacity в панели слоев сдвиньте до 30-40%. Вы увидите, как надпись становится полупрозрачной.
7
Для того чтобы при размещении в интернете прозрачность сохранилась, и рисунок не отображался некорректно, сохраняйте такие изображения в формате png.
Видео по теме

Совет 4: Как сделать прозрачный логотип

При создании логотипа весьма желательно иметь возможность сделать его фон прозрачным - в этом случае он будет более органично вписываться в любое оформление, будь то страница веб-сайта, документ в формате Word, флэш- или видео-ролик и т.д. Кроме того полупрозрачный логотип можно накладывать в качестве ватермарки на изображения и фотографии. Наиболее распространенный инструмент для проведения такого рода графических работ - Adobe Photoshop.
Инструкция
1
Запустите графический редактор и загрузите или создайте с нуля сам логотип - эта часть работы целиком зависит от ваших художественных предпочтений и исходных данных (названия компании, клана или организации, символики, которую надо разместить на логотипе и т.д.).
2
Поместите все слои psd-документа в одну папку - в этом случае отпадет необходимость регулировать прозрачность каждого слоя персонально, а можно будет делать это для всей папки целиком. Для этого щелкните в правой нижней части панели слоев пиктограмму, при наведении мыши на которую всплывает надпись «Создать новую группу», а затем выделите слои и перетащите их в созданную папку. Если в документе существует и фоновый слой, то его перемещать не нужно - оставьте за пределами папки.
3
Выключите видимость фонового слоя щелчком по пиктограмме с изображением глаза у левого края строки, относящейся к этому слою. Собственно, редактирование на этом можно заканчивать, если сам логотип должен быть непрозрачным, а прозрачным должен быть только его фон - в этом случае пропустите следующий шаг.
4
Выделите созданную папку (щелкните по ней курсором мыши), если необходимо логотип сделать частично прозрачным. Затем раскройте выпадающий список рядом с надписью «Непрозрачность» и с помощью ползунка подберите наиболее подходящую степень прозрачности логотипа.
5
Обрежьте лишнее пространство вокруг логотипа - так будет проще использовать его в дальнейшем. Раскройте в меню графического редактора раздел «Изображение» и выберите команду «Тримминг». В окошке, которое в результате откроется, поставьте отметку в поле «прозрачных пикселов» и нажмите кнопку «OK». Редактор сам изменит размеры в соответствии с шириной и высотой вашего логотипа.
6
Сохраните созданный логотип в собственном формате Adobe Photoshop. Этот файл вам понадобится в том случае, если потребуется внести какие-либо изменения. Диалог сохранения открывается нажатием сочетания клавиш ctrl + s.
7
Создайте оптимизированный файл с логотипом, который можно будет помещать в нужные вам документы. Для этого нажмите сочетание клавиш alt + shift + ctrl + s и окно оптимизации изображения откроется. Оно предназначено для того, чтобы вы имели возможность выбрать наиболее подходящий графический формат, и подобрали для него такие настройки изображения, которые дают оптимальное соотношение качества и веса создаваемого файла. Второй сверху выпадающий список содержит возможные типы файлов - выберите в нем либо gif, либо png. Эти два формата поддерживают прозрачность, в отличие, например, от формата jpeg. Имейте в виду, что формат png не всегда правильно отображается браузерами Internet Explorer. Затем убедитесь, что в чекбоксе «Прозрачность» выставлена метка и нажмите кнопку «Сохранить».
8
Укажите место сохранения в вашем компьютере и название файла логотипа, а затем еще раз щелкните кнопку «Сохранить».
Источники:
  • Просто о создании сайтов и баннеров
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500