Создание для сайта фона: Как добавить фоновый рисунок на веб-страницу?

Фон в дизайне сайтов и приложений

Фон—неотъемлемая часть сайта или приложения. Если он однотонный и не яркий, пользователи не придают ему значения и даже не замечают. Тем не менее продуманный фон улучшит общее впечатление о продукте, например, правильно подобранный контрастный цвет привлечет внимание, а изображение дополнит впечатления от текста.

В некоторых случаях продукт хорошо выглядит просто с белым фоном. Но часто стоит задача отделить блоки друг от друга и/или акцентировать внимание на каком-то из них.

Каким может быть фон:

• Однотонный фон

Яркий однотонный фон—хороший способ привлечь внимание к блоку, если правильно его подобрать, он обеспечит хороший контраст с текстом, привлекая к нему больше внимания.

Однотонный фон может быть неяркий, еле заметного оттенка, чтобы визуально разделить блоки.

Убедитесь, что цвета подходят к отрасли или используйте цвет фирменного стиля, если он есть. То же самое можно отнести и к градиентам.

Одноцветный контрастный фон разделяет блоки на сайте lalalab.ru

• Градиент

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

Притягивающий взгляд градиентный фон на сайте mobirise.com

• Фото

Красивые фотографии отлично подойдут, чтобы передать атмосферу и идею, усилить впечатление от текста.

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

Фото в качестве фона на сайте discoverireland.ie передает атмосферу путешествий

• Элементы фирменного стиля

Использование элементов фирстиля позволит подчеркнуть единство стиля, произведет впечатление аккуратного и точно выверенного продукта, где каждая деталь на своем месте. 

Фон с элементом фирменного стиля на сайте medatrium.ru

• Паттерн

Паттерн может быть частью фирменного стиля или подходящим к отрасли продукта.

Тематический паттерн на сайте туристической компании russiadiscovery.ru

• Текстура

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

Текстура рваной бумаги на сайте davidboylecpg.com выделяет блок с CTA

• Анимация

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

Анимация на сайте kikk.be/2020

Выводы:

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

• Красивые фотографии отлично подойдут, чтобы передать атмосферу и идею, усилить впечатление от текста.

• Элемент фирменного стиля на фоне позволит подчеркнуть единство стиля.

• Фон с паттерном или текстурой акцентирует внимание на специфике продукта.

• Анимация привлечет внимание к определенному блоку.

Как сделать видео-фон для сайта

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

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

Плюсы и минусы добавления видео-фона

Что касается плюсов видеофона, то первое, что приходит в голову, это очевидное — “это красиво”. При грамотной реализации фоновое видео оживляет сайт, позволяет посетителю сразу познакомиться с предоставляемой услугой — показать процесс производства, показать, что, зайдя на этот сайт, посетитель попал в реально-существующую компанию, которая готова показывать свой производственный процесс. Это повышает доверие.

На какие нюансы стоит обратить внимание при создании фонового видео

• Сфера, для которой делается видеофон. Необходимо понять, что именно вы хотите донести видеофрагментом, ведь если делать его “просто так, чтобы было” можно произвести неправильное впечатление и вызвать недоверие.
  Например, существует множество юридических сайтов, которые добавляют на фон совершенно абстрактные рукопожатия, подписание каких-то документов, словом, некие сущности, которые никак не выделяют компанию из ряда подобных и никак не вызывают чувство “знакомства” с ней после просмотра видео.



• Само видео, его монтаж и размер. Любой видеофайл — это дополнительное время загрузки сайта. Несмотря на то что сейчас многие пользуются высокоскоростным интернетом, не следует ставить на фон фрагменты большой длительности и большого размера — оптимальная продолжительность — 10-20 секунд, вес файла — не более 10 Мб.Стоит помнить, что фон является зацикленным, поэтому нужно предусмотреть, чтобы переход из окончания видеоролика в начало не выглядел резким, можно использовать плавное затемнение. Оптимальное разрешение — 1280 на 720 пикселей — оно хорошо отображается на большинстве экранов и не сильно искажается на больших мониторах. Сам видеоряд не должен быть резким, дерганным, с большим количеством смены планов и цветов, он должен показывать основные преимущества предприятия. Например, для художников — можно показать небольшие фрагменты создания картины, для крупных предприятий — моменты отлаженной работы заводских конвейеров. Существует важный совет, по поводу видеофона — на него стоит ставить видео, “которым вы гордитесь”. Ролик не должен отвлекать посетителя от главной цели, ради которой он зашёл на ресурс.



• Звук видео. Его не должно быть, стоит с этим смириться. Мало кому нравится, когда при просмотре сайтов возникают какие-то внезапные звуки или музыка. В случае необходимости в звуке стоит добавить кнопку, которая позволит посетителю самому при желании включить аудио.
• Техническая реализация. Размер файла — важнейший нюанс, и особенно это важно при работе с мобильной версией сайта, где скорость загрузки страницы наиболее важна. Стоит предусмотреть, что будет отображаться, пока не загрузится видео — например, фоновая картинка. Важно осознавать, что далеко не каждый мобильный браузер позволяет осуществлять автозапуск видеоролика на сайте.

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

Итак, о технической стороне вопроса дальше и пойдет речь.

Как вставить видео на фон сайта

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

HTML-разметка нашего элемента будет выглядеть вот так:

<div>     
 <video preload="auto" autoplay="autoplay" loop="loop" muted="" playsinline="playsinline" >         
  <source src="/video/our-video.webm" type="video/webm"> 
  <source src="/video/our-video.mp4" type="video/mp4">             
 </video> 
</div> 

У нас есть основной обертывающий блок с классом “video-box”, внутри которого располагается наше видео. Для самого тега “video”, находящегося внутри, указываем атрибуты preload и autoplay — для загрузки и автоматического воспроизведения видеоролика при открытии страницы и атрибут loop для циклического воспроизведения фрагмента. Также здесь присутствует атрибут playsinline для того, чтобы при воспроизведении видео на телефоне оно автоматически не переходило в полноэкранный режим (актуально, например, для устройства на ios) и атрибут muted для отключения звука.

Внутри тега видео указаны два тега с источником “source”. Рекомендуется всё делать именно в таком виде — указывать как минимум два видеофайла с разными форматами для разных браузеров.

CSS — стили для данного блока:

Для основного блока задаем позиционирование, ширину и высоту во весь экран, и картинку на фон, пока видео не прогрузится

.video-box { 
   position: fixed; 
   top: 0; 
   left: 0;  
   background: url(/images/video-bg.jpg) no-repeat #333333;  
   background-size: cover; 
   overflow: hidden;  z-index: 1; 
   width: 100%; 
   height:100%;
}

Для тега “video” также задаем позиционирование и размеры в соответствии с родителем

.video-box video {  
   position: absolute;  
   top: 0;  
   left: 0; 
   width: auto;  
   height: auto;  
   min-width: 100%;   
   min-height: 100%;   
}

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

@supports (object-fit: cover) {  
   .video-box video {    
      top: 0;    
      left: 0;    
      width: 100%;    
      height: 100%;    
      object-fit: cover;  
   } 
} 

Добавление youtube-видео на фон сайта

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

HTML-разметка в данном случае выглядит следующим образом:

<div>
     <div>
          <iframe src="https://www.youtube.com/embed/xxxxxxxxxxx?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&playlist=xxxxxxxxxxx" allowfullscreen>
     </div>
</div>

Здесь существует основной оборачивающий контейнер с классом youtube-video-background, внутри которого есть блок, собственно, содержащий внутри себя iframe, в котором указан источник видео — ссылка с youtube.

Ссылка на источник видео имеет несколько параметров, на которые нужно обратить внимание:

xxxxxxxxxxx — id видео (вставляется в двух местах ссылки)
controls=0 — скрывает youtube-панель
showinfo=0 — скрывает информацию о видео
rel=0 — скрывает показ рекомендованных видео после окончания воспроизведения
autoplay=1 — позволяет видео запускаться автоматически
loop=1 и playlist=xxxxxxxxxxx — включают зацикливание видео
start=0 — запускает видео с самого начала (при необходимости, можно указать любое время видео как стартовую точку воспроизведения)
mute=1 — отключает звука видео

Перейдем к стилям. Для основного контейнера устанавливаем позиционирование, а также картинку на фон, которая будет отображаться, пока не загрузилось видео:

.youtube-video-background {
  background: url(/images/video-bg.jpg) no-repeat #333333;  
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}

Для iframe и родительского div задаем позиционирование и отменяем любые действия при наведении на них мышкой:

.video-box,
.video-box iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

Добавляем несколько медиа запросов, которые будут отвечать за масштабирование видео при изменении размера экрана, в зависимости от соотношения сторон:

