Иногда в оформлении сайта встречается очень красивый узорчатый фон, который однако не пестрит, но делает страницу более «богатой». Причем, чем тоньше рисунок и слабее контраст, тем лучше выглядит сайт. Фишка тут как раз в слабом контрасте между фоном подложки и самим узором. Подобных текстур, конечно же, можно найти в сети уже достаточно много. Но гораздо интереснее самостоятельно изготовить узор. Для этого вовсе не понадобятся какие-то дополнительные «шейпы» или кисточки. В Фотошопе их и так предостаточно.
Для начала нам понадобится немного настроить Фотошоп. Зайдем в раздел Edit – Preference – Guides, Grid & Slices. Здесь нам нужно будет выставить настройки для Линеек. Gridline every — устанавливаем значение в 250 пикселей, Subdivisions — значение 2.
Теперь создадим новый документ с размерами 500х500 пикселей. Небольшое замечание: этот размер я выбрала для удобства. На самом деле лучше задать меньший размер, чтобы соответственно получить более мелкий масштаб узора. Например 100х100 — идеальный вариант.
Чтобы включить отображение линеек, нажмите Ctrl и ‘ (одинарная кавычка).
Теперь в панели инструментов выберем Custom Shape Tool, и в выпадающем списке «шейпов» вот такую загогулину:
Создаем новый слой поверх фона, затем устанавливаем курсор в центр пересекающихся линий в верхней части рисунка (чтобы попасть точнее, можно увеличить масштаб изображения) и делаем такой хитрый трюк: зажимаем клавишу Shift, нажимаем левую кнопку мыши, зажимаем клавишу Alt и «вытягиваем» симметричное изображение шейпа точно из самой середки перекрестия.
Теперь нам нужно скопировать слой с нарисованной формочкой три раза. Каждую копию при помощи инструментов Трансформации (Edit - Transform Path) — повороты на 90 и 180 градусов, и Перемещения (Move Tool) — разносим по другим узлам сетки. В результате получим вот такую фигуру:
Добавляем новый слой, на котором рисуем центральную часть узора при помощи следующего «шейпа»
Действуем точно так же: устанавливаем курсор в самый центр рисунка, зажимаем поочередно клавишу Shift, левую кнопку мыши и клавишу Alt и «вытягиваем» фигуру из центра.
Теперь нам нужно объединить все фигуры в один узор. Но сначала выключим «глазик» основного фона. Он нам еще понадобится отдельно. Для объединения заходим в раздел Layer – Merge Visible. В результате должно остаться ровно два слоя: фон и узор. Переключимся на слой с узором. Затем инструментом Прямоугольное Выделение (Rectangular Marquee Tool) выделяем правый нижний квадрант рисунка. Копируем выделение в отдельный слой. Копию перемещаем в левый верхний квадрант.
Точно так же поступаем и с остальными углами. Снова объединим все слои кроме фона.
А теперь слой с фоном зальем темно-бордовым цветом #660000. Затем переключимся на слой с узором, зайдем в раздел Image – Adjustments – Hue/Saturation. Здесь сначала установим галочку в окошке Colorize, а затем выставим значения ползунков как на приведенном рисунке. Наш узор станет цветным и мало-контрастным по отношению к фону. Очень классно выглядит такой узор, когда фон темно серый, а узор чисто-черный.
Теперь уже объединяем фон с узором в один слой. Далее можно полученный рисунок сохранить как готовый фоновый паттерн. По умолчанию он будет размножен по всей странице сайта, если будет в листе стилей CSS указан как фоновый рисунок.
А можно из него же сделать Фотошоповский паттерн для заливки. Для этого достаточно зайти в раздел Edit – Define Pattern, задать ему имя и затем в других работах использовать как заполнение — инструмент Ведерко (Paint Bucket Tool) включенный в режиме Pattern.
Здравствуйте! Меня зовут Настя Манно. Я веб дизайнер и автор этого блога
Это стандартными шэйпами, а более сложные узоры как делать?
Я у себя в блоге рисунок на фон тоже узором сделал, а узор этот любезно предоставлен кем-то рассылающим спам в почту.
[Ответить]
А где такой красивый шрифт который в заголовке взять? :-)
[Ответить]
Например прям в виндоуз :)
В CSS: font-family:Georgia,”Times New Roman”,Verdana;
Начиная с XP будет в каждой винде
[Ответить]
Привет, Илья! Более сложные узоры будут чуть позже. Это пока первый урок из серии фонов.
Зигмунд, этот шрифт называется Fertigo и скачать его можно вот здесь http://www.josbuivenga.demon.nl/fertigo.html
[Ответить]
Пиши еще, информация полезная.
Кстати, установи себе кнопки для социальных закладок, так удобнее будет. Я бы уже нажимать на них начал :)
[Ответить]
Отлично, мне нравится :)
Жду продолжения.
[Ответить]
Спасибо огромное!
Оч. полезная статья.
[Ответить]
У меня они раньше были. Потом убрала. Слишком много ссылок на странице получалось. Возможно, Гугль меня за это и не любит пока. :)
Absurd, cheke, спасибо друзья! :))) Продолжение будет!
[Ответить]
Спасибо Настя, всегда приятно заходить к тебе в гости:)
[Ответить]
Игорь, здравствуй! Рада тебя видеть! :)
[Ответить]
ElaSTiC, типа с острил, да?
[Ответить]
Зигмунд, Илья просто ошибся. Этот шрифт только похож немного на перечисленные им. В Виндовзе такого нет. :)
[Ответить]
Настя! Почему вы считаете что вас не любит Google?
Проиндексированно 61 стр.
А закладки действительно перегружают визуальный ряд.
Хороший у вас блог! :)
[Ответить]
Спасибо, Сергей! Про гугль - это шутка конечно же. :) Гугль молодец, индексирует бложик исправно. А то, что ПР пока равен 0, так это просто дело времени. :)))
[Ответить]
Настя, не забывайте что 10 равно 0, это смотря как посмотреть.
[Ответить]
Sigmund Freud, Настя Манно, этот шрифт называется Georgia, все заголовки моего блога им написаны, если об этом вопрос был.
Тему свою я делал сам, поэтому ошибиться здесь сложно.
[Ответить]
Хм, странно. Только что увидел, что второй комментарий от Sigmund Freud, на почту пришло:
[Ответить]
Это конечно интересно, но хотелось бы узнать по больше про макросы в фотошоп. Не получаетс автоматически сохранить фото. Вопрос не по теме , конечно , но надеюсь что он будет интересен всем
[Ответить]
Саш, чесслово не поняла. :)
2 ElaSTiC: Илья, это классический испорченный телефон! :))) Зигмунд на самом деле спрашивал про шрифт, использованный в картинке к уроку.
2 Серге1 “рок-н-ролл”: про Макросы ничего не расскажу, потому как сама темой не владею. Возможно это как раз больше при массовой обработке фотографий используется, но не в дизайне.
[Ответить]
С этим можно легко справиться :) К тому же можно поставить кнопки только самых популярных сервисов.
PS. Наконец-то новый материал, а то я уже волноваться начал, не случилось ли чего)
[Ответить]
Настя
Был немножко не вменяем :) Наверное я имел ввиду что лучший ПР это живое общение в комментариях и отклики людей, а ПР всего лишь пузомерка, как говорится :)
[Ответить]
Жень, спасибо! :-* Приятно когда кто-то о тебе волнуется. :) С кнопками я пробовала экспериментировать. Можно, конечно, и лишние ссылки скрыть за ноуфоллами и ноиндексами. Только вот думается мне, что мало кто вообще ими пользуется.
Верно, Саш! Никакая пузомерка не заменит живого общения! :)
[Ответить]
Лучше просто установи 1 кнопку del.icio.us.. Как по мне - самая вменяемая социалка.. =)
А за урок спасибо.. Молодец что и про Дефайн Паттерн не забыла..=) Это самая важная часть..
[Ответить]
Да, Хомячок, я тоже думала поставить просто 2-3 кнопки. Надо прикинуть еще какие ставить, а какие нет смысла.
[Ответить]
Я считаю, что для начала стоит только Делисио..
Самая удобная и правильная система как по мне..
Можно было бы и ДИГГ, но туда пока что смысла нет.. Людей нужно много..
[Ответить]
Неужели создание такого фона может вызывать какие то сложности ?
Ведь имеются даже более простые варианты создания.
[Ответить]
Креативный кот, о сложностях никто и не говорит. :) Это очень простой, но весьма полезный урок. А вот о более простых вариантах расскажите. Я думаю, многим это будет очень интересно.
[Ответить]
Я бы посоветовал не использовать на сайтах узоры, т.к. у многих картинки отключены
[Ответить]
Многие - это еще далеко не все. :) Но даже и на случай отключенных картинок под любой рисованный фон подкладывается заполняющий, соответствующий по тону цвет.
[Ответить]
Hey nice tutorial, well I really doesn’t understand russian but I get the idea with the screens.
Thanks!
[Ответить]
Thank you, alectro! I am glad to see you again :)
[Ответить]
2 Кредитный брокер
Не обощай. Судя по моим исследованиям сейчас графика отключена только у пользователей сидящих на GPRS (их мало) и жителей стран снг (узбекистан и тп.) А красиво с фоном, это да.
[Ответить]
Настя прикрути гугл транслейт, кажется можно же, у кого то я видел, а то видишь alectro мучается )
[Ответить]
Руслан, ну почему же мучается? Мы вполне неплохо общаемся на английском. Думаю, это гораздо лучше, чем сомнительный авто-перевод хоть гугля, хоть другой какой программы. :)
[Ответить]
Хорошая статья :-) всегда собираюсь сделать чото подобное, но ленюсь)
в некоторых случаях, чтобы не клонировать части узора, можно использовать фильтр offset для создания повторяющейся текстуры.
оффтоп:
наверно уже достал своими поучениями :D
Google PageRank зависит от количества качественных ссылок на Ваш сайт, и время тут может играть только такую роль: Ваш сайт понравится многим достаточному количеству блогеров, которые повесят у себя ссылку на этот блог с тематическим анкором, не “Mannodesign”, как в dmoz, а например Дизайн сайтов статьи. Чтобы поднять PR нужно чтобы на Ваш блог вели ссылки с подобным анкором с сайтов с PR отличным от 0.
[Ответить]
Octane, спасибо за подсказки! :) С фильтром этим еще не работала, надо будет попробовать. А про ПР я уже и думать забыла. Будет так будет, а нет - да и ладно. :)))
[Ответить]
[…] Создаем красивый узорчатый фон | Фотошоп […]
Здравствуйте.Скажите пожалуйста,могу ли я сделать на фото 3х4.красный фон,скажем как на водительское уд-ие.Есть фото,но фон там белый.Подскажите где и как проще это сделать,в каком фотошопе,я немного далёк от этого.Но надо срочно. За ранее спасибо.
[Ответить]
Привет, Николя! Сменить цвет фона можно множеством способов. Вот один из достаточно простых. Открываешь фотку в фотошопе (у меня CS), берешь инструмент Magic Wand Tool и кликаешь им на белом фоне. Весь фон при этом станет выделенным. Затем заходишь в раздел меню Image - Ajustments - Hue/Saturation, включаешь там пункт Colorize и выставляешь следующие значения ползунков:
Hue - 0
Saturation - 70
Lightness - -50
Фон станет красным. Нужный тон и яркость подбираешь какой нужно.
[Ответить]
Эх, вот бы кто так учил в GIMP’е рисовать, Photoshop, блин, дорогое удовольствие. И чего дизайнеры так его любят? :)
P.S. PR ссылок от анкоров не зависит (от них зависит положение в серпе), по крайней мере по определению, и получить ненулевой PR можно внутренней перелинковкой, чистая математика.
[Ответить]
А у меня нет такого узора :-(
[Ответить]
Олег, какого именно? В Фотошопе это стандартный набор шейпов.
[Ответить]
Спасибо огромное за мануал =)
А то всегда интересовало, как это делается =)
Уже начал рисовать узор =)
[Ответить]
люди помогите..
я чайник….
я не могу сделать сетку…..
нажимаю Ctrl+’….
и ничего не выходит….
[Ответить]
УРА!!!
все получилось и я все сделала….))
спасибо за урок)
[Ответить]
Отличный урок. Все объясняется доступным простым языком, поэтому кажется что все просто =)
На самом деле, когда умеешь что-то делать, то это кажется просто. А вот когда не умеешь - то сложно)))
Со штампом урок тоже показался простым)))
[Ответить]
какой приятный, интересный и красивый блог, я думал у нас таких не делают! и за урок спасибо
[Ответить]
Здравствуйте а где можно скачать фотошоп который на картинках
[Ответить]
Даша, это ФШ версии 8, или иначе - CS. Скачать официально вы можете только свежую триал-версию CS4, зайдя и зарегистрировавшись по этой ссылке http://www.adobe.com/go/EN_US_D_FP_6_T
[Ответить]
Отличный блог! Отличный урок. Девушка на фото тоже хороша! )
[Ответить]
Спасибо. Хороший урок.
[Ответить]
“Теперь нам нужно скопировать слой с нарисованной формочкой три раза. Каждую копию при помощи инструментов Трансформации (Edit - Transform Path) — повороты на 90 и 180 градусов, и Перемещения (Move Tool) — разносим по другим узлам сетки. В результате получим вот такую фигуру”
никак не получается это сделать. подскажите , пожалуйста, поподробнее
[Ответить]
Иринка, а что конкретно не выходит?
[Ответить]
Решила сделать сайт, нужен был как раз бэкграунд с узорами. Пыталась найти в гугл, вышла на ваш сайт и сделала своими руками - это намного ценнее. Спасибо, Настя.
[Ответить]
настя, а какой версией фотошопа ты пользовалась??? у меня CS3. я в панели инструментов не могу найти Custom Shape Tool. если фотошоп не CS3- дай ссылочку на твой. заранее спасибо!
[Ответить]
Настя Манно
@Сашенька, Custom Shape находится там же, где и Rectangle Tool (Прямоугольник). По-умолчанию он видим в первую очередь. Нужно нажать на кнопку и удерживать мышку, чтобы открылись остальные иснтрументы.
[Ответить]
немогу включить отображение линеек! хелп ми!
[Ответить]
Настя Манно
@Сашенька, линейки включаются одновременным нажатием кнопки Ctrl и значка одинарной кавычки (там, где обычно в русской раскладке буква Э)
[Ответить]