Как стать автором
Обновить

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

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

image

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

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

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

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

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

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

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

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


Для строки с точками задаем размер 8px и междустрочный интервал 2px.
Сглаживание не должно быть. Как думаете, может создать пост об этом?
Ну и костыль! А как штрих-пунктирное подчёркивание делать?
Думаю что проще чем просто пунктир не получится, _._._ нужно подстраивать.
И что, нету нормально возможности (как в Гимпе) делать кастомные линии?
НЛО прилетело и опубликовало эту надпись здесь
Все уже давно выучили чем гимп хуже фотошопа.
Но почему-то всем пофиг чем фотошоп хуже гимпа :)
НЛО прилетело и опубликовало эту надпись здесь
Мой личный опыт нетребователен к редакторам и я пользуюсь тем что есть. Последнее время это гимп, т.к. остального не поставлено.

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

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

Вы кстати забыли про поддержку 64-битного цветового пространства и фильтров на слоях.
Фотошоп умеет штриховые линии, решений я вообще около восьми вижу. Самое некостыльное — создать кисть в виде штриха линии с изменением угла по направлению движения. Таким можно и обводить любые кривые, и рисовать штриховые линии.
Мы говорим лишь о том, что нет такого векторного инструмента, такого как обычная линия, только пунктирная, провёл — и получил векторную штриховую линию. Либо пунктирного подчёркивания текста.
Векторной так векторной :) Мне не суть важно. Мне только интересно.
А круг пунктиром таким инструментом нарисуете?)
Векторный круг обводим пунктирной кистью, делов-т.
НЛО прилетело и опубликовало эту надпись здесь
Мне в плане юзабилити нравится возможность перемещаться по холсту, зажав колесико и таская его.
В целом, ничего нового в сравнении с фотошопом в гимпе не придумано, но большинству хватит и того, что предлагает гимп. Люто и бешено не хватает папок слоев и стилей их же, но без них любителю вполне можно жить.
Он удобнее.

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

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

Согласен

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

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

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


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

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

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

Пример:
image

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

Интерес есть :)
image

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

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

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. Профит.

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







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

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

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

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

Публикации

Истории