@media (min-aspect-ratio: 16/9) {
  .video-box { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-box { width: 300%; left: -100%; }
}

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

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

Идеи для видеофона на сайт

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

• Мастерские по производству мебели, обуви, предметов декора и т.д. — видео работы станков, инструментов в руках рабочих, красивый процесс производства

• Сфера туризма — яркие виды природы, эмоции путешественников

• Аренда авто, лодок, автобусов — видеоряд, показывающий удобство, хорошее состояние и внешний вид объектов

• Салоны красоты, фитнес-центры — красивый “проход” камеры по салону, показ комфортабельности, стильного интерьера

• Аренда, продажа недвижимости, коттеджи, квартиры — внешний вид объектов и территории вокруг

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

• Ручное производство (обувь, одежда, украшения, аксессуары) — видео, где эти вещи надеты на живых людях.

• Юридические компании, консалтинг — лица реальных сотрудников, юристов

• Для любых сфер продажи товаров — фрагмент с примером использования товара. Например, если вы продаёте спиннинги для рыбалки, то можно разместить видео с рыбаками, уловом

Наша компания занимается разработкой и доработкой сайтов любой сложности. Если вам необходимо добавить видеофон на сайт, или произвести какую-либо иную правку на сайте — оставьте заявку в форме ниже. Мы перезвоним вам в течение 30 минут.

Оставить заявку

Автор:  Роман Кондрашов

Изменение фона страницы — Помощь

1. Помощь
2. Редактор Html5

Содержание:

Изменение цвета фона
Установка фонового изображения на сайт
Настройки фона
​Очень важная рекомендация

 

 

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

 

Вы увидите две вкладки «Фон» и «Фон сраницы». Чтобы вы не путались, уточним:

 

Изменение цвета

Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта «Цвет фона», после чего появится окошко палитры, где вы сможете выбрать цвет. 

 

 

Установка фонового изображения на сайт

Если вы хотите установить в качестве фона картинку, то кликните на квадрат под надписью «Фоновая картинка».

 

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

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

В нашем случае мы выберем паттерн из библиотеки фонов. Библиотека фонов, как  и библиотека клипартов доступна в редакторе конструктора для всех.

 

 

Настройки фона

Теперь можно настроить параметры отображения загруженного вами изображения. 

 

 

Давайте подробнее разберем, что здесь можно настроить:

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

 

​Очень важная рекомендация  

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

 

Вот так делать не надо! Это очень плохо!

 

Берегите глазки ваших посетителей и они отплатят вам благодарностью и высоким поведенческим фактором. На этом всё. Красивых сайтов вам и удачи! 
 

Внедрение дизайна сайта в SiteEdit

Категории:

Создание структуры сайта. Работа в карте дизайна В этом уроке мы познакомимся с версткой дизайна в программе SiteEdit, простыми словами – как превратить обычный эскиз дизайна сайта в виде картинки в работоспособный сайт. Представим, что у нас уже есть эскиз дизайна, разработанный в графическом редакторе. Мы возьмем за пример один из наших шаблонов – достаточно простой и легкий. Поняв принцип построения сайта, вы сможете внедрить и более сложные дизайны.   Поэтому, на первом этапе нам нужно мысленно разбить дизайн сайта на сегменты (блоки). Если вам проще, можете нарисовать структурную схему на листе бумаги. Структура отдельно-взятого дизайна может быть совершенно разной. В нашем случае структура выглядит примерно так: Немного теории. Структуру можно создавать с помощью слоев или таблиц. Мы рассмотрим верстку с применением слоев, т.к. у них больше возможностей в плане поведения и настройки дизайна. Единственным исключением будет одна таблица, установленная в центральной части сайта. Поясним по скриншоту. Мы добавляем первый слой, который будет помогать нам центровать сайт по середине экрана. Далее в нем пойдут другие слои, служащие для разделения частей сайта относительно друг друга. Поскольку наши блоки имеют разное оформление (шапка, блок меню, содержательная часть и подвал), они будут заключены в отдельные слои. Таблица же поможет нам разделить область содержания на 2 колонки – вспомогательную и основную. Теперь рассмотрим, что нужно сделать для построения структуры сайта в программе SiteEdit. Создаем новый проект, не выбирая при этом уже настроенные шаблоны или проекты. Заходим в меню программы: «Оформление – редактирование карты дизайна» (здесь создается структура)   Для начала нам нужно избавиться от старой структуры и тех элементов, которые уже имеются на экране. Для быстрого выделения всех элементов нажимаем комбинацию клавиш «Ctrl+A», затем клавишу «Delete». При этом все удаляется и перед нами белеет чистый лист. Для вставки элементов используем меню, вызывая кликом правой кнопки мыши. Подробное описание элементы в меню карты дизайна читайте на странице.. Сначала добавляем необходимые нам слои, а затем вставляем внутрь слоев нужные нам элементы. При вставке слоя в нем будет написан текст «Новый слой», скорее всего, вам этот текст не понадобится, поэтому можете кликнуть два раза внутри слоя и стереть данный текст. Для удобства работы со слоями, вы можете после добавления слоя, раздвинуть его границы, пока он выделен, потянув за небольшие квадраты по периметру слоя. Растягивайте так, как вам удобно, позже мы настроим размеры и положения слоев более точно. Слои можно вставлять друг в друга, для этого кликайте внутрь слоя и с помощью меню устанавливайте новый слой. Если вы ошиблись, установив слой (или любой другой элемент) не в то место, вы можете легко переместить в нужное, взяв мышкой и перетащив слой или иконку элемента. При вставке таблицы в содержательную вы столкнетесь с редактором таблиц. Вкратце о нем: в верхней части редактора устанавливаются значения для всей таблицы, в нижней – для каждой отдельной ячейки. Устанавливайте количество строк и колонок, как нужно вам. Ширина 100% вверху редактора означает, что таблицы растянется на всю ширину того блок, в котором она заключена. По умолчанию все таблицы «резиновые». У таблицы будут установлены границы в виде обрамления сплошной линией. Можете оставить для наглядности и убрать в конце работы. Но я всегда убираю их сразу, чтобы не смущали. Границы можно убрать, сменив 1 на 0 у параметра «Рамка» в верхней правой части редактора. Для того, чтобы все элементы, установленные после внутри таблицы, не располагались, как им захочется, нужно прижать их к какому либо краю. Для этого выделите мышкой все ячейки таблицы (они подсветятся синей рамкой), и в нижней правой части редактора задайте выравнивание по вертикали и горизонтали. Я чаще ставлю top и left. После всегда можно поменять. Если вы новичок, остальные поля лучше здесь не настраивать, чтобы не путаться потом, где заданы настройки. Все оформление мы будем задавать в другом месте позже. Итак, после установки слоев, таблицы и вложенных внутрь элементов у нас получается такая картинка: Поясним. Мы добавили один общий слой, в который вложили слой шапки, слой меню, слой содержания, слой подвала. Слой шапки включает в себя: логотип, заголовок сайта Слой меню включает универсальное меню Слой содержания включает таблицу из одной строки и двух колонок, В левой – глобальный контент, в правой: заголовок страницы, вводный текст страницы, завершающий текст страницы Слой подвала включает слой с блоком Copyright, Кнопку технологии SiteEdit, Слой с блоком статистики При установке или перемещении элементов в карте дизайна не допускайте пробелов и пропусков на другую строку, т.е. старайтесь не нажимать на клавиатуре клавиши «Пробел» и «Enter». Эти отступы будут вам мешать настраивать дизайна и добавят нежелательные промежутки. Для удаления таких отступов можно проделать такую процедуру: Ставите курсор рядом с элементом, и нажимаете «BackSpace» или «Delete», в зависимости от того, где вы хотите удалить отступ – спереди или сзади. Если удаляется сам элемент, то значит отступа не было, можете нажать «Ctrl+Z», чтобы вернуть действие назад. Вверх Переименование названий элементов в карте дизайна Построив структуру в визуальном редакторе, мы будем искать в ней элементы с помощью дерева дизайна уже в обычном режиме настройки. Но, т.к. программа создает названия элементов на английской языке, многим будет непонятны заголовки, к пример: DIV17, Table03, Tr02. Поэтому, давайте назовем наши созданные элементы по-русски, как нам было бы понятнее. Это делать необязательно, поэтому некоторые могут смело пропустить данный шаг. Переименовать элементы можно именно в карте дизайна. Нажмем клавишу «F4», открыв дерево дизайна. В карте дизайна здесь нет лишних элементов, но есть наша созданная структура. Все элементы находятся в одном главном BODY (этот элемент чаще всего остается неизменным). Все, что вложено внутри него – это и есть наши добавленные слои, таблицы, функциональные блоки, расположенные в древообразной структуре. Выделите слой в дереве дизайна, в поле «Имя» поменяйте название на привычное вам. К примеру – «Общий слой», после нажмите кнопку «Применить», что справа от поля. Если вы новичок, лучше не меняйте поле «ID». Данную операцию проделайте со всеми остальными слоями и таблицей. Названия лучше давать самые обычные и универсальные (слой текстов, слой шапки и т.д.). Выделяемый элемент будет подсвечен красной рамкой на экране, так что вам не составит труда определить ему название. Вот такая картинка получилась после выполнения данной задачи: Сохраняем изменения в карте дизайна, нажав на кнопку «Сохранить» в нижней части экрана. Вверх Настройка дизайна сайта Как только мы сохранили изменения в карте дизайна, мы попали снова в обычный режим управления проектом сайта. Перед нами кусочки текста, раскиданные как угодно. Располагаются элементы так, потом что мы меняли размеры слоев вручную. Перед началом настройки дизайна давайте избавимся от старых настроек. Старые настройки могли остаться от прошлого шаблона, проекта, либо от манипуляций со слоями в карте дизайна (мы могли менять у них размеры). Для удаления старых настроек дизайна открываем панель CSS клавишей F3, ставим курсор в поле, нажимаем комбинацию клавиш «Ctrl+A», далее клавишу «Delete», при этом весь набор css стилей удаляется. Жмем кнопку «Сохранить CSS» на данной панели. Теперь можете закрыть напель той же клавишей F3, чтобы не мешала. Чтобы изменения, сделанные в панели css, применились к проекту, нажмите правой кнопкой мыши на иконку с зелеными стрелочками «Обновить страницу» и кликните левой кнопкой мыши на выпавший пункт «Обновить параметры css редактора». Должна получиться такая картинка: Теперь уберем лишние отступы у всех элементов. Это делать не обязательно, но я советую начать настройку своего дизайна именно с этого шага. Т.к. сам браузер по умолчанию будет добавлять отступы ко многим элементам, особенно заголовкам. Поскольку в каждой браузере свои настройки, наш дизайн будет смотреться по-разному. Чтобы этого не происходило, мы принудительно уберем отступы и установить свои – тогда мы будем уверены в точности настроек. Откроем дерево дизайна F4, выделим пункт BODY, и на вкладке «Позиционирование» установим число «0» в самой левой колонке у параметры «Отступы». Затем перейдем в дереве в пункт «Тэги / Все элементы», и установим также значение «0» в том же самом поле. Теперь можно начать задавать наши настройки. Основываясь на нашем эскизе, установим общие настройки текстов для всего сайта. Правильней сначала задать такие настройки в пункте BODY, т.к. все, что содержится в нем, унаследует эти настройки. Заходим на вкладку «Шрифт», задаем цвет, размер и начертание текста (выбирая нужный шрифт). Согласно нашему эскизу, межстрочный интервал чуть больше, чем есть сейчас, поэтому пропишем и его. Данный интервал можно прописывать в таком виде (к примеру: 1.4). Остальные графы здесь лучше оставить пустыми. Более индивидуальные вещи мы будем задавать уже у конкретных элементов. Теперь зайдем на вкладку «Фон». Зададим цвет (задайте цвет фона всего сайта) согласно эскизу дизайна. Здесь можно задать не только цвет, но и фоновое изображение. В качестве фона может выступать какая угодно картинка (градиент цвета, свечение или затемнение, зацикленное изображение по всему экрану или абстрактный узор). В нашем случае это небольшое изображение, имитирующее шероховатую поверхность. Данный фон создан в графическом редакторе и сохранен как небольшая фотография. Мы можем прикрепить ее в пункте «Изображение», нажав на иконку правее и выбрав нужную картинку с компьютера. Все изображения в программе по умолчанию зациклены, т.е. будут повторяться по горизонтали и вертикали бесконечное количество раз. Это удобное свойство, когда вам нужно растянуть однородный рисунок, получив длинную линию градиента или замостить фон маленькими узорами. В нашем случае как раз это нам и нужно. В других случаях, когда рисунок повторять не нужно, ставьте значение «no-repeat» у пункта «Повторение», либо устанавливайте повторение по конкретной оси координат. Теперь отцентруем наш сайт, относительно ширины экрана. Выделим самый первый слой, который идет после пункта BODY и перейдем на вкладку «Позиционирование». Здесь необходимо задать размеры ширины слоя (можно задавать как в процентах, так и в пикселях). В нашем случае Размер задан жесткий в пикселях (размеры в процентах обычно задаются «резиновым» сайта). Теперь прописываем значение «auto» в самой левой колонке у пункта «Отступы». Если все правильно сделали, сайт должен расположиться по центру вашего экрана. Чтобы сайт не прилипал к краям экрана, зададим отступы сверху и снизу (слева и справа задавать в нашем случае не нужно, ведь эти отступы будут появляться автоматически). Зададим небольшие значения, как это показано на эскизе дизайна (задаем напротив пункта «Отступы»). Чтобы настроить заголовок сайта и логотип, давайте сначала добавим реальную информацию. Так нам будет понятнее, сколько занимает места информация. Логотип также должен быть подготовлен как отдельная картинка, сделанная в графическом редакторе. Логотип рекомендуется сохранять в формате png с прозрачным фоном, чтобы он мог подойти под любой дизайн. Это также удобно, когда нужно поменять фон сайта, но не пересохранять каждый раз логотип. Логотип можно загрузить через верхнее меню «Редактировать / Логотип сайта». Выбираем в проводнике нужную картинку, загружаем. Заголовок сайта также изменим. Чтобы изменить, можно найти его в том же меню или кликнуть 2 раза по имеющемуся названию «заголовок сайта». Откроется текстовый редактор. Напишем реальный заголовок сайта. Внимательно проверяйте, нет ли лишних пробелов или параграфов, если работаете в режиме «ТЕКСТ». Их легко заметить в режиме «HTML» в виде тэгов (они подсвечены другим цветом). Правильней работать в режиме HTML (хотя это дело вкуса). Более подробное описание и особенности режимов текстового редактора читайте на странице. Настроим дизайн заголовка сайта. Для этого находим в дереве дизайна элемент заголовка «siteTitle», заходим на вкладку «Шрифт» и задаем размер, цвет, вес шрифта (если нужно – начертание, наклон и т.д.). Любой элемент подсвечивается красной рамкой, который выделен в дереве дизайна, поэтому вы не допустите ошибок. Автоматический поиск элемента на экране Если вам сложно искать элемент в сложной структуре сайта, вы можете воспользоваться автоматическим поиском. Зажмите «Alt» и кликните левой кнопкой мыши по элементу, который хотите найти. При этом дерево дизайна F4 у вас должно быть открыто. В большинстве случаев, оно откроется вплоть до искомого элемента. Будьте внимательны, если тем самым вы хотите найти элемент модуля, запись или раздел. Эти вещи встречаются в нескольких местах, а программа открывается всегда кратчайший путь до элемента. Следите, где вы задаете настройки, чтобы не запутаться. Продолжим настройку дизайна. Задаем у слоя с шапкой отступ снизу, чтобы он не слипался с другими элементами. Задавать нужно именно у слоя шапки, а не у отдельных его элементов. Это будет универсально, т.е. в слой с шапкой у вас может появится новый элемент(ы). Отступ задаете также на вкладке Позиционирование у пункта «Отступы». Вверх Настройка меню Мы покажем, как настроить меню на примере универсального меню, который мы установили в карте дизайна прежде. Поняв принцип его настройки, мы с легкостью настроите и дополнительное и главное меню. Дизайн меню может быть разный, поэтому и настройки могут отличаться. Мы, естественно, будем настраивать меню согласно нашему эскизу дизайна. Как видно на эскизе, меню обернуто в некий прямоугольник с фоном чуть темнее основного цвета сайта и границей по периметру. Чтобы настроить меню, включать его в слой в карте дизайна не обязательно. Я использую этот прием чаще для того, чтобы настройки основного фона меню остались у слоя, а не у меню. Я предусматриваю на будущее, если по каким-то обстоятельствам в слое будет другое меню, мне не придется перенастраивать основные стили меню. Поэтому, вы можете не ставить слой, а настраивать сразу универсальное или главное меню, т.к. оно отображается в дереве дизайна. Сначала выберем тип меню (это нужно для дополнительного и универсального меню). Можете указать его в списке страниц F11, либо в свойствах проекта (правой кнопкой мышки на экране и вкладка «Меню»). Выбираем горизонтальное – выпадающее. После смены типа меню, чаще всего, требуется обновить параметры css редакторе (как это делать, вы уже знаете). После обновления меню выстраивается правильно – в строчку. Выпадающий тип меню нам пригодится в будущем, если страницы будут содержать вложения. В этом случае при наведении курсора страницы будут выпадать снизу (либо справа). Выделяем слой, в котором расположено меню, задаем границу на вкладке «Граница», задаем отступ снизу на вкладке «Позиционирование». Размер блоку задавать не будем, т.к. блок сам раздвинется, когда мы укажем размеры пунктов меню. На вкладке «Фон» задаем цвет фона блока, либо задаем изображение. В нашем случае это заготовленная фотография с чуть затемненным фоном и прозрачностью. Теперь отцентруем меню относительно ширины слоя, в котором оно находится. Для центровки используется тот-же принцип, который мы использовали для общего слоя сайта. Только в случае с меню нужно задавать параметр «auto» пункту «Таблица меню». Левый, правый бордюр и разделитель используются не всегда, поэтому в нашем случае их лучше скрыть, чтобы они не тратили место. Каждый элемент добавляет небольшой отступ рядом с пунктами, иногда это портит дизайн. Для того, чтобы скрыть элемент, выделяем его, и на вкладке «Позиционирование» ставим у пункта «Тип контейнера» значение «none». Выделяем «Пункт меню» и задаем ему настройки. Пункт меню может настраиваться по-разному, в зависимости от дизайна. В нашем случае пункты не привязаны к конкретным изображениям и фон под ними может растягиваться, поэтому такое меню настроить проще. Для начала пункту меню задается тип контейнера или выравнивание (в зависимости от ситуации). Чаще применяется значение «Left» у пункта «Выравнивание». Только тогда пункт ведет адекватно при задании ему размеров и отступов. Для задания размеров пункту могут использоваться жесткие размеры по высоте (но лишь в случаях, когда это нужно для подстройки под конкретный фон с твердой высотой). В нашем случае достаточно указать отступы пункту меню – вкладка «Расположение текста», указываем отступы слева, справа, сверху и снизу. Если отступ одинаковый со всех сторон, его можно указать у пункта «Внутренний отступ» Теперь настроим оформление самих текстов. Зайдем на вкладку «Шрифт» и зададим цвет, размер, начертание текста и другие параметры согласно эскизу дизайна. Теперь настроим активный пункт меню (название страницы, на которой мы находимся в данный момент) и пункт меню при наведении курсора. Они уже выведены в дереве дизайна под «пунктом меню». Чаще всего их оформляют одинаково, но это опять же, зависит от вкуса и эскиза дизайна. В нашем случае мы зададим цвета фона , чуть темнее, чем общий фон блока меню. Все предыдущие настройки от пункта меню применяются и к активному и к пункту меню при наведении курсора. Поэтому, старайтесь не задавать лишних настроек, чтобы потом было легче редактировать оформление. Вверх Настройка многоуровненого меню Для того, чтобы визуально видеть пункты, которые будут выпадать (раскрываться), нам нужно создать имитацию вложенных страниц друг в друга. Пока у нас нет наполнения и мало страниц, можно создать несколько тестовых и вложить их в одну или в две страницы. Для этого воспользуйтесь инструментом списка страниц F11. Для нашего тестового проекта я создал 3 страницы. Чтобы поместить их в родительскую страницу, можно выделить эти страницы (с помощью «Ctrl» или «Shift»), затем взять мышкой эти страницы и навести на ту, в которую мы хотим их вложить. Далее они окажутся в ней, изменения в списке страниц можно сохранить. Теперь, наводя курсором на пункт меню (в которой есть страницы), они будут выпадать снизу. Настроим оформление выпадающих уровней меню. Запомните, что пункты 2го и следующих уровней наследуют дизайн вышеуказанного пункта. Т.е. если мы настроили пункт меню, пункт меню 2го уровня будет точно таким же по оформлению, а если мы перенастроим дизайн пункта 2го уровня, пункт в 3м уровне будет наследовать 2й уровень и т.д. Чаще всего, дизайн 1го уровня не подходит для выпадающих пунктов, в нашем случае такая же ситуация. Поэтому, нужно будет перебить настройки оформления, задав новые. Для начала зададим фон у пункта «2й уровень меню». Это может быть цвет или изображение (лучше загружать повторяющееся изображение). Мы же зададим фотографию, с фоном чуть темнее фона сайта и с прозрачным фоном, а также едва заметную границу по всему периметру. Добавим цвета фона. Теперь настроим пункт меню. Высота пунктов в данном случае слишком большая. Поэтому, заходим на вкладку «Расположение текста» и указываем сверху и снизу меньшие отступы, нежели в пункте меню 1го уровня. Теперь нам нужно решить, как будут выглядеть пункты при наведении курсора. Наводя курсор на пункты, мы видим неточность – пункт подсвечивается разной шириной, и получается некрасиво. Это происходит потому, что у пунктов 1го уровня ширина не задана, поэтому ширина подстраивается под величину текста. Вы можете использовать 2 варианта: Либо указывайте жесткую ширину пункту меню 2го уровня (в пикселях) Либо не используйте для пунктов меню 2го и т.д. уровней оформление, предполагающее выделение данного пункта целиком (граница, фоновый цвет или изображение). Как альтернативу, можно использовать подчеркивание текста, замена цвета текста, жирность и т.д. Для нашего дизайна мы просто укажем жесткую ширину пункту меню 2го уровня, тем самым, прировняв все пункты к одной величине. Смотрится это ровно и красиво. Также уберем преобразование текста в большие буквы для 2го уровня. Чаще всего размер текста более мелкий у нижеследующих уровней от 1го. Для того, чтобы убрать ранее заданный параметр, нужно поставить значение «none». Остальные нижеследующие уровни будут наследовать стиль 2го уровня, а значит – вести себя, как нам нужно. На этом настройка меню закончена. Вверх Продолжение настойки дизайна сайта Далее настроим подложку содержательной части. Для нее мы добавили слой. Выделяем его, назначаем отступ снизу, чтобы не слипался с подвалом. Устанавливаем границу по периметру (чтобы не подбирать цвет границы, можно скопировать его со слоя меню, тем более что стиль элементов как правило одинаков). На вкладке «Фон» устанавливаем светлый фон (в нашем случае белый). Текст будет смотреться достаточно четко за счет контраста. Теперь установим отступы текста относительно границ слоя, чтобы не «слипались». Отступы можно назначать на вкладке «Позиционирование», выделяя каждый элемент и устанавливая ему отступ. Но, в нашем случае, это не подходит. Элементов в слое несколько, поэтому проще будет указать единый внутренний отступ для всех текстов. Для этого при выделенном слое содержания заходим на вкладку «Расположение текста» и ставим внутренний отступ (такой, как на эскизе). Все элементы внутри отодвинуться от краев.   Настройку текста отложим на потом, т.к. эта часть самая емкая. Настроим подвал сайта. Для начала необходимо включить блок Copyright (по умолчанию он выключен) и добавить счетчик посещаемости сайта. Блок Copyright включается через верхнее меню программы «Редактировать / Дополнительные разделы / Блок Copyrights». В открывшемся окне дописываем к существующей надписи название компании или хозяина сайта (если нужно, пишем год), сохраняем. Для того, чтобы настроить элементы подвала, нужно добавить счетчик посещаемости сайта. Т.к. счетчиков на сегодняшний день достаточно много а выбор зависит от разработчика сайта, мы не будем заморачиваться по поводу регистрации счетчика. Для вас не составит труда зарегистрировать счетчик. Мы лишь покажем, куда устанавливается готовый код счетчика и как настроить его относительно других элементов. Счетчик добавляется также через пункт меню «Редактировать / Статистика», в открывшемся окне вам потребуется добавить html код счетчика (который вам выдаст ресурс, на котором вы будет е регистрировать счетчик). Чтобы нам закончить урок по настройке дизайна, мы поступим проще, добавить в данном окне статистики обычную картинку – скриншот готового счетчика. Настроив его расположение, в дальнейшем мы сможем заменить картинку на готовый блок статистики и уже не возвращаться к настройке дизайна. Выделим слой подвала, укажем границу (но уже не по периметру, а только сверху). Цвет и стиль границы укажем такой же, как у других блоков. Установим отступ у общего слоя подвала – установим сверху, но по желанию, можно добавить и отступ снизу. Элементы в подвале будет лучше расположить в строку, т.к. друг под другом они не смотрятся в данной ситуации. Для этого используем вкладку «Поиционирование». Ставим значение «left» у параметра «Выравнивание» и небольшой отступ справа. Данную операцию проделываем со всеми элементами, которые находятся в слое подвала. Т.к. текст у блока Copyright меньшей высоты по сравнению со счетчиками, то смотрится он не так красиво. Отодвинем «блок Copyright» чуть сверху, дабы расположить его по центру относительно высоты счетчика и кнопки Технологии SiteEdit. Получается такая картинка: Чаще всего, слой, в котором элементы располагаются в строчку (которым задано выравнивание по левому или правому краю), ведет себя неправильно. Его обводка сворачивается до минимума. Рядом расположенные слои могут также вести себя неправильно, прилипая к данному слою. Чтобы этого не возникало, можно задать высоту слою, либо добавить ширину и выставить тип контейнера (какой лучше – зависит от дизайна). В нашем случае, слою подвала нужно добавить 100% ширины и тип контейнера «inline-block», после чего слой охватывает правильно все, что в него входит. Для того, чтобы настроить текстовую часть, нам нужно добавить информацию. Вверх Наполнение проекта Для более удобной работы включим режим иконок управления информацией F9. Вкратце об иконках: Бело-серые – переменные и некоторые заголовки Синие – навигационное меню Красная – Заголовок страницы Желтые — Разделы Иконки с красной обводкой – глобальные разделы (записи), т.е. сквозные для всех страниц Зеленые — записи Иконки с плюсиком — добавить новый элемент Иконки с карандашиком — редактировать элемент Перед наполнением проекта стоит ознакомиться, из чего состоит сайт и каждая его страница. У сайта (в большинстве случаев) есть заголовок, подзаголовок, заголовок страницы. Они могут быть, но могут быть и заменены на графические изображения (зависит от дизайна и желания разработчика). Далее следуют разделы и записи. Их можно добавить в том месте, где установлен контент. Контенты расставляются в карте дизайна. В одном контенте может быть сколь угодно много разделов. Поэтому, если разделы располагаются рядом друг с другом и имеют одинаковое оформление, для них можно установить всего один контент. Контент-0 считается основным. Чаще всего он добавляется в единственном экземпляре. В нем отображается все подробное содержание, когда мы кликаем на ссылки «подробнее» информационных блоках в других контентах. Если одного контента недостаточно, можно добавить дополнительные – они будут с цифрой 1,2,3 и выше. Если даже вам не хватило заложенных в программе 6 контентов, вы можете добавить такой же, зайти в режим «Исходного кода» карты дизайна, найти строчку кода с контентом и поменять у него цифру (на любую другую, которая не встречается в карте). Но, как правило, при грамотном построении структуры дизайна 6 контентов чаще всего хватает. Каждый раздел выполняет роль одного из модулей, заложенных в комплекте программы. Поэтому, при установке раздела программа спрашивает, функционал какого модуля выбрать. Каждый раздел содержит заголовок, фото и описание и может включить в себя бесконечное количество записей. В каждом сайте могут также использоваться вводный и завершающий текст страницы. Они обычно устанавливаются до и после контента-0. Задачи у них разные – либо размещение баннера, рекламы, акции, краткого содержания или ключевых слов на странице. Вернемся к практике. В нашем примере содержательная часть разбита на 2 вертикальные колонки таблицей. В левой более узкой у нас установлен глобальный контент-1. Мы посчитали, что здесь будет установлен блок новостей, сквозной для всех страниц. В правой боле широкой колонке – заголовок страницы, вводный текст страницы, контент-0 и завершающий текст страницы. Добавим глобальный раздел слева, нажав на иконку с плюсиком. Выбираем нужный модуль. В нашем случае это «Новости».   Пока мы не вышли из текстового редактора, можно продолжить работу с разделом. Перейдите на вкладку «Содержание». Заполните (если нужно) заголовок раздела и описание раздела. Я же пока не буду добавлять текст и фото к разделу, а лишь заполню заголовок и сразу перейду к записям. Добавить записи в раздел можно, кликнув правой кнопкой мыши по заголовку раздела рядом с иконкой и выбрать в выпавшем меню соответствующий пункт. В добавленной записи прописываем заголовок (если требуется) указываем дату (это в случае с модулем новостей). Добавляем картинку к записи (по желанию). Перед добавлением картинки обратим внимание на инструмент оптимизации изображения. Если не ставить галочку в нижней части редактора, то изображение добавиться в исходном размере. Это может повредить наш дизайн, а также картинка будет долго загружаться на сайте. Чаще всего, галочку нужно ставить, и указывать желаемые размеры, до которых уменьшится изображение. Изображение всегда уменьшается пропорционально, а размер указывается для ширины фотографии. Также ест возможность уменьшить только превью-изображение (фото в кратком просмотре), а полное изображение оставить с оригинальным размером (для этого) нужно убрать число из поля справа и оставить его пустым. В нашем же случае фотографии будут большие в исходниках, поэтому укажем оба размера. Размер указывайте, в зависимости от вашего дизайна. Если место позволяет, можно указать размер больше, но такой, чтобы фотография и текст легко умещались в отведенной им области. Теперь о текстовом редакторе. Работает он в двух режимах: «Текст» и «HTML» Режим «Текст» Режим похож на упрощенный вид программы Word, поэтому подойдет для новичков и не специалистов. В нем редактирование происходит более понятно и быстро. Но, есть и минусы. В нем мало возможностей настройки нестандартных решений дизайна, а также многие настройки оформления текста могут по-разному отображаться в каждом браузере. Если вы добавляете информацию с других источник, в некоторых случаях текст может нести с собой нежелательные настройки оформления. Они могут конфликтовать с настройками текстов вашего сайта. Поэтому после копирования текста лучше применять инструмент «Фильтр». Кнопка есть в панели инструментов управления текстом. В зависимости от количества нажатий кнопки, можно убрать меньше или больше лишних настроек оформления. Режим «HTML» Режим подойдет для специалистов, т.к. в нем больше возможностей настройки оформления текста. Все необходимые настройки можно задать вручную, настроив текст весьма различными способами. В данном режиме четко видны все ошибки оформления, а также отступы, пробелы. Все настройки задаются с помощью так называемых тэгов. Для более глубинного изучения особенностей режима вам лучше почитать учебник по HTML. Но, для поверхностного ознакомления с работой программы SiteEdit это не требуется. Часто используемые тэги выведены в панель иконок управления текстом. Рекомендую работать в данном режиме, т.к. настроенный текст отображается во всех браузерах одинаково, и вы будете уверены, что никаких лишних настроек здесь не применится. Вернемся к наполнению информацией нашего проекта. Мы добавили картинку, текст. Но, весь текст сильно увеличит запись. Чаще всего в новостях располагают небольшой отрывок текста, а все остальное предлагают почитать в подробном описании. Сделаем также. Оставим в кратком описании Одно или два предложения, а все остальное перенесем в подробную часть (просто вырезав и вставив текст). По такому же принципу добавим еще несколько записей, чтобы видно было, как они располагаются по отношению друг к другу. Добавим к каждой заголовок, картинку, текст и дату. Теперь мы видим, как располагаются записи данного раздела и сколько места занимает раздел. Поскольку размеров у ячеек таблицы нет, она будет вести себя по принципу: где больше информации – та ячейка и шире. Все это мы сможем настроить позже. Для полной картинки давайте добавим информацию в контент-0, то в правую область сайта. В контент-0 на главной странице я добавил раздел, выбрав модуль «текст и рисунок», указал описание раздела и задал ему фотографию. В данном разделе записей нет. Вверх Продолжение настойки дизайна сайта Теперь мы видим, как располагается информация и можем настроить текстовый дизайн. Выключим на время режим иконок F9 и перейдем к дереву дизайна F4. Находим в дереве таблицу, выделяем ее левую колонку (так, чтобы красной рамкой подсветилась левая часть содержательной части), указываем ширину. Можно указать как в жестких величинах (в пикселях) так и в процентах. Наш дизайн не предполагает подгонку содержания под конкретный фон, поэтому поставим ширину в процентах. Теперь, даже будучи с информацией, левая часть всегда будет определенной ширины и не будет «расползаться». Теперь избавимся от склеивания текстов левой и правой ячейки. Поскольку правая колонка таблицы более широкая, установим для нее внутренний отступ слева (согласно эскизу дизайна). Теперь настроим разделы и записи, чтобы было понятно, где заканчивается один, где начинается другой. Для этого используйте выведенные в дереве дизайна пункты «Оформление разделов и записей». Данные пункты помогут вам настроить разделы и записи для всего сайт и всех модулей в одном месте. Согласно эскизу дизайна, нам потребуется задать больший размер заголовкам разделов, поменять шрифт, задать отступ снизу. Ту же самую операцию проведем с заголовком страницы. Согласно нашему эскизу, оформление его можно скопировать с заголовков разделов. У текста раздела можно задать небольшой отступ снизу, чтобы записи не прилипали к нему вплотную. Заголовки записей стоит выделить, но не так сильно, как заголовки разделов. Эта информация уже менее значима. Устанавливаем размер, жирность, отступ снизу заголовкам и другие параметры (если нужно). Сами записи можно отодвинуть друг от друга, задав отступ снизу на вкладке «Позиционирование». Настроим положение изображения записи и раздела. По умолчанию текст, имеющийся в кратком или подробном описании, может располагаться под картинкой. Записи или разделы будут смотреться более компактно, если сделать обтекание картинки текстом. Для этого выделяем пункт «Рисунок» (настраиваем одинаково у раздела и у записи), затем на вкладке «Позиционирование» ставим значение «left» у пункта «Выравнивание». Это означает, что данный элемент прижимает к определенному краю области, а все что рядом с ним, пытается расположить в строчку. Поэтому, текст обтекает картинку (если тексту не заданы определенные параметры). У картинки ставим небольшой отступ справа (в случае, если картинка прижата к левому краю), чтобы текст не слипался. Картинку в подробном описании можно не настраивать, т.к. она наследует настройки картинки в краткого просмотра. Вверх Оформление ссылок Теперь настроим оформление ссылок. По умолчанию они берут настройки браузера. Как правило, данные цвета (яркий синий и ярко бардовый) не подходят к большинству дизайнов. Настроим цвета, согласно эскизу дизайна. Ссылки для всего сайта можно настроить в одном месте. В дереве дизайна находим пункт «Тэги / А (ссылки)» и настраиваем цвет активной ссылки. Цвет посещенной ссылки также настроим или зададим такой же цвет, как и у активной (на ваше усмотрение). По умолчанию ссылки будут подчеркнуты. Вы можете оставить это свойство или придумать свое выделение ссылок. Я же оставлю, но настрою пункт ссылки при наведении курсора так, чтобы подчеркивание убиралось. Для этого выделим данный пункт и на вкладке «Шрифт» поставим и пункта «Подчеркивание» значение «none». Вверх Оформление кнопок Настроим дизайн кнопок всего сайта. Это можно настроить в одном месте. В дереве дизайна пункт «Оформление разделов и записей / Общие… / Свойства кнопок». Чтобы нам видеть то, что мы настраиваем, включим страницу проекта, где установлен модуль, имеющий кнопку. Кнопки по умолчанию имеют стандартное оформление, взятое с браузера. Мы же можем их настроить согласно эскизу дизайна или нашим пожеланиям. В моем случае я задаю текстовое оформление кнопке, выбирая шрифт, размер, цвет. Затем убираю границу, устанавливая значение «none» в нижнем поле на вкладке «Граница». Дабы кнопка не была маленькой (а размер ее будет таким, какой в ней текст), я задаю внутренние отступы на вкладке «расположение текста». Пользователю будет более понятно, если при наведении на кнопку курсор сменится на ладонь с указательным пальцем. Настроим данный эффект на вкладке «Другие настройки». В пункте «Вид курсора» поставим значение «pointer». Оформление фона кнопки может быть совершенно разным. У нее может быть задан рисунок (повторяющийся или законченный), или обычный фон с цветом. В случае законченного рисунка кнопки обычно настраивают с жесткой высотой и шириной. Но, это не всегда приветствуется, т.к. кнопки в проекте могут встречаться с разной длиной текста, а значит, жесткие размеры могут не подойти. Я предпочитаю задавать кнопке внутренние отступы, которые делают ее больше по размеру, ширину и высоту не указываю. Я решил ограничиться фоном кнопки и задать плюсом рисунок, имитирующий легкое свечение сверху (рисунок светлого градиента с растворением к низу в формате png). Такой рисунок подойдет почти к любому фону и сделает кнопку чуть более объемной. Вы же можете экспериментировать с оформлением как угодно. Рисунок имеет повторящийся светлый градиент, поэтому устанавливаем в пункте «Повторение» значение «repeat-x» (повторять по горизонтали). Также я установлю небольшое скругление краев кнопки. Делается это в автоматическом режиме, на вкладке «Фон» у пункта «Радиус» указывается значение в пикселях. Скругляются большинство элементов, имеющих цвет или фоновую картинку. Скруглению не подлежат табличные элементы, поэтому данное свойства у них не работает. Вверх Настройка оформления полей ввода В некоторых модулях вы заметите поля ввода данных. Стандартное оформление не всегда подходит для дизайна. Поэтому не поленитесь оформить эти элементы. Для примера зайдем на страницу «Контакты» в нашем проекте. Поля также можно настроить для всех модулей в одном месте. Визуально мы будем наблюдать картинку модуля «Почтовая служба». Он имеет поля ввода и текстовое поле. Текстовые поля и поля ввода данных можно настроить, зайдя в дереве дизайна в пункт «Тэги». Вы найдете такие элементы как «INPUT» и «TEXTAREA». Чаще всего, оформление этих элементов одинаковое, поэтому можете задавать одинаковые настройки. Я обычно задаю небольшой внутренний текстовый отступ (3-5 пикс), границу цветом согласно эскизу дизайна. По умолчанию в текстовом поле установлен шрифт с засечками. Проверяйте, совпадает ли он с эскизом дизайна. Другие настройки данным элементам лучше не задавать, т.к. это уже частности. А более индивидуальные вещи лучше задавать при настройке оформления модулей. Внедрение дизайна в программу SiteEdit можно считать законченным. Остальные моменты будут разобраны в следующих главах. Вверх

Темный фон в дизайне сайта

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

Однако, не под каждую информацию подойдут светлые оттенки, да и при частом повторении такой дизайн просто надоедает.

Как же сделать красивый, привлекательный, интересный сайт используя темный фон? Для этого следует выполнить несколько моментов.

Темный цвет палитры замечательно подходит для каталога или же сайтов-галерей. Яркие, светлые картинки очень выразительно смотрятся на темной основе.

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

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

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

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

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

Не стоит, однако считать, что темный фон означает однородность и отсутствие насыщенности. Можно создать контраст между темными и светлыми местами, однако ни один элемент не должен сливаться с окружением.

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

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

Для создания «темного» сайта можно использовать самые разные хитрости. Кисти и текстуры разбавят мрачность и сделают сайт привлекательным и оригинальным.

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

 

 

← предыдущая следующая →

Оформление фона — Уроки по созданию сайтов на Joomla 3.x, 2.5

Фон является очень важной составляющей дизайна сайта. От данного фона будет зависеть общее восприятие сайта.

Веб-мастеру важно не только уметь подбирать фоновое изображение, но и уметь настраивать.

В CSS существует целая группа стилей, которая позволяет настраивать фон сайта — background. 

Стили background:

• background-color (цвет)
• background-attachment (фиксация)
• background-repeat (повторение)
• background-image (путь до картинки)
• background-position (расположение)

Различная комбинация из данных стилей и настраивает фон для сайта.

Как изменить фон сайта

Чтобы просмотреть, как настроен текущий фон, необходимо навести на это изображение, нажать ПКМ и выбрать пункт «Просмотр кода элемента».

Затем в появившейся панели необходимо найти HTML элемент, в котором прописан данный стиль, в большинстве случаев — это тег body.

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

Способы оформления фона

1. Фоновый цвет

Самый простой способ оформления фона для сайта.

Создается при помощи одного свойства — background-color. Где при помощи браузера, выбирается один из 16-ти млн. цветов.

2. Фоновый паттерн

Простой и эффективный способ оформить фоновое изображение для сайта. Чтобы оформить фон таким способом, необходимо найти подходящий паттерн в Интернете и сохранить в своём шаблоне. Рекомендую сервис — http://bg.siteorigin.com/

Создается при помощи свойства background-image, в котором прописывается путь до картинки. 

3. Фиксированное фоновое изображение

Очень эффективный способ оформить фоновое изображение для сайта. Для оформления фона таким способом, нужно выбрать картинку высокого разрешения в Интернете(можно найти огромное количество обоев) и сохранить у себя в шаблоне. Минимальная ширина картинки — 1920px.

Создается при помощи свойств  background-image, background-attachment (для фиксации) и background-size. Свойство background-size позволяет отображать картинку одинаково для всех мониторов.

4. Фоновое изображение

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

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

Создается при помощи свойств: background-image, background-repeat, background-position, background-color.

Свойство background-repeat позволяет отменить паттерное повторение фонового изображения. Свойство background-position указывает конкретное расположение, background-color — конкретный цвет, который будет под фоновым изображением.

5. Несколько фоновых изображений

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

Свойства в таком случае прописываются подряд, а фоновые картинки разделяются запятыми.

6. Линейный градиент

Удобный способ быстро оформить фон для сайта. Для такого способа достаточно уметь пользоваться один единственным свойством CSS.

В свойстве необходимо указать угол.

7. Радиальный градиент

Разновидность градиента. В свойстве радиального градиента, вместо угла необходимо указать форму.

Существует, также десятки разновидностей градиентного паттерна — http://lea.verou.me/css3patterns/

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

 

Приобрести курс по дизайну

 Уникальный курс от Joomla-Create.ru о том, как за считанные минуты можно самостоятельно изменять дизайн любого сайта.

В курсе шаг за шагом производится изучение принципов изменения дизайна, техника CSS и работа с браузером. 

Подробнее…

повтор фона — учебник CSS

Если элементу задать свойство background-image, то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:

И установим его в качестве фона для блока div:

Изображение дублируется по вертикали и горизонтали

В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).

