Фото от INVIVO
Кастом байки
Лучший дизайн сайтов
Carlos H. Reinesch
Меню Jimdo web 1.0
Брошюры [подборка]
Авто тематика
Навигации
10.0 Оценка
Шаблон Fashion
Цветные текстуры
Обои Девушки
Шрифты
Природа и животные
Слайдеры jQuery
Аниме и рисунки

  • Креативный фон сайта

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

    Для этого ничего сверх выдающегося от вас не потребуется, ну конечно не считая 10-15 минут и 2-х изображений.

     

    1. Для начала в Фотошопе создадим черный фон и изображение шириной 1920px (Этот размер должен быть минимальным, так как в большинстве своем разрешение монитора 1920х1200 пикселей. И картинка будет плохо смотреться на мониторах с большим разрешением, если установить меньшую ширину картинки.)

     

    2. Теперь возьмем изображение звездного неба и перетащим его на наш фон. Высоту главного изображения я взял 2000px, что бы вниз добавить еще одну картинку острова в облаках.

    3. Далее сохраняем все в Фотошопе. Затем берем наш остров с облаками и перетаскиваем на наш первый рисунок с темным фоном и звездным небом. Что бы края изображений совпадали, возьмем кисть, установим размытие на ней, и с помощью нее просто закрасим верхний "шов", который у нас был между изображениями.

    4. Низ у нашего изображения закрасим белым, той же размытой кистью. Далее сохраним результат. При сохранении, убедитесь, что картинка не весит более 512kb, так как на Jimdo, изображения большего размера не загружаются. Сделать так, что бы картинка весила меньше, но при этом не намного теряла в качестве, можно путем уменьшения процента качества. В Фотошопе это выглядит так: нажимаем "Файл"-"Сохранить для Web"- И тянем в верхнем правом углу ползунок "Качество".

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

    5. Теперь нам надо вставить все на сайт. Для этого нам нужно прописать в CSS наш дальнейший вид фона. Находим в CSS "body" и заменяем на следующий код:

     

    body {

    font: 12px Arial; /* размер и стиль нашего шрифта */

    color: #000; /* цвет шрифта */

    background: #FFFFFF url(mainbg.jpg) no-repeat; /* цвет фона сайта и в скобках, наше название изображения. Тег "no-repeat" - это изображение без повторения */ 

    background-position: top center; margin: 0 auto; /* позиция изображения по центру */

    }

     

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

     

     

    background-attachment: fixed; /* фиксация изображения */

     

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

     

    автор: Аслан Сейфуллаев.

  • Это надо знать. Шрифты. скрипты

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

  • Продвижение в поисковиках. статьи

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

  • Креативный фон сайта.скрипты

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