Пользователь
0,0
рейтинг
1 марта 2011 в 01:15

Простой рельефный фон за 5 секунд

image

На сером фоне создаём новый слой с шумом, режим смешивания screen.
image
Копируем этот слой, инвертируем (Ctrl+I), смещаем на 1 пиксель вниз, режим смешивания multiply.
image
Уменьшаем прозрачность обоих слоёв до 20%
image
Тонируем (цветной слой в режиме soft light), можно дважды
image
Освещаем по надобности (слои в режиме soft light), вставляем иконки, кнопки, текст или что там у вас в дизайне.
image
Идея отсюда: designmoo.com/resources/simple-icons
Иконки отсюда: designmoo.com/resources/glyphs-psd

Дополнение: на втором шаге делаем edit→define pattern и дальше в работах используем pattern overlay в режиме luminosity.
Иванов Дмитрий @Dmitry_f
карма
45,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (163)

  • +2
    Спасибо!
  • +34
    Красиво ж.
    • +7
      Просто, а красиво.
      • +3
        … и стильно. О способе знал, но иногда даже такие простые вещи забываешь использовать. Спасибо.
        • +13
          О да, стиль просто прет из каждого пикселя.
          • 0
            Рисуем стильный пиксель за 1 секунду!
    • +1
      Ага, и по моему похоже на автомобильный пластик. Можно что-то придумать на сайты автосалонов с такой текстурой…
      • +2
        какой-то дешевый пластик.
      • +3
        Штукатурка :)
    • 0
      как в подъезде!
  • +3
    спасибо за информацию и за линк на designmoo.com :)
    • +27
      Ё вэлком.
      Таких периодических хороших ресурса четыре знаю:
      365psd.com/
      www.premiumpixels.com/
      dribbble.com/
      designmoo.com/
      • 0
        Спасибо, про ресурсы знал только про 365psd.com/
    • +13
      Бедный designmoo.com, положили его :)
      504 Gateway Time-out
  • 0
    Всё гениальное — простое :)
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Квадрат Малевича а также современная мазня в стиле сюрреализма ценится больше работ мастеров, которые над полотном больше месяца вкалывают.
        • +3
          Вам стоит почитать историю живописи. Абстрактная живопись — это более высокий уровень. По сравнению с ней обычная живопись как ассемблер в сравнении с яву.
          То, что Малевич написал чёрный квадрат не значит, что он не владел академическим рисунком, анатомией и проч.
        • +8
          Я бы не стал сравнивать квадрат Малевича с ядром Линукса :)
          • +8
            Почему подчеркнутый текст — не ссылка?
        • 0
          квадрат Малевича — это конец искусства
          в смысле всё, алес, рисовать теперь больше нечего

          Малевич был тот ещё шутник
          • +1
            Да бросьте, искусство по сей день на улицах делают.
            Просто раньше искусство моделировало реальность, затем оно отошло от моделирования, пытаясь выявить основы и создать свою реальность (это и есть абстрактная живопись), ну а далее оно стало создавать реальность. Дизайн, типографика, интерфейсы — то же искусство, законы другие, и в результате юзабельная, а не декоративная вещь.
            • +2
              Так это не я, это Малевич.
  • +3
    боюсь спросить: а в чем вы это делали?
    • 0
      photoshop
    • +2
      Фотошоп, что же ещё )
    • +13
      не поверите…
    • +7
      [irony]В GIMP же [/irony]
      • +4
        Кстати про Gimp, было бы неплохо если бы кто нибудь расписал подобный мануал для Gimp, а то я застрял на этапе тонирования.
        • +3
          Не знаю есть ли сейчас, но когда я пользовался gimp'ом в нем не было group layers, это было невыносимо, особенно когда количество слоев переваливает за 300.
          • +2
            И сейчас нет. И это правда невыносимо.
            • +1
              В 2.7 (нестабильный) есть. Жаль только из PSD их не подбирает (
        • 0
          а в Gimp эта задача бы решилась проще?
          • +5
            Точно так же.
        • +1
          В чём именно затык? Попробуйте соеденить слои перед тонированием.
        • 0
          Я немного запутался при создании шума, но сделал, пусть немного и через (_._)
          1. Изображение => Режим => Индексированное => Использовать ч/б(1 разряд) палитру => Преобразовать
          2. Фильтры => Шум => Бросок
          3. Слой => Создать копию слоя
          4. Изображение => Режим => RGB
          5. Ставим обоим слоям прозрачность 20
          6. Создаем новый слой, перемещаем его под предыдущие два, выбираем цвет, Правка => залить фоном переднего плана или заливаем фоновый слой инструментом «градиент»
          7. Ставим режим смешивания одного из слоев «Деление», смещаем его на один пиксел инструментом «перемещение»
          • 0
            8. Инвертируем цвет скопированного слоя: Цвет => Инвертировать
        • +26
          Я вам свой ответ нарисую :)

          image

          Шумовой слой накладываем поверх подложки, изменяем степень прозрачности, возможно цвет (играемся, играемся ползунками). Вот и всё.
          • +11
            Тут одно но — текстура с шумом не выглядит объёмной, это просто шум.
            • 0
              Пожалуй, вы правы. Нужно ещё несколько шагов, чтобы добиться оригинального результата. Точно так, как и описано: ещё один слой-дубликат, инвертирование, смещение на пиксель/два, режим смешивания Multiply.
          • +1
            Подскажите гарнитуру, пожалуйста?
          • 0
            Это шрифт ubuntu, да?
            • 0
              Да, вы угадали. Это шрифт Ubuntu.
          • 0
            А текст как стилизовали?
            • +1
              Для стилизации текста выполнен простой трюк.

              1. Нижний слой, тень, — это копия текстового слоя, тёмного цвета, слегка размытый и почти прозрачный, сдвинутый на несколько пикселей вниз, относительно верхнего слоя.

              2. Сам текст — это легкий градиент от светло-серого к белому.

              3. Поверх него расположен горизонтальный полупрозрачный срез, от прозрачного к белому.

              Если интересен исходник, вот мой svg-файл с этим изображением: narod.ru/disk/6620488001/InkPower.svg.html
        • 0
          Да в гимпе всё то же самое, только для нижнего слоя применять «Colours → Colourise».
      • +16
        К чему ваша ирония? В Гимпе это делается точно так же:
        • +3
          Ирония в том, что предыдущий комментатор явно намекал на фотошоп (и, кстати, оказался прав, любят у нас люди гвозди микроскопами забивать)
          • +3
            Ну на всяк случай, если кто думает, что в Гимпе с этим проблема, то всё делается ровно так же.
            • +1
              И куда проще чем я написал комментом выше — мне за него уже стыдно =_=
          • 0
            вы просто не умеете его готовить
            • 0
              я умею, но осознанно сменил на GIMP — его фунционала мне хватает, к тому же не хочется пользоваться контрафактным софтом, на который у меня нет денег.
              • +1
                Вот почему вы считаете, что если у человека фотошоп, то он обязательно пиратский? Сегодня мне уже сложно назвать фирмы, где есть знакомые дизайнеры, которым не покупают софт для работы.
                • +1
                  Человек, вроде, про себя говорил, что он не хочет ни покупать ни пользоваться пиратским.
                  • 0
                    Не хочу пользоваться пиратским и не вижу причин покупать.
                • 0
                  Я предполагаю, что топикстартер, как и 90% комментаторов — не проффесионтальные дизайнеры, купившие фотошоп.
  • +2
    О, продолжение цикла? ;)
    • +1
      Да-да) Влияния не хватало тогда ещё разместить.
  • 0
    Скоро браузеры будут такое же делать, а пока приходится рисовать.
  • +10
    демиарт на хабре продолжение :)

    И все же сделать обои как у убунту из порно было более по IT теме, я бы сказал.
  • +3
    Безмерно радуют такие посты! Я уж думал на хабре остались лишь кодеры, гики и ньюсмейкеры :)
  • 0
    Жаль, этот шум психологически передаётся на буквы. Думал виноват поздний час, а приблизил — действительно шум!!!
    JPEG-артефакты.

    Такие картинки можно сохранять только в PNG или делать из двух слоёв — иконки в PNG и фон, если уж очень хочется — в jpeg. Используемый сейчас формат не предназначен для хранения таких высокочастотных шумов.

    А за ссылку и иллюстрации — спасибо =)
    • 0
      Вы правы. Особенно на мониторах с высокой резкостью видно. В следующий раз — png.
  • 0
    а если бамп на шум сделать? не тот же эффект?
    • 0
      Думал в эту сторону, искал. Bas relief что-то похожее выдаёт, но у него контрастность завышена, не получается мягкость как здесь. Если у вас есть решение…
      • 0
        да, попробовал, зерно шибко большое при этом. Ваш вариант приятнее гораздо.
  • 0
    У меня назрел вопрос тут один… Нафига козе боян? Это нужно тааак редко, что ради одного раза можно воспользоваться и Gimp и прочими средствами или я что-то не так понял?
    • 0
      так вот описывается как можно воспользоваться Gimp чтобы получить рельефную текстурку.
  • –4
    Считаю, что до этого должен догадаться любой новичок. Странно видеть такие темы на Хабре, вы бы ещё сказали что пунктирное подчеркивание нужно делать шрифтом размера 8px.
    • 0
      Кстати, а как вы делаете пунктирное подчёркивание в photoshop? Там насколько я знаю удачных решений «из коробки» нет.
      • –2
        Текст ссылки


        Для строки с точками задаем размер 8px и междустрочный интервал 2px.
        Сглаживание не должно быть. Как думаете, может создать пост об этом?
        • +1
          Ну и костыль! А как штрих-пунктирное подчёркивание делать?
          • 0
            Думаю что проще чем просто пунктир не получится, _._._ нужно подстраивать.
            • +8
              И что, нету нормально возможности (как в Гимпе) делать кастомные линии?
              • +1
                Все уже поняли, что GIMP — отличный инструмент для рисования пунктирных линий. Но это, к сожалению, не делает его более удобным и понятным для более сложных задач.
                • +3
                  Все уже давно выучили чем гимп хуже фотошопа.
                  Но почему-то всем пофиг чем фотошоп хуже гимпа :)
                  • +1
                    Давайте, тогда, не будем с вами голословными.
                    Что лично меня (существенно) не устраивает в ГИМПе:
                    1) поддерживает всего 2 цветовые модели: RGB и Grayscale (нет даже CMYK)
                    2) не поддерживает стили смешивания для слоев (нет даже жалкого подобия)
                    3) основная панель инструментов имеет АЖ 5 отдельных кнопок для разных режимов трансформирования, но НИ ОДНОЙ кнопки для рисования примитивных геометрических фигур! (даже PAINT это умеет)
                    Это то, что за 5 минут вспомнил.

                    Приведите хотя бы 2-3 существенных достоинства GIMP по сравнению с ФШ (кроме бесплатности GIMPа) из вашего личного опыта использования.
                    • 0
                      Мой личный опыт нетребователен к редакторам и я пользуюсь тем что есть. Последнее время это гимп, т.к. остального не поставлено.

                      Вот из комментария выше я узнал что фотошоп не умеет пунктирные линии.

                      А вообще это именно то что я и имел ввиду. Весь интернет в курсе недостатков гимпа, а наоборот почему-то никто не удосужился собрать.

                      Вы кстати забыли про поддержку 64-битного цветового пространства и фильтров на слоях.
                      • 0
                        Фотошоп умеет штриховые линии, решений я вообще около восьми вижу. Самое некостыльное — создать кисть в виде штриха линии с изменением угла по направлению движения. Таким можно и обводить любые кривые, и рисовать штриховые линии.
                        Мы говорим лишь о том, что нет такого векторного инструмента, такого как обычная линия, только пунктирная, провёл — и получил векторную штриховую линию. Либо пунктирного подчёркивания текста.
                        • 0
                          Векторной так векторной :) Мне не суть важно. Мне только интересно.
                        • +1
                          А круг пунктиром таким инструментом нарисуете?)
                          • 0
                            Векторный круг обводим пунктирной кистью, делов-т.
                      • 0
                        Я написал про фильтры. Просто в английской версии они называются Blending options, а в переводе обычно пишут «Стили (или опции) смешивания». (Что в очередной раз, кстати, доказывает что локализации программ — это зло)
                        Единственное достоинство GIMP по сравнению с ФШ, это бесплатность GIMP против неоправданно завышенной цены ФШ, но, как гласит старая украинская пословица: «Дешева рибка — погана юшка» (Дешевая рыба — плохая уха). А то, что никто ни разу не написал о других достоинствах GIMP, имхо, лишний раз подтверждает, что их, вероятно, особо и нет. С радостью готов убедиться в обратном, если кто-нибудь поделится ссылкой.
                        • 0
                          Мне в плане юзабилити нравится возможность перемещаться по холсту, зажав колесико и таская его.
                          В целом, ничего нового в сравнении с фотошопом в гимпе не придумано, но большинству хватит и того, что предлагает гимп. Люто и бешено не хватает папок слоев и стилей их же, но без них любителю вполне можно жить.
                        • 0
                          Он удобнее.

                          И в нём без костылей делается, как минимум, две вещи по сравнению с фотошопом:
                          1. Пунктирные линии.
                          2. Отделение изображения от фона

                          А может ещё чего, давно Шоп не использовал. А я пунктирные линии рисую чаще, чем использую цветовую схему CMYK. Честно говоря я вообще никогда не использую ничего кроме rgb. Зачем мне фотошоп, тем более, что он менее удобен?
                    • 0
                      > не поддерживает стили смешивания для слоев (нет даже жалкого подобия)
                      Простите? habreffect.ru/6ff/c6aff192c/1.png
                      • 0
                        То, что вы привели, в фотошопе называется «Эффекты наложения». А «Опции смешивания» — это, другими словами, стили слоев. Ну там, наложение градиента, внешняя тень, внутренняя тень, свечение, сатин, эмбоссирование и прочее, что в GIMPе еще очень не скоро появится.
                        Да, еще раз повторю, локализации софта — злейшее зло.
                    • 0
                      О, сразу видно, что человек просто не знает гимпа.
                      поддерживает всего 2 цветовые модели: RGB и Grayscale (нет даже CMYK)

                      Согласен

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

                      Есть отличный плагин. (Прям как в Файрфоксе):

                      Вот я только что сделал надпись с Drop Shadow:


                      основная панель инструментов имеет АЖ 5 отдельных кнопок для разных режимов трансформирования, но НИ ОДНОЙ кнопки для рисования примитивных геометрических фигур!

                      Нет на основной панели, но возможности создания фигур — просто огромные. Можно даже паттерном обводить (а не обычной линией). Вот, две минуты:
                      • –1
                        Ха ха. Интересная логика: когда что-то делается средствами программы (пускай и с дополнительными усилиями) — это, значит, костыли, а когда для элементарного функционала используются плагины — это так и должно быть, т.е. не костыли.

                        Знаете, это все равно что сравнивать кофеварку, которая варит отличный кофе но при этом стоит 1000 долларов и ее нельзя разобрать, и кофеварку, которая варит помои, потому что у нее нет фильтра для воды и не регулируется температура, но зато у нее есть блютуз и она бесплатная и ее можно разобрать и настроить все под себя. Так вот, фотошоп — это «кофеварка» для тех, кто, образно говоря, любит хороший кофе. А гимп — это «кофеварка» для тех, кто любит разбирать бесплатные кофеварки.
                        • 0
                          притянуто за уши.
                          • 0
                            Обоснуйте, если не трудно.
  • +2
    От урока по фотошопу на Хабре, всегда ждёшь что то большее чем урок начального уровня.
    • +5
      [fix] От урока по фотошопу на Хабре всегда ждешь чего-то большего, чем урок фотошопа на Хабре. [/fix]
      • 0
        Урóк на Хабре больше, чем урóк.
        • +2
          урок по фотошопу на Хабре такой урок…
  • 0
    В таких фонах всегда приятно, что их легко тайлить.
    • 0
      Вырезать любой кусок, и границ не видно?
      • 0
        Совершенно верно. Если без градиента, естественно. Тем и хорош фон с шумом, он и рельефный, и можно абсолютно любой кусок взять.
        • +2
          Только минимальное ограничение есть. Исследование на зрительное пятно не проводил ) Но опытным путём это 40х40 пикселей при стандартном ppi 96. Меньше будет видно повторение фрагмента.
          • 0
            Да, хотел об этом написать, но посчитал это разумеющимся и так. =)
  • +2
    Не уверен, что вы успеете сделать это за 5 секунд.
    • 0
      Экшином!
    • +1
      Зато за секунд 5 успеет :-)
  • –1
    Спасибо.
  • +1
    Подскажите шрифт надписи?
    • 0
      Arial или Tahoma же!
    • 0
      Myriad Pro
  • +8
    Офигеть… Статья по моделированию дождя на матлабе не собрала бы столько плюсов )) 130+ плюсов за тривиальные операции в фотошопе…
    • +6
      Сразу видно, что надо хабравчанам.
    • +6
      Ну моделировать дождь в матлабе — это конечно здорово, но не столь практично.
      Я вот на работе сегодня сделаю такую текстуру, а когда она понадобится, не буду рыскать по всему гуглу в поисках нечто похожего. Профит!
    • 0
      Люди со складом ума как на хабре любя простенькое и красивенькое :)
  • 0
    И как обычно бывают, этим фоном начнут пользоваться где надо и где не надо — всем приестся, и будет потом считаться дурным тоном.
    • 0
      «Information must be free»
      • 0
        Само собой.
        Я о другом — "где надо и где не надо"
    • 0
      зато теперь дизайнер не будет срубать за такой фон по 150$…
  • +5
    designmoo.com пал смертью храбрых :)
    • +7
      хабрахабрых
  • –1
    Больше, больше таких статей!
  • –1
    Спасибо, приятный способ, а главное оперативный.

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

    Пример:
    image

    P.S. Если есть интерес, могу набросать пост про работу со стилями в целом и про паттерны в частности.

    • 0
      Интерес есть :)
      • +5
        image

        Я теперь боюсь писать в этот блог :)
        • +4
          это уже было в симпсонах
    • 0
      Я бы тоже с удовольствием прочитал про подобные приемы. Привлекает именно простота и оперативность реализации.
    • –1
      резкости там нет, потому что автор не знает про различие между PNG и JPEG
    • 0
      Что за шрифт? Вы специально подгоняли символы, чтобы попасть в пиксельную сетку? Выглядит аккуратно.
      • 0
        Спасибо. Шрифт из семейства Tornado, по моему TornadoLightC.

        Умышленно ничего не подгонял, на автомате стараюсь все делать «Pixel Perfect».
    • 0
      Фу!
  • 0
    Спасибо! Как раз в ближайшее время мне предстоит воспользоваться уроком, и гуглить не пришлось.
  • +11
    Ну, ребята. Ну, серьезно.
    Ведь таких приёмов миллионы и все они уже подробно! описаны и выводятся в топе поисковиков!
    Миллионы прекрасных уроков, тысячи сайтов. А идей и того больше, и все они разбросаны вокруг.

    1. Смотрим идейку в интернетах или на спец.сайте, типо cssmayo.com
    2. Ищем урок, вроде этого www.mastiforums.com/web-designing-48/photoshop-paper-texture-scratch-then-create-grungy-web-design-619 (таких уроков действительно огромное множество! подробных уроков!)
    3. Или смотрим исходные файлы в виде .PSD, на сайтах вроде 365psd.com
    4. Пробуем реализовать идею, повторяем.
    5. Профит.

    Зачем всё тащить сюда? Я понимаю, что блог «Дизайн». Но, простите, ведь хабр — не архив чужих идей и уроков.
    • 0
      Именно потому, что в исходнике неясно, как это реализовано, я запостил этот урок. Плюс в продолжение тематики фонов.
  • +1
    Я, как обещал, написал пост про создание векторного шейпа с текстурой, но не могу опубликовать. Не хватает одного балла кармы. Как его можно заработать, товарищи?
    • +1
      Публикуйте)
      • +1
        Гранд мерси! Опубликовал. Похоже получилось слегка вторично (за что уже получил минус), но результат же совсем другой.
  • 0
    > смещаем на 1 пиксель вниз
    вот, в чем вся гениальность :)
    • 0
      К автору данной статьи я претензий не имею, но меня всегда удивляло, когда для создания подобного эффекта автор предлагает продублировать слой, поместить его под оригиналом и сдвинуть на пиксель вниз. Есть же для этого стили, а в стилях тени и целая туча настроек.
      • 0
        Чтобы работала тень от шума, нужно немало поиграться с blend if и слить слой. Либо накладывать шумовую маску. Но эти методы заведомо сложнее.
        • 0
          Я о том и говорю, что такую вещь проще реализовать без шума.
          • 0
            А как это без шума сделать?
            Можно найти текстуру готовую и попытаться уменьшить так, чтобы зерно совпало с пикселем.
            Свойства стиля-же или фильтры предлагают иное.
            • +1
              Я написал пост, где показал как я это делаю. Но, похоже, звезды только на вашей стороне, мой пост активно минусуют :-)
              • 0
                У вас не такая вещь, у вас банально наложен шум. Рельефа нет.
                Про это здесь вот совершенно замечательная попытка исследования.
  • 0
    Даже если очень спешить, в 5 секунд не уложитесь :)
    Только если автоматизировать.
    • 0
      Я дополнение написал. С ним + хоткеями за 5 сек можно, если потренироваться ))
  • 0
    Да где-же вы берёте такие сочные цвета?!
    • 0
      Можно дважды слой с soft light сделать.
    • +4
      Весь секрет в градиентах и переливах:







  • –1
    Крутяк) красотишша! Вообще быстро сделала)
    • 0
      demiart mode: enabled?
  • –4
    Зачётно!
  • 0
    5 секунд? Но почему ТАК долго?!

    Не те фотошоперы пошли, не те…
    • 0
      Похоже на их планете другое время
  • –1
    Хабраэффект на designmoo.com, вообще не открывается.
  • –1
    You rock.
  • 0
    Все гениальное — просто!
  • –2
    Не знаю друзья чем вам GIMP нравится, он как тот же paint.NET — уродлив и прост image

    photoshop навсегда! извините за опасное холиварное утверждение, но даже простые вещи — ресайз и кроп в фотошопе хоть интуитивно понятны. Исплевался весь когда попытался кропать в GIMP. «Save as...» еще тот монстр, чтобы втыкнуть где выбрать тип сохраняемого файла надо включить мозг, и так далее. В фотошопе можно уже с 3D работать, что кстати довольно здорово. Я лишь немного поигрался но был доволен. Ну и само сабой разумеещиеся приемущества фотошопа в работе со слоями, наложениями, разными цветовыми моделями и возможность слайсинга для создания дизайна из нарисованного шаблона. Да что там, все и так знают мощь photoshop
    • 0
      Я бы установил Photoshop, но он наверное в районе 50 т.р. стоит. А для того что бы сделать фон тратить такие деньги обычному студенту не очень хочется. Учиться не где. Вот именно по этому GIMP будет популярнее. Хотя профи останутся в Photoshop.

      P.S. Нет что бы студентам выдать за карту ISIC например по учебному Photoshop-у… Жадины…
    • 0
      О! Ещё один человек, который не умеет пользоваться ГИМПом.
      Сравнивать пейнт.нет и гимп — смешно даже.
    • 0
      Кстати, про кадрирование — вообще чушь сморозили. Оно делается в три клика.
      1. Клик на инструмент «кадрирование»
      2. Выделяем участок
      3. Клик на выделенном участке:
      • –3
        Да спасибо, я вообще-то это нашёл еще тогда, когда таковая задача появилась, я ни слова не сказал, что не знаю как это сделать. И не забудьте добавить в ваше резюме «Навыки работы в GIMP»
  • +1
    НЛО, сделай им отдельный блог, пожалуйста!
  • +1
    А для тех кто «не умеет читать по губам» — напишите пожалуйста последовательность действий в англ версии фотошопа. Спасибо.
  • 0
    Спасибо!

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