Свойство background-repeat

Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:

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

• no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).

  
  background-repeat: no-repeat
  

• repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).

  
  background-repeat: repeat-x
  

• repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).

  
  background-repeat: repeat-y
  

Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

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

  
  background-repeat: round
  

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

  
  background-repeat: space
  

---

Итак, вы уже знаете, как добавлять фон к элементу, а также как управлять его повторением. В следующем уроке вы познакомитесь с еще одним полезным свойством — background-position.

Начало работы с виртуальным фоном — справочный центр Zoom

Обзор

Функция виртуального фона позволяет отображать изображение или видео в качестве фона во время собрания Zoom. Эта функция лучше всего работает с физическим зеленым экраном и равномерным освещением, чтобы Zoom мог определить разницу между вами и вашим фоном. Вы можете загрузить свои собственные изображения или видео в качестве виртуального фона или ничего не использовать и вместо этого просто размыть фон.Вы также можете использовать виртуальный фон в Zoom Room.

Эта статья охватывает:

Предварительные требования

Убедитесь, что ваш компьютер соответствует системным требованиям для виртуального фона.

Рекомендуемая установка

• Для достижения наилучшего эффекта виртуального фона Zoom рекомендует использовать сплошной цвет фона, предпочтительно зеленый. Рекомендуемые физические зеленые экраны от Webaround или Amazon.
• Камеры более высокого качества обеспечивают лучший виртуальный фон.См. Подробные сведения в рекомендациях по использованию камеры.
• Используйте равномерное освещение и цвет.
• Не носите одежду того же цвета, что и виртуальный фон.

