Здравствуйте! Меня зовут Настя Манно. Веб-дизайн и создание сайтов для меня не просто хобби. Это моя страсть! Я очень люблю создавать что-то новое и необычное. На этом блоге будут собраны самые интересные находки в области веб-дизайна и сайтостроения.
новые сообщения
- Рисуем ярлык (Фотошоп)
- Каталог дизайнерских блогов открыт!
- Джаспер Гудолл - гламурный иллюстратор из Брайтона (Англия)
- 12 свежих rss иконок - “fish”
- Креативные идеи #4
- Майк Дэвис - художник-иллюстратор из Миннеаполиса
- Новый конкурс от SmashingMagazine. Получи Apple MacBook Air!
- Ice-cream бэкграунд
- Иллюстратор Алекс Дюкаль (Alex Dukal)
- Креативные идеи #3
облачко тэгов
Иконки Кисти Конкурс Обзоры Палитры Ретро Скачать Стиль Темы WordPress Уроки Шрифты векторы гранж дизайнерские блоги дизайнеры иллюстраторы каталог блогов космос креатив первый постик радостное фанк фотошоп шутка rss web 2.0 WordPress
самое популярное
- Создаем красивый узорчатый фон | Фотошоп
- RSS-иконки в стиле гранж
- Дизайнерские блоги — от минимализма до сложной графики
- Тенденции веб-дизайна 2008
- Рисуем окружности в стиле ретро | Фотошоп
- Монохромный веб-дизайн
топ комментаторов
- drStas (8)
- Кредитный брокер (7)
- Московский Полуб... (4)
- Fr34k (3)
- art (3)
- DAYRED (2)
- JuliettaRose (2)
- Octane (2)
- Пашковский (2)
- Кайла (2)
свежие комментарии
- Дима: Черненькая и оранжевая - супер… буду иметь ввиду
- Monsignor: Интересный урок, спасибо, будем пробовать)
- Веня Таганский: Авторское право действует везде. Независимо от...
- Вектор: Полезный урок. Надо как-нибудь попробовать. Пост идёт ко...
- Колян: Красота то какая…ляпота& #8230;
- Стальной Бомж: Полезный урок, а то я в фотошопе только вырезать и...
- fazeful: 2 Настя Манно: Pen Tool-ом гораздо удобней + с помощью стилей...
- fazeful: Небольшая неточность: слой создается Ctrl+Shift+N =) Лучше такие...
- Milk: I can’t read the tuto, (’cause I don’t understand the language), but thanks a lot for...
- Кредитный брокер: Бирочка хорошая, а вот над ниточкой надо...
архив
Создаем красивый узорчатый фон | Фотошоп
Автор Настя Манно
Иногда в оформлении сайта встречается очень красивый узорчатый фон, который однако не пестрит, но делает страницу более «богатой». Причем, чем тоньше рисунок и слабее контраст, тем лучше выглядит сайт. Фишка тут как раз в слабом контрасте между фоном подложки и самим узором. Подобных текстур, конечно же, можно найти в сети уже достаточно много. Но гораздо интереснее самостоятельно изготовить узор. Для этого вовсе не понадобятся какие-то дополнительные «шейпы» или кисточки. В Фотошопе их и так предостаточно.
Для начала нам понадобится немного настроить Фотошоп. Зайдем в раздел 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.
Популярность: 100%
Это стандартными шэйпами, а более сложные узоры как делать?
Я у себя в блоге рисунок на фон тоже узором сделал, а узор этот любезно предоставлен кем-то рассылающим спам в почту.
А где такой красивый шрифт который в заголовке взять?
Например прям в виндоуз
В 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 для создания повторяющейся текстуры.
оффтоп:
наверно уже достал своими поучениями
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 можно внутренней перелинковкой, чистая математика.
А у меня нет такого узора
Олег, какого именно? В Фотошопе это стандартный набор шейпов.