как сделать фон для сайта в фотошопе

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

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

Созданный нами фон для сайта будет выглядеть таким образом:

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

1. Создайте новое изображение произвольного размера (при выборе исходите из размера, который нужен вам для фона сайта, я выбрал 1280x1024x) и залейте его чёрным цветом (инструмент Paint Bucket Tool (Заливка)).

2. Возьмите инструмент Line Tool (U) белого цвета с такими параметрами:

И проведите линию из правого нижнего угла в левый верхний:

3. Растеризуйте линию (правой кнопкой мыши -> Rasterize). Затем создайте копию слоя (Ctrl+J) и нажмите Ctrl+T, появится рамка свободной трансформации. А сейчас внимание — один из ключевых моментов нашей работы: переместите ось вращения на правый нижний угол рамки:

Это делается для того, чтобы вращение (и любые другие трансформации) объекта производилось относительно этой точки, а не относительно центра, как установлено по стандарту.

Итак, ось вращения перемещена, теперь нужно повернуть линию на 1 градус, делается это так:

Смещение выполнено, теперь нажмите Enter для применения трансформации.

4. Слейте 2 слоя с линиями (Ctrl+E), затем клонируйте получившийся слой (Ctrl+J) и вновь выполните вращение, но уже на 2 градуса (не забывайте перемешать ось):

5. Проделайте ещё раз те же самые действия (слейте слои, затем дублируйте их и вращайте, но уже на 4 градуса). Должно получиться следующее:

6. И ещё раз сделайте тоже самое, только теперь вращение на -8 градусов.

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

7. Теперь возьмите инструмент Polygonal Lasso Tool (L), и сделайте выделение вокруг пучка линий:

Создайте новый слой (Shift+Ctrl+N) и залейте его чёрным цветом:

А теперь примените Filter (Фильтр) -> Render (Визуализация) -> Difference Clouds (Облака):

Не снимая выделения Filter -> Texture (Текстура) -> Stained Glass (Витражное стекло):

8. По прежнему оставляем выделение, создаём новый слой, берем градиент (Gradient Tool), выбираем градиент радугу (или любой другой, который вам понравится) и заливаем таким образом:

Для слоя с градиентом устанавливаем режим наложения Overlay и Opacity (Непрозачность) 52%, для витража — Screen и 40%. Для линий ставим непрозрачность на 57%:

9. Осталось поработать немного с фоном: возьмите линейный градиент с цветами #000210 и #11005b и выполните заливку, чтобы получилось нечто похожее:

10. Создайте новый слой, залейте его чёрным цветом и примените уже знакомый Filter -> Render -> Difference Clouds, а затем Filter -> Texture -> Stained Glass с такими параметрами:

Режим смешивания поставьте Overlay, Opacity 42%:

Вот такой фон для сайта получился в результате:

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

Я прощаюсь с вами до следующего урока photoshop и желаю вам успехов. Не забывайте также оставлять комментарии и нажимать на социальные кнопки.

Источник: http://psforce.ru/dizajn/kak-sdelat-fon-dlya-sajta.html

Здравствуйте, уважаемые читатели блога olegastanin.ru! На связи ваш хороший знакомый в сфере блогостроения Олег Астанин. И сегодня я затрону очень, на мой взгляд, нужную тему. Создание графического изображения, которое будет выступать в качестве фона для сайта.

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

Создание фона для сайта в фотошопе

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

При создании фонового изображения вы можете использовать следующие размеры документа: 300×300, 150×150, 75×75 и т.д. Я использую 75×75, потому что он будет меньше всего весить по размеру и будет быстрее загружаться.

Создаем новый документ размером 75×75.

Далее выбираем необходимый цвет для дальнейшей заливки. После того, как определились с цветом, заливаем наш квадратик этим цветом. Я выбрал вот такой цвет.

Далее, для более красивого эффекта наложим фильтр, под названием ШУМ (Noise). Я выбрал вот такие параметры для моего фонового изображения.

В итоге у меня получилось вот что.

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

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

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

Нажимаем сочетание клавиш «Ctrl+Alt+Shift+S» или переходим в меню «Файл» далее выбираем пункт «Сохранить для Web и устройств…». Выберите формат JPG и установите качество по максимуму. Пусть картинка остается такой, какая есть. Можно, конечно поставить и 80%.

ЧИТАЙТЕ ТАКЖЕ:  сделать копию скидочной карты

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

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

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

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

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

Вот что получилось у меня.

Однотонная заливка с шумом. Такие вещи можно делать с помощью CSS3. Причем нагрузка на трафик будет минимальная. Но, в CSS3 надо еще уметь разбираться. А если добавить к нашему фону какой-нибудь текст, то настроение сразу же меняется.

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

З.Ы. Чуть не забыл, вот, держите ссылку на мой скромный архивчег с фонами .

Источник: http://olegastanin.ru/fon-dlya-sajta-v-photoshop-svoimi-rukami.html

Чтобы сделать фон для сайта всего за 10 шагов вам потребуется фотошоп версии 7 или выше.

1. Создаем новый слой произвольного размера. Устанавливаем основным цветом черный, а фоновым белый.

2. Выбираем инструмент “Градиент”, тип “Конусовидный” с цветами от основного к фоновому.