Фоновое изображение

• Нет ограничений по размеру при добавлении собственного виртуального фона, но мы рекомендуем обрезать изображение, чтобы оно соответствовало соотношению сторон вашей камеры, перед его загрузкой.
  Пример : Если ваша камера настроена на 16: 9, изображение 1280 на 720 пикселей или 1920 на 1080 пикселей будет работать хорошо.
• Если вы не уверены в соотношении сторон вашей камеры, используйте фоновое изображение с минимальным разрешением 1280 на 720 пикселей.
• Просмотрите некоторые из виртуальных фонов, которые собрал Zoom, или используйте эти источники для других бесплатных изображений: Pexels, Unsplash, Pixabay.

Фоновое видео

• Видео (файл MP4 или MOV) с минимальным разрешением 480 на 360 пикселей (360p) и максимальным разрешением 1920 на 1080 пикселей (1080p).

Включение виртуального фона

Примечание : пользователи должны выйти из клиента Zoom для настольных ПК и снова войти в систему, чтобы виртуальные фоны вступили в силу.

Счет

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

1. Войдите на веб-портал Zoom как администратор с разрешением изменять настройки учетной записи.
2. В меню навигации нажмите Управление учетной записью , затем Настройки учетной записи .
3. На вкладке Встреча перейдите к опции Virtual Background (в разделе In Meeting (Advanced)) и убедитесь, что этот параметр включен.
   Примечание : Если параметр отключен, щелкните переключатель, чтобы включить его. Если отображается диалоговое окно подтверждения, выберите Включить , чтобы проверить изменение.
   
