Стильный фон для сайта

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

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

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

Скачать файлы урока

Первое, что необходимо сделать это подготовить файлы «index.html» и «style.css» для урока. Код этих двух файлов представлен ниже:

После того, как создали файлы, сохраните их в кодировке UTF-8. Теперь перейдем к следующему этапу. Нам понадобиться программа Adobe Photoshop CS5 или любая другая версия, в которой вам удобно работать. Я работаю в CS5.

Запустите программу и создайте новый документ размером 500×500 пикселей.

Создание нового документа в фотошопе

Выберите инструмент «Кисть (Brush)» и установите вот эту кисть (скачать кисть). Если вы не умеете устанавливать кисти, то прочтите статью про то, как установить кисть в программе Photoshop.

Выберите понравившуюся кисть и установите любой цвет в качестве основного. Выбирайте цвет так, чтобы он не был слишком резким для глаз. Я выбрал кисть под номером 442, установил размер кисти равный 400 и установил основной цвет # 664819.

Выбор кисти для фотошоп

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

Слои в фотошопе

Убедитесь, что у вас выбран слой «Brush» и кликните один раз левой кнопкой мыши на рабочем пространстве документа, чтобы у вас получилось нечто подобное.

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

Теперь скройте слой заднего плана «Background» нажав на изображение глаза возле слоя, чтобы отключить его изображение и оставить только изображение вашей кисти и прозрачный фон.

Отключить задний фон в фотошопе

Убедитесь, что выбран слой «Brush». Теперь пройди в главное меню, и выберите команду «Image – Trim (Изображение — Тримминг)» Поставить переключатель в положение «Transparent Pixels (Прозрачных пикселов)».

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

Для тех, у кого программа на английском языке.

Меню Изображение фотошоп

Для тех, у кого программа на русском языке.

Стильный фон для сайта

После чего остается выбрать в главном меню пункт «File – Save for Web & Devices (Файл – Сохранить для Web и устройств)» или нажать сочетание клавиш «Ctrl+Shift+Alt+S». Выбрать сохраняемый формат PNG-24 и сохранить изображение в папку, где расположены основные файлы «index.html» и «style.css». Для удобства можете создать папку «images», где будут храниться все ваши изображения.

Стильный фон для сайта

Теперь нам необходимо получить еще одно такое же изображение, но только уже отраженное горизонтально, для правого угла. Для этого пройдите в меню «Edit – Transform – Flip Horizontal (Правка – Трансформация – Отразить по горизонтали)» и получим изображение идентичное первому, только отраженное.

Стильный фон для сайта

Все, наш фон готов!

Так как урок получился достаточно длинным, мне придется его разделить на две части. В этой части мы создали два файла «index.html» и «style.css» и два изображения для нашего будущего сайта.

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

Если у вас остались вопросы, оставляйте комментарии и я вам отвечу!

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

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

0


This Post Has Been Viewed 21 Times

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

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

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

    Спасибо Вам, Олег, благодаря таким понятным статьям мы тут все скоро станем профессиональными сайтостроителями и фотошоперами. :) Хотя, если с HTML я еще более менее дружу, то в файл style.css лезть очень опасаюсь. Все кажется, что сделаю что-то не то.

  • Татьяна06.04.2016 в 19:36

    Так просто? Ничего себе... Главное скачать побольше разных кистей и творить) Не терпится посмотреть вторую часть статьи.

  • den114207.04.2016 в 22:34

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

  • Игорь, 06.12.2016 в 22:09

    довольно просто и понятно даже для новичка

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

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

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

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

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

  • Рубрики

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

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

    Канал на
    You Tube

    Я на
    Twitter