На панели задач фотошопа выбираем режим наложения “Разница”, проводим градиент несколько раз в разных направлениях, пока не получится примерно как на рисунке:

3. Копируем слой перетащив строку слоя на значек “Новый слой” на панели слои, ставим новому слою режим наложения “Замена светлым”.

4. При помощи фильтра ФИЛЬТР – РЕНДЕРИНГ – БЛИК поставим несколько бликов на темных участках в новом слое.

5. Копируем слой и применяем к нему фильтр СКРУЧИВАНИЕ (Фильтр – искажение – скручивание) спараметром угол 500. Ставим новому слою режим наложения “Перекрытие”. Склеиваем слои (Слой – объеденить видимые).

6. Копируем слой и отражаем его по горизонтали (Редактирование – трансформирование – отразить по горизонтали), меняем режим наложения на “Замена светлым”. Склеиваем слои (Слой – объеденить видимые).

7. Копируем слой и отражаем его по вертикали (Редактирование – трансформирование – отразить по вертикали), меняем режим наложения на “Замена светлым”. Склеиваем слои (Слой – объеденить видимые).

8. Копируем слой и поворачиваем его на 90 градусов по часовой стрелке (Редактирование – трансформирование – поворот на 90 градусов по часовой), меняем режим наложения на “Замена светлым”. Склеиваем слои (Слой – объединить видимые).

9. Увеличиваем контрастность нашего изображения (Изображение – коррекция – яркость/контрастность), сместив ползунок контрастности примерно до 70.

10. Теперь раскрасим наше изображение ИЗОБРАЖЕНИЕ – КОРРЕКЦИЯ – ЦВЕТОВОЙ ТОН/НАСЫЩЕННОСТЬ в нашем примере были поставлены параметры как на рисунке.

Как вам такой фон? У всех получилось сделать?

Источник: http://photoshoper.me/kak-sdelat-fon-dlya-sajta-vsego-za-10-shagov/

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

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop’е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка, но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

ЧИТАЙТЕ ТАКЖЕ:  как сделать пончик из бумаги

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

Убираем стыки на будущем бесшовном фоне

И так, пойдем далее в доведении до ума нашего будущего бесшовного фона из цветов.

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

Далее будет самый творческий процесс. Берем инструмент Ластик, самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать ).

У меня получилось вот так:

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

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

Источник: http://artinblog.ru/87-kak-sdelat-besshovnij-fon.html

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

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

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

Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).

(нажмите на картику для просмотра оригинала)

Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате — кликайте сюда и качайте

Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.

Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):

— фон с бабочками (для шапки сайта);
— шрифты;
— картинка c девушками;
— картинки для слайдера;
— иконки социальных сервисов;
— картинки для новостей;
— картинка рассылки;
— картинка счетчика.

Перед началом работы разделим наш дизайн на составляющие:

1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар — боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер — постраничная навигация по сайту;
8. Футер — нижняя часть сайта.

Приступим к созданию нашего дизайна в фотошопе.

Настройка фотошопа

1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши — если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).

В окошке я указал следующие параметры:

2. Перед началом работы произведем некоторые настройки фотошопа:

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

— поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

— отобразим палитру History (История) идем Windows→ History — с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.

— включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

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

Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:

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

Создание фона и подложки для сайта

3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ — нажимаем CTRL+A. Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→ Define Patter (Правка Определить узор), пишем название (я написал pattern).

4. Переходим на наш основной документ, идем Edit→Fill (Правка Заливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).

5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой Новый Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, Окно Слои, F7) должен появится новый слой.

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

ЧИТАЙТЕ ТАКЖЕ:  триггеры в презентации как сделать

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

После этого берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.

(нажмите на картику для просмотра оригинала)

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow (Отбрасывать тень) — цвет выбрал #5F1338:

На этом с фоном закончим и перейдем к созданию шапки для сайта.

Делаем шапку для сайта

6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK.

Слой должен вставиться ровно посередине документа.

Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:

Первый способ: берем инструмент Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.

Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)

После этого в настройках элемента Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):

В итоге у нас получилось:

(нажмите на картику для просмотра оригинала)

Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область — выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.

Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20%.

7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой — Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмем OK.

После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.

(нажмите на картику для просмотра оригинала)

После этого заливаем слой любым цветом — Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:

Далее кликаем по полоске с градиентом и ставим такие цвета:

Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+> — опустить слой на порядок или Ctrl+ <— поднять слой на порядок).

Делаем логотип для сайта

8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись — у меня это WomanSite.ru, и пишем ее. Настройки для надписи я задал такие:

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

C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.

Далее с помощью этого же инструмента Horizontal Type Tool (Горизонтальный текст), выделим текст «Woman» и поменяем его цвет на другой #c9584a.

Точно так же поступим и с текстом «Site.ru», только цвет поставим #797878.

Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).

На этом с текстом все, переходим к логотипу.

9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.

Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.

Слою с логотипом задаем Opacity (Непрозрачность) — 25% и отключаем видимость некоторых слоев — что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)

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

Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (ОкнаПути).

Далее с помощью лупы (инструмент Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.

Берем инструмент Pen Tools (Перышко, P) , поставим ему такие настройки:

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

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

Источник: http://blogohelp.ru/urok-fotoshop-kak-sdelat-dizajn-sajta-prosto

Ссылка на основную публикацию