4. (Необязательно) Если вы хотите сделать этот параметр обязательным для всех пользователей в вашей учетной записи, щелкните значок блокировки, а затем щелкните Блокировать , чтобы подтвердить настройку.
5. (Необязательно) Установите флажок Разрешить использование видео для виртуального фона , затем Сохраните , чтобы подтвердить изменение, чтобы предоставить пользователям доступ к виртуальному фону видео.
6. (Необязательно) Установите флажок Разрешить пользователям загружать собственные фоны , затем Сохраните , чтобы подтвердить изменение, чтобы предоставить пользователям доступ для загрузки своих виртуальных фонов в дополнение к загруженным в данный момент фонам.
7. (Необязательно) Щелкните Управление виртуальным фоном , чтобы загрузить фоновые изображения по умолчанию, доступные для пользователей.
   Примечание : Пользователи должны иметь клиент / приложение версии 5.1.1 или выше, чтобы просматривать загружаемые вами фоновые изображения.
8. (Необязательно) Проверка Требовать от пользователей всегда использовать виртуальный фон , затем Сохраните , чтобы подтвердить изменение.

Группа

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

1. Войдите на веб-портал Zoom как администратор с разрешением на редактирование групп пользователей.
2. В меню навигации щелкните Управление пользователями , затем Управление группами .
3. Щелкните имя группы, затем щелкните вкладку Meeting , чтобы получить доступ к параметрам.
4. На вкладке Meeting перейдите к опции Virtual Background и убедитесь, что этот параметр включен.
   Примечания :
   • Если параметр отключен, щелкните переключатель «Состояние», чтобы включить его. Если отображается диалоговое окно подтверждения, выберите Включить , чтобы проверить изменение.
   • Если параметр неактивен, он заблокирован на уровне учетной записи, и его необходимо изменить на этом уровне.
     
5. (Необязательно) Если вы хотите сделать этот параметр обязательным для всех пользователей в этой группе, щелкните значок блокировки, а затем щелкните Блокировать , чтобы подтвердить настройку.
6. (Необязательно) Установите флажок Разрешить использование видео для виртуального фона , затем Сохраните , чтобы подтвердить изменение, чтобы предоставить пользователям доступ к виртуальному фону видео.
7. (Необязательно) Установите флажок Разрешить пользователям загружать собственные фоны , затем Сохраните , чтобы подтвердить изменение, чтобы предоставить пользователям доступ для загрузки своих виртуальных фонов в дополнение к загруженным в данный момент фонам.
8. (Необязательно) Щелкните Управление виртуальным фоном , чтобы загрузить фоновые изображения по умолчанию, доступные для пользователей.
   Примечание : Пользователи должны иметь версию клиента / приложения 5.1.1 или выше, чтобы просматривать загружаемые вами фоновые изображения.
9. (Необязательно) Проверка Требовать от пользователей всегда использовать виртуальный фон , затем Сохраните , чтобы подтвердить изменение.

Пользователь

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

1. Войдите на веб-портал Zoom.
2. В меню навигации щелкните Настройки .
3. На вкладке Встреча перейдите к опции Virtual Background (в разделе In Meeting (Advanced)) и убедитесь, что этот параметр включен.
   
   Примечания :
   • Если параметр отключен, щелкните переключатель состояния, чтобы включить его. Если отображается диалоговое окно подтверждения, выберите Включить , чтобы проверить изменение.
   • Если опция неактивна, она заблокирована на уровне группы или учетной записи, и вам нужно будет связаться с администратором Zoom.
     

Админ-управление виртуальным фоном

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

1. Включите функцию виртуального фона в настройках учетной записи или группы.
2. Щелкните Управление виртуальным фоном .
3. Щелкните Выберите файлы или перетащите изображения, которые хотите загрузить.
4. Дождитесь завершения загрузки, прежде чем закрыть это окно. После успешной загрузки вверху страницы появится небольшой баннер.
   После загрузки новых фонов пользователям потребуется выйти из клиента, а затем снова войти, чтобы получить фоны из Интернета.

Примечания :

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

Использование виртуального фона

1. Войдите в настольный клиент Zoom.
2. Щелкните Настройки .
   
3. Выберите Виртуальный фон .
   Примечание : Если у вас нет вкладки Virtual Background и вы включили ее на веб-портале, выйдите из настольного клиента Zoom и войдите снова.
4. Щелкните изображение, чтобы выбрать желаемый виртуальный фон.
5. (Необязательно) Добавьте собственное изображение, щелкнув и выбрав изображение, которое хотите загрузить.

Примечания :

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

1. Войдите в мобильное приложение Zoom.
2. Во время собрания Zoom коснитесь Еще в элементах управления.
   
3. Нажмите Виртуальный фон (Android) или Фон и фильтры (iOS).
4. Коснитесь фона, который хотите применить, или коснитесь + , чтобы загрузить новое изображение. Фон будет применен автоматически.
   
5. Нажмите Закройте после выбора фона, чтобы вернуться к собранию.

Примечания :

• После выбора варианта этот виртуальный фон будет использоваться для ваших будущих встреч.
  
• Дополнительные сведения о параметре Blur см. В статье «Размытый фон».
• Чтобы отключить виртуальный фон, снова откройте параметры виртуального фона и выберите вариант Нет .

Поиск и устранение неисправностей

Если у вас возникли проблемы с виртуальным фоном, попробуйте следующие советы по устранению неполадок:

• Если у вас нет вкладки «Виртуальный фон» в настройках клиента рабочего стола после его включения, выйдите из клиента и войдите снова.
• Вручную выберите цвет фона, чтобы убедиться, что выбран правильный цвет. Эта опция доступна только после того, как вы щелкнете изображение и выберете Я выбрал зеленый экран .
• Убедитесь, что фон сплошного цвета с минимальным количеством теней. Также убедитесь, что фон однородный при освещении. Идеально подходит 3-точечное освещение.
• Убедитесь, что зеленый цвет экрана не соответствует цвету вашей рубашки, волос или глаз.

Если проблема не исчезнет, ​​обратитесь в службу технической поддержки Zoom.

причин создания веб-сайта с черным фоном

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

Теперь я хочу сосредоточиться на том факте, что это полная противоположность белого (я расскажу об этом подробнее в тексте), потому что это то, что вам нужно и нужно в дизайне —

  что-то разная и интригующая, нравится цвет черный  

.

Но зачем оно вам? Когда вам нужно создать сайт с черным фоном? Я собираюсь рассказать обо всем этом и многом другом в этом посте и честно предупредить: он станет действительно темным, затем еще темнее и, наконец, темным оттенком, который даже темнее, чем # 555 (мои коллеги-разработчики знают, что я я о чем).

Итак, без лишних слов, давайте продолжим изучение этой черной материи!

Немного о дизайне черного фона

Видя, что у меня есть наследие дизайна и большой опыт в дизайне, я хочу сначала поделиться с вами своими впечатлениями и мыслями.

Конечная цель дизайнеров — сделать контент веб-сайта привлекающим внимание и выделяющимся на фоне похожих. Однако еще более важная цель (если не самая большая) — создать веб-сайт, который служит своей цели.

  Вот что вам нужно знать: дизайнеры должны подчеркивать важные элементы.  

Это наша цель почти во всем, что мы делаем, и наша задача — создать иерархию в этом акцентировании (чтобы выделить наиболее важные детали на веб-сайте).

Черный идеально подходит, если вы хотите что-то подчеркнуть на фоне любого другого цвета, особенно на белом. Белый цвет представляет собой пустое начало в нашем опыте (он обозначает дневной свет, пустую бумагу, страницу без содержимого и т. Д.), В то время как черный цвет считается ничем не отличным от любого другого цвета , например содержимого. Вот почему белый цвет — лучший выбор для фона веб-сайта.

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

Это впечатление вызвано психологическим эффектом, который черный цвет оказывает на людей ー мы склонны рассматривать черный цвет как отсутствие цвета, в котором потенциально есть что-то.

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

На практике это звучит так:

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

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

В чем проблема черного цвета?

  Главный из них - люди находят его менее привлекательным, чем другие цвета.  

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

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

Как видите, проблема с черным цветом фона вполне реальна.

Итак, есть ли место черному фону в дизайне?

В мире дизайна нет строгих правил относительно того, что можно и чего нельзя делать, и то же самое касается черного цвета.Однако с годами я заметил, что черный фон лучше всего подходит для следующих случаев (помните, это не официальный список, это только из моего опыта):

• Веб-сайты портфолио,
• Веб-сайты дизайнерских студий,
• Эксклюзивные презентации продуктов,
• Нетрадиционное содержание.

Советы по использованию черного цвета в дизайне

Перво-наперво: даже при использовании черного фона важно создать много «белого пространства», тоже, потому что черная поверхность визуально меньше.Белый фон также служит «разрывом», которого не хватает на темном фоне. Также важно более тщательно проверить удобство использования. По моему опыту, вы никогда не должны использовать легкий шрифт, и он всегда должен быть на 2 или 3 пикселя больше, чем тот же шрифт на белом фоне.

Как уже упоминалось, самая большая проблема с черным фоном — это удобочитаемость, и каждый дизайнер должен знать, как с этим справиться (подсказка: увеличение размера шрифта, кернинга, интерлиньяжа).

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

На что также нужно обращать внимание, так это на то, какие оттенки цвета использовать. Есть текст о том, как всегда следует использовать черный оттенок в дизайне и что этот оттенок должен происходить от основного цвета, который вы используете.Примеры, которые я добавил, используют тонированный и настоящий черный (№ 000), поэтому я думаю, что эта идея необязательна.

  Идея подкрашивать основной цвет исходит от природы, где очень трудно увидеть оттенки # 000000 и #ffffff (не только из-за формата).  

Еще одна проблема заключается в том, что в ночных режимах используется именно такая «проблемная» компоновка (макет черный фон). Каждое расширение браузера и инструмент для оптимизации в темноте предлагает вам возможность использовать темный фон и белый текст.Кроме того, если есть возможность изменить окружающий цвет в приложении, всегда есть опция черного фона.

Ситуации, в которых всегда можно использовать черный фон

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

• выделенные разделы,
• Верхний / нижний колонтитул / навигация,
• Комментарии,
• всплывающие окна.

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

То же самое и с другими упомянутыми мною элементами: разделами, комментариями и всплывающими окнами. Поскольку они не являются «основным содержанием», их можно и нужно стилизовать по-другому.

Заключение

  Если вам удастся найти подходящее место и время для использования черного фона, то дерзайте.  

Однако имейте в виду, что такие возможности случаются редко, и если у вас есть шанс, вам, вероятно, придется долго ждать, пока наступит следующий подходящий момент (в противном случае вам действительно повезет).

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

На этом пока все от меня! Надеюсь, этот пост помог вам и продемонстрировал несколько хороших примеров для всех любителей дизайна.

Примеры соответственно:

• https://www.apple.com/mac-pro/,
• http://www.formigari.it/,
• https://uppertodo.com/,
• https://www.spotify.com/,
• http://culture.basicagency.com/,
• https: // ninjatune.net / 2017 /,
• https://culture.doberman.co/,
• http://www.tramont.in/,
• https://20jahre.stimmt.ch/,
• https: // www.fiftythree.com/paste,
• http://www.ouiwill.com/,
• https://www.strv.com/,
• https://overclothing.com/,
• https: / /www.weareenvoy.com/.

Ранее опубликовано на https://kolosek.com/a-website-with-a-black-background-design/

Истории по теме

Теги

Присоединяйтесь к Hacker Noon

Создайте бесплатную учетную запись, чтобы разблокировать свой индивидуальный опыт чтения.

Пользовательские фоны — Поддержка — WordPress.com

Какое заявление может сделать пользовательское фоновое изображение или цвет! Многие из наших тем на WordPress.com позволяют вам настроить фон вашего сайта, загрузив изображение или выбрав цвет.

Содержание

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

Для начала перейдите в Мой сайт → Внешний вид → Настроить → Цвета и фон.

Если ваша тема поддерживает настраиваемый фон, вы увидите прямоугольник, представляющий фоновое изображение или цвет:

---

Установка фонового изображения

Чтобы загрузить фоновое изображение, щелкните прямоугольник, а затем нажмите кнопку Выбрать изображение , и вы сможете выбрать изображение из своей медиатеки или загрузить новое. После того, как вы выбрали изображение, вы можете вернуться в основной раздел Цвета, нажав Готово .

---

↑ Содержание ↑

Параметры фонового изображения

Когда вы выбрали фоновое изображение, появится кнопка Опции . При нажатии на эту кнопку будут показаны различные доступные вам варианты:

Позиция: Этот параметр позволяет расположить фоновое изображение слева (по умолчанию), в центре или справа на странице.

Повторить: Этот параметр определяет, повторяется ли фоновое изображение.Возможные варианты в следующем порядке:
Без повтора : Фоновое изображение будет показано на странице только один раз.
Мозаика по горизонтали : Фоновое изображение будет повторяться только по горизонтали.
Плитка по вертикали : фоновое изображение будет повторяться только по вертикали.
Мозаика (по умолчанию): фоновое изображение будет повторяться как по горизонтали, так и по вертикали на всей странице.

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

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

Скрыть фоновое изображение: Если вы больше не хотите использовать фоновое изображение, щелкните здесь, чтобы скрыть его.

---

↑ Содержание ↑

Настройка цвета фона

Предпочитаете использовать сплошной цвет фона вместо изображения? Не проблема! Просто выберите один из цветовой палитры или нажмите на ссылку выберите свой цвет под цветовой палитрой, чтобы выбрать свой собственный цвет:

Примечание: Если у вас уже установлено фоновое изображение, оно будет удалено.

---

↑ Содержание ↑

Сохранение изменений

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

---

↑ Содержание ↑

Важные примечания

• Цвет фона или изображение могут переопределить любой созданный вами настраиваемый CSS, относящийся к фону всего сайта.
• Некоторые темы содержат фоновые изображения по умолчанию как часть их дизайна.Во многих случаях эти предоставленные темой фоновые изображения удаляются всякий раз, когда вы загружаете собственное фоновое изображение или устанавливаете цвет фона. Это позволяет вашим настройкам выходить на первый план!

---

↑ Содержание ↑

Где найти классные фоновые узоры и текстуры

Ниже приведены ссылки на сайты, предлагающие бесплатные фоновые узоры и текстуры, которые вы можете загрузить и использовать в своем блоге.

---

↑ Содержание ↑

Подробнее

Подсказка — Предпосылки: используйте свой внутренний голос ( The Daily Post , 19 марта 2014 г.)

Видеоконференцсвязь

— использование виртуального фона в Cisco Webex Meetings Suite

10 мая 2021 г. | просмотр (ы) | люди думали, что это было полезно

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

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

Возникли проблемы или вы не видите параметр «Изменить фон»? Проверьте список требований, чтобы убедиться, что ваша версия Webex и компьютер или устройство поддерживают виртуальный фон.

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

На Mac или Windows вы можете использовать виртуальный фон на собраниях и мероприятиях с помощью настольного приложения Webex Meetings.

Изменение фона не поддерживается в Webex Training.

Прежде чем присоединиться

Щелкните Изменить фон и выполните одно из следующих действий:

• Чтобы размыть окружающую обстановку, оставаясь в фокусе, нажмите «Размытие».

• Чтобы использовать виртуальный фон по умолчанию, щелкните нужный.

• Чтобы использовать собственное изображение для виртуального фона, коснитесь значка +.

  Мы рекомендуем использовать изображение размером 1280 × 720 пикселей или больше. Изображения должны быть в формате .jpg или .png.

Во время встречи

1. В окне собственного просмотра щелкните значок Параметры видео, выберите «Изменить виртуальный фон» и выполните одно из следующих действий:

   • Чтобы размыть окружающую обстановку, оставаясь в фокусе, нажмите «Размытие».

   • Чтобы использовать виртуальный фон по умолчанию, щелкните нужный.

   • Чтобы использовать собственное изображение для виртуального фона, коснитесь значка +.

2. Когда вы будете готовы, чтобы все участники собрания могли увидеть вашу предысторию, нажмите Применить .Webex запоминает ваш выбор для следующей встречи.

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

Чтобы использовать виртуальный фон для WBS40.4.12 и более поздних версий, администратору вашего сайта нужно только выбрать Включить виртуальный фон в общих настройках сайта. Для более ранних сайтов они также должны включить отображение аватаров пользователей в клиенте собрания (собрания).

1	Нажмите видео , а затем нажмите Виртуальный фон.
2	Выполните одно из следующих действий: Чтобы размыть окружающую обстановку, оставаясь в фокусе, коснитесь «Размытие». Чтобы использовать виртуальный фон по умолчанию, коснитесь нужного. Чтобы использовать собственное изображение для виртуального фона, коснитесь значка +. Мы рекомендуем использовать изображение размером 1280 × 720 пикселей для альбомной ориентации и 1280 × 1920 пикселей для портретной ориентации.Изображения должны быть в формате .jpg или .png. Выбранное изображение сохраняется на ваш компьютер или мобильное устройство, чтобы вы могли использовать его снова для последующих встреч. Только изображения сохраняются на устройство, на которое вы их добавляете.Если вы хотите использовать то же изображение на другом устройстве, вам необходимо добавить его на новое устройство.
3	Когда вы будете готовы, чтобы все участники собрания увидели ваш фон, нажмите «Применить».Webex запоминает ваш выбор для следующей встречи.

На устройствах Android вы можете использовать виртуальный фон на совещаниях Webex с помощью мобильного приложения Webex Meetings. Ты можешь измениться ваш опыт после того, как вы присоединитесь.Если вы не хотите, чтобы кто-то отвлекался на ваше окружение, прежде чем настраивать виртуальный фон, присоединяйтесь к встрече с выключенным видео.

Изменение фона не поддерживается в Webex Training и Webex Events.

1	Нажмите видео а затем нажмите «Виртуальный фон».
2	Выполните одно из следующих действий: Чтобы размыть окружающую обстановку, оставаясь в фокусе, коснитесь «Размытие». Чтобы использовать виртуальный фон по умолчанию, коснитесь нужного. Чтобы использовать собственное изображение для виртуального фона, коснитесь значка +. Мы рекомендуем использовать изображение размером 1280 × 720 пикселей для альбомной ориентации и 1280 × 1920 пикселей для портретной ориентации.Изображения должны быть в формате .jpg или .png. Выбранное изображение сохраняется на ваш компьютер или мобильное устройство, чтобы вы могли использовать его снова для последующих встреч. Только изображения сохраняются на устройство, на которое вы их добавляете.Если вы хотите использовать то же изображение на другом устройстве, вам необходимо добавить его на новое устройство.
3	Когда вы будете готовы, чтобы все участники собрания увидели ваш фон, нажмите ПРИМЕНИТЬ.Webex запоминает ваш выбор для следующей встречи.

Мы собрали информацию о версиях Webex, операционных системах, компьютерах и устройствах, поддерживающих виртуальные фоны.Возможность изменить фон не отображается, если эти требования не выполняются.

Если вы используете Windows, функция «Изменить фон» может не работать, даже если эта опция отображается.

Окна

Версия Webex:

Операционная система:

Процессор:

• Процессор Intel Core i3, i5 или i7 серии 4000 или выше

• Двухъядерный процессор Intel Core i9 или выше *

• Двухъядерный процессор Intel Xeon или выше *

• Другие процессоры Intel: 6 ядер или выше *

• Процессоры AMD: 4 или более ядер с тактовой частотой 3 ГГц или выше **

• Процессоры не Intel и AMD: 8 ядер или выше

Память:

Mac

Версия Webex:

Операционная система:

Процессор:

• Яблоко M1 **

• Двухъядерный процессор Intel Core i9 или выше

• Двухъядерный процессор Intel Core i7 серии 5000 или выше

• Четырехъядерный процессор Intel Core i7 серии 3000 или выше **

• Двухъядерный процессор Intel Core i5 серии 6000 или выше

• Четырехъядерный процессор Intel Core i5 серии 3000 или выше

• Двухъядерный процессор Intel Core i3 серии 8000 или выше *

• Двухъядерный процессор Intel Xeon или выше

• Двухъядерный процессор Intel Core m3 серии 7000 или выше

• Другие процессоры Intel: 6 ядер или выше

* Требуется Webex версии 41.1 или новее ** Требуется Webex версии 41.5 или более поздней версии

iOS

Версия Webex:

Устройство:

• iPhone 7 и новее

• iPad (5-го поколения) и новее

• iPad Pro и новее

• iPad mini (5-го поколения) и новее

• iPad Air (3-го поколения) и новее

Android

Версия Webex:

Операционная система:

Процессор:

Память:

Поддерживаются только устройства Android, отвечающие этим требованиям.

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

• Убедитесь, что место, в котором вы находитесь, хорошо освещено.

• Сядьте перед стеной или другим статичным фоном.

• Носите одежду другого цвета, чем ваше окружение.

В зависимости от возможностей вашего компьютера вы можете закрыть все программы с высокой загрузкой ЦП или ГП, которые работает в фоновом режиме.Это может улучшить производительность при использовании виртуального фона.

Продукт: Webex Events (Classic), Webex Meetings, Webex Training

Действия: видеоконференцсвязь

Операционная система: iOS, Mac, настольный компьютер Windows

Версия: WBS40, WBS41

Настройте внешний вид вашего сообщества

Изменить внешний вид настройки находятся в Настройки в правом верхнем углу сайта SharePoint.Для сайтов групп вы можете изменить тему и заголовок. Для коммуникационных сайтов вы также можете изменить макет вашей навигации и добавить нижний колонтитул на свой сайт. Дополнительные сведения см. В разделе Изменение внешнего вида сайта SharePoint.

Примечание: Чтобы изменить внешний вид, вам потребуются права владельца сайта или разрешения на разработку сайта.

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

1. На главной странице сайта вашего сообщества щелкните Настройки .

2. Щелкните Измените внешний вид , чтобы выбрать из набора дизайнов.

3. Выберите дизайн, который хотите использовать, а затем настройте его, добавив новый фон, макет, цвета и шрифты.

   • Чтобы изменить фон, нажмите Изменить и найдите изображение, которое хотите использовать, на своем компьютере или на сайте SharePoint. Или, чтобы удалить фоновое изображение, нажмите Удалить .

   • Чтобы изменить цвета, используемые в дизайне, щелкните меню цветов, прокрутите цветовые схемы и выберите ту, которую хотите использовать.

   • Чтобы изменить макет сайта, выберите один из доступных макетов.(Перечисленные макеты сайта основаны на доступных главных страницах вашего сайта.)

   • Чтобы изменить шрифт и гарнитуру, выберите набор шрифтов, например Segue UI, Georgia или Rockwell.

1. Щелкните Попробуйте , чтобы предварительно просмотреть свой сайт в новом облике.

2. Если вам нравится внешний вид, нажмите Да, оставьте . Вы попадете на страницу настроек сайта, где можете изменить заголовок и логотип или настроить дополнительные параметры. Если вам не нравится тема, нажмите Нет, не совсем там и повторите шаги с 1 по 4.

Вверх страницы

Добавить заголовок, логотип и описание

1. На главной странице сайта вашего сообщества щелкните Настройки > Настройки сайта.

2. На странице «Параметры сайта» в разделе «Внешний вид» щелкните Название, описание и логотип .

3. В поле Заголовок введите заголовок, который будет отображаться на вашей странице.

4. В поле «Описание» введите краткое описание вашего сайта. Это описание будет отображаться в результатах поиска и, если оно развернуто, на портале сообщества.

5. В поле «Вставить логотип» выберите:

   • С КОМПЬЮТЕРА, чтобы загрузить изображение с вашего компьютера. В диалоговом окне «Добавить документ» введите или найдите имя файла и затем нажмите ОК .

   • FROM SHAREPOINT, чтобы использовать изображение из папки Site Assets вашего сайта SharePoint.Выберите файл, который хотите использовать, и нажмите Вставить . Вы также можете добавить документы в папку, нажав добавить .

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

7. Вернитесь на домашнюю страницу вашего сообщества, чтобы просмотреть изменения.

Создание бесшовных текстур веб-фона за считанные минуты

Вы когда-нибудь задумывались, как некоторые веб-дизайнеры придумывают такие великолепные текстуры фона? На самом деле это намного проще, чем вы думаете. Это займет всего несколько минут и один фильтр Photoshop, который вы, вероятно, никогда не использовали.

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

Легкий путь или трудный путь

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

Однако, если вы торопитесь, просто возьмите откуда-нибудь бесплатную текстуру и пропустите первые несколько шагов. Вот три отличных ресурса для начала (из нашей статьи «40 удивительных ресурсов для бесплатного дизайна»).

Взятые и потерянные

CG Текстуры

Король текстуры

Если вы хотите чего-то более уникального, откройте Photoshop и следуйте инструкциям.

Шаг 1. Новый холст

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

В Photoshop создайте новый документ размером 800 на 800 пикселей с разрешением 72 DPI и RGB.

Теперь залейте холст сплошным цветом от среднего до темного.Вы можете выбрать что угодно, но я выбрал # 80ac4b.

Шаг 2. Создайте собственную кисть

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

Для начала создайте новый документ, возьмите жесткую круглую кисть и щелкните один раз в центре холста, чтобы создать черную точку. Я добавил немного черного внешнего свечения, чтобы немного усилить эффект боке.Теперь перейдите в Edit> Define Brush Preset.

Назовите свою кисть, сохраните ее и вернитесь к другому холсту.

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

Ste 3: Paint It

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

Вот шаблон, который я придумал:

Шаг 4: Смещение

Это та часть, где Photoshop берет на себя ответственность и выполняет хитрый трюк, который экономит нам много времени. Сначала убедитесь, что ваши слои объединены в плоский документ. Теперь перейдите в меню и выберите «Фильтр»> «Другое»> «Смещение».

Задайте для горизонтального и вертикального смещения половину размеров холста в пикселях и выберите вариант обтекания.

Вуаля! Бесшовные текстуры фона. Хорошо, может быть, нет.Однако большая часть работы была сделана за нас, и нам просто нужна небольшая очистка, чтобы заставить ее работать.

Шаг 5. Очистите швы

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

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

Шаг 6: Добавляем еще немного боке

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

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

Затем мы протестируем его в веб-браузере, чтобы убедиться, что он работает.

Шаг 7. Добавьте его на веб-страницу

Лучший способ проверить текстуру — просто создать быструю веб-страницу.Создайте пустой HTML-документ и задайте стиль тела с помощью следующего кода CSS:

.

body {background-image: url (yourFilenameHere.jpg); фон-повтор: повторение; }

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

Органические текстуры

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

Сначала обрежьте края, их будет слишком легко заметить в повторяющемся узоре. Затем запустите команду смещения, как мы делали раньше.

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

Когда вы это сделаете, сохраните его и загрузите в браузере, как раньше, чтобы увидеть, есть ли у вас какие-нибудь уродливые области.

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

Заключение

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

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

Справка: Справочная информация | Центр Сообщества | Фэндом

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

Обзор

Фоновое изображение настраивается в дизайнере тем в разделе «Настройка».Вы можете загружать фон в форматах PNG, JPG или GIF, если размер файла не превышает 300 килобайт (КБ). Если он больше, вы можете попробовать уменьшить его размер, увеличив сжатие, уменьшив качество изображения, его размеры или изменив формат (JPG с потерями всегда будет меньше, чем PNG без потерь).

Окончательный вид фона будет зависеть от нескольких факторов, наиболее важными из которых являются размер экрана и размер фона :

• На небольших дисплеях (шириной 1065 пикселей или меньше) макет автоматически изменит размер области содержимого, чтобы заполнить весь экран, и будет использовать основной цвет фона ( основной в конструкторе тем) вместо изображения.
• На больших дисплеях (более 1066 пикселей) фон будет виден по обе стороны от области содержимого. Область содержимого перестает расширяться, когда достигает максимальной ширины 1240 пикселей.

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

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

Во всех случаях опция fix позволяет вам выбрать, будет ли фон оставаться фиксированным, оставаться видимым при прокрутке страницы вверх или вниз или оставаться выровненным по верхнему краю, уступая место цвету фона ( main , как описано выше).

Создание обложки фона

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

• Пространство изображения : области за пределами серой области содержимого, в которых всегда будет отображаться фоновое изображение. Части темно-серого цвета встречаются только иногда, в зависимости от размера экрана посетителя.Убедитесь, что ваше изображение хорошо смотрится в темных областях.
• Пространство содержимого : Светло-серая область в середине шаблона — это место, где будет размещаться содержимое вики-страницы. По умолчанию фон за этой областью вообще не будет виден, но прозрачность можно добавить через конструктор тем.

Может быть полезно использовать шаблон фона, чтобы создать свой собственный креативный фоновый скин! Вы можете скачать простой шаблон в формате PSD отсюда. Формат PSD совместим с большинством программ для редактирования изображений, такими как вышеупомянутые Photoshop или GIMP.

Советы дизайнера тем

• Создавая скин, всегда учитывайте широкий диапазон возможных разрешений экрана. Чем лучше вы адаптируете свой скин под различные разрешения экрана, тем счастливее будет ваше сообщество.
• Обои, ключевые изображения и поиск изображений, основанный на теме вашего сообщества, могут быть хорошей идеей, чтобы найти творческое вдохновение для вашего фона.
• При создании фона учитывайте всю площадку. Яркие яркие обои могут мешать разборчивости содержимого, если для их фона установлена ​​высокая прозрачность.И наоборот, приглушенный тонкий фон может стать последним штрихом, который нужен вашей вики.
• Чем шире переход / градиент цвета на коже, тем плавнее будет переход к цвету фона. См. Раздел Help: Theme Designer / gradient для получения более подробной информации о том, как создавать градиенты на фоновом изображении.

  No related posts.