Строение
Текстуры. Рисуем сами.
Тема в разделе "Веб-Дизайн", создана пользователем Sherri, 1 сен 2010.
  1. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    В фотошоповском наборе текстур есть несколько стандартных образцов. Так же, без проблем, можно скачать из интернета уже готовые текстуры. Но если есть желание, то можно научиться и самостоятельно их рисовать. Так сказать, с нуля.
    Например, очень быстро и просто можно самим нарисовать деревянную поверхность.
    Итак, создаём новое изображение 300х300 пикселов. Заливаем его цветом. Можно брать любые оттенки желтого, коричневого, красного. Какой Вам больше нравится. Я, например, взяла тёмно-желтый.



    Далее применяем фильтр. Фильтр => Шум=> Добавить шум. Параметр Эффект берём равным 50% , и устанавливаем флажок Монохромный.
    В результате получается поверхность, напоминающая панель из гранитной крошки.


    Теперь необходимо превратить эту поверхность в гладкую доску. Применяем Фильтр => Размытие => Размытие в движении.Чтобы полосы шли горизонтально надо параметр Смещение установить равным ширине изображения. В моём случае 300.


    Далее применяем Фильтр => Другие => Сдвиг.



    Затем снова используем Фильтр Размытие в движении. Параметр Смещение можно отрегулировать так как вам нравится. Двигая этот рычажок, можно увидеть, что получаются разные полоски.


    Получившаяся поверхность уже похожа на дерево. Больше всего она напоминает древесно-стружечную панель. Но можно придать текстуре более естественный, природный вид, если нарисовать места, где раньше были сучки.
    Выделяем небольшую область с помощью Эллиптического выделения. Выделение можно сделать круглым или овальным. Сделаем сначала овальным. Применим к нему Фильтр => Деформация => Сферизация.



    затем Фильтр=> Деформация => Cкручивание



    Если сделать круглое выделение, то после использования фильтра Сферизация , можно уже применить другой фильтр Фильтр => Деформация => Зигзаг


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

    Конечный результат у меня получился такой.

     
    Последнее редактирование модератором: 1 сен 2010
    15 пользователям это понравилось.
  2. kult

    kult Новичок

    Сообщения:
    193
    Симпатии:
    39
    Баллы:
    0
    Отличный урок! Текстура очень красивая)) Но почему то я не люблю их рисовать(текстуры):(
     
    4 пользователям это понравилось.
  3. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Выглядит неплохо, но на мой придирчивый взгляд, сучки получились не очень реалистичными. Если посмотреть на настоящие сучки, то видно, что они представляют собой четко отделенный от основной массы древесины овал имеющий иную структуру. ;)
     
  4. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    Попробовала сделать более реалистично...)
    Не знаю только намного ли лучше получилось...)

    Сделала круглое выделение. Нарисовала в нём кисточкой 3 точки. Цвет взяла того же оттенка, что самые тёмные полосы на рисунке.



    Применила фильтр Сферизация. А затем фильтр Зигзаг. Заметила интересную особенность. Какое число стоит в окошке Складки - такое же будет и количество кругов внутри сучка...) Я выбрала 5 кругов.



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



    Ну, и потом сняла выделение.



    Хотелось бы ещё чуть-чуть размыть края , хотя бы на 1 пиксель, чтобы не было у него такой чёткой границы, но я что-то никак не могу сообразить, как это сделать...

    Какой -то он у меня немного вдавленный получился...
     
    Последнее редактирование модератором: 1 сен 2010
    4 пользователям это понравилось.
  5. sweih

    sweih Новичок

    Сообщения:
    497
    Симпатии:
    272
    Баллы:
    0
    Sherri, Отличный урок. Мне очень понравился. И объясняет действие некоторых фильтров.
    Спасибо. :)

    Думаю вот это может помочь:
     
    Последнее редактирование модератором: 3 сен 2010
    4 пользователям это понравилось.
  6. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Есть такое, вдавленность четко заметна, это результат применения сферизации. Сучок стал заметнее реалистичнее, но все же не совсем то. Приглядитесь к сучкам здесь, особенно к тому как они отделяются от основной массы дерева: ;)
     
    Последнее редактирование модератором: 5 сен 2010
  7. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    TiamatInc , как выглядит сучок на срезе дерева, я прекрасно себе представляю. У меня у самой дача вагонкой обита.



    Но вот сделать так же реалистично, как выглядит на фотографиях, в фотошопе не так-то просто. Хотя, и возможно. Просто для этого нужны какие-то более сложные, навороченные уроки. Если найдёшь такие, выкладывай. Будем потом учиться по ним...)

    sweih, я уже потом сама додумалась, как сделать размытыми края. Перепробовала кучу настроек и нашла один фильт "Размые+", вот он как раз и даёт этот эффект. Но можно и сделать, как ты говоришь...)

    ---------- Сообщение добавленно в 15:18 ---------- Предыдущее сообщение было в 14:36 ----------

    Текстура "Камуфляж".

    Создаём новое изображение 320х320.
    Устанавливаем основные цвета, предусмотренные по умолчанию. Чёрный и белый. (Клавиша D).
    Применяем фильтр "Облака "(Clouds).



    Затем ещё один фильтр "Размытие по Гауссу". Радиус размытия 10 пикселей.

    На следующем этапе на основе размытого рисунка необходимо создать изображение, состоящее из белых и чёрных пятен. Для его воспользуемся настройками Яркости и Контрастности. Контрастность установим максимально возможной +100, а Яркость отрегулируем так, чтобы количество белого и чёрного цвета было приблизительно одинаковым.


    Чтобы немного смягчить переход между цветами воспользуемся фильтром "Размытие+".

    Создаём копию этого слоя.
    Применяем к этой копии Редактирование=> Трансформирование=> Поворот на 90 градусов.


    Непрозрачность этого слоя устанавливаем равной 70%, а режим наложения выбираем "Умножение".


    Далее объединяем слои. ( Ctrl + E ) и инструментом "Волшебная палочка" выделяем по очереди чёрные , серые и белые пятна и заливаем их тёмно-зелёными, салатными и светло-зелёными цветами.



    Конечный результат.

     
  8. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    Водная текстура.


    Имитация воды - одна из сложных задач в компьютерной графике. Но всё-таки, попробуем изобразить её!)) Причём в двух проявлениях - нарисуем надпись из воды на фоне водной текстуры.

    Итак, создаём новое изображение 700х400 пикселов.Установим цвета синий и белый.
    Применим Фильтр => Рендеринг = > Облака ( Filter=> Render=> Clouds) Этот фильтр добавит относительно случайным образом формируемую текстуру.






    Затем используем Фильтр => Эскиз => Хром ( Filter=> Sketch=> Chrom) .



    Результат уже будет напоминать воду , только сымитированную в оттенках серого. Окрасим её в голубой цвет. Для этого воспользуемся Цветовым балансом ( Color Balance) с настройками:
    -67; 26;74.



    Для улучшения эффекта создадим новый слой (Shift+ Ctrl+N) .Повторим на нём применение фильтров Облака и Хром, которые мы использовали для рисования воды на первом слое. Затем запустим инструмент Тон/ Насыщенность ( Hue/ Saturation) и применим его со следующими настройками, не забыв установить галочку на Тонировании ( Colorize)
    Тон: 220
    Насыщенность: 47
    Яркость: -20


    Затем на палитре Слои (Layer) установим для второго слоя Непрозрачность (Opacity) около 30 % и склеим слои: Объединить видимые (Ctrl+E)
    В принципе, на этом этапе текстура воды уже готова.



    Напишем теперь надпись на воде. Я не знаю, как у кого, но в моём фотошопе почему-то очень мало шрифтов на русском языке. Поэтому выбора особого у меня нет. Для написания текста я взяла шрифт, который называется Segoe Script, и установила жирный режим написания Bold.


    Далее необходимо растрировать текст и применить Фильтр Размытие по Гауссу со значением радиуса 1 пиксель.

    Затем откроем палитру Слои и установим для только что созданного текстового слоя следующие настройки
    Непрозрачность 80%, Заливка 0%. В результате надпись исчезнет!) Но не волнуйтесь) Всё нормально) так и должно быть)
    Сделаем копию текстового слоя .

    Затем перейдём на основной текстовый слой. Нам нужнобудет сделать 3 настройки в Стиле слое. Необходимо будет правильно настроить Внешнюю тень, Внутреннюю тень и Рельеф.

    Настройки для Внешней тени:


    Настройки для Внутренней тени:



    Настройки для Рельефа ( Скос и рельеф, Тиснение)



    Далее переходим на копию текствого слоя и применяем к нему эффект Рельеф.



    Теперь остаётся только склеить все слои и создание водной текстуры можно считать на этом законченным.

     
  9. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    Текстура Пазл.

    Эффект Пазлов - один из самых красивых и легко выполнимых. И основан на использовании Фильтра Текстуризатор (Texturizer) и на том, что в папке программы есть готовые карты текстур.
    Берём любую красивую картинку.


    И запускаем этот фильтр. Фильтр=> Текстура => Текстуризатор ( Filter=> Texture=> Texturizer) Далее нажимаем на стрелочку



    появляется сообщение " Загрузить текстуру".




    После этого указываем файл Компьютер => Vista (C) => Program Files=> Adobe Photoshop CS2 => Present=>Textures=>Puzzle.psd. Нажимаем " Открыть". А дальше всё просто. С помощью Масштаба подбираем необходимый размер ячеек, с помощью Рельефа - глубину соединений, а с помощью Света - нужную тень .



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

    ---------- Сообщение добавленно в 14:24 ---------- Предыдущее сообщение было в 14:09 ----------

    Текстура " Змеиная кожа"



    Текстура " Ткань"



    Текстура "Крашенная стена"


     
    Последнее редактирование модератором: 5 сен 2010
  10. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Браво Sherri, последний пример выглядит вообще великолепно. А что до воды, то если немного побаловаться с фильтрами, то можно попытаться добиться эффекта стеклянной надписи над поверхностью воды.
     
  11. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    TiamatInc, мне последняя текстура тоже больше всех нравится!

    Самое главное в моём последнем примере (с накладываем текстур) это то, что всё это делается настолько просто, что просто удивительно! Буквально за несколько секунд! Советую всем пройтись по тому адресу, что я указала вначале. Там есть и другие текстуры, не менее интересные. А самое привлекательно в них то, что эффект от их применения получается действительно очень красивым и делается на раз. А ещё хорошо то, что можно самой настраивать их. Самой регулировать, на свой вкус и цвет, степень их воздействия и отображения на исходную картинку.
     
  12. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Только адрес Вы указали не совсем правильно, Вы видимо его брали непосредственно с Вашего компьютера. Он должен быть не:
    Компьютер => Vista (C) => Program Files=> Adobe Photoshop CS2 => Present=>Textures=>
    а:
    Папка_куда_установлен_Photoshop/Presets/Textures/...
    Вряд ли он у других, там же находится. ;)
     
    Последнее редактирование модератором: 5 сен 2010
  13. oriwood1

    oriwood1 Новичок

    Сообщения:
    212
    Симпатии:
    9
    Баллы:
    0
    Очень полезные и легкие самое главное уроки, но мне легче найти в интернете текстуры их там полно скачал один раз и хватит навсегда. А так большое спасибо за уроки.
     
    4 пользователям это понравилось.
  14. sweih

    sweih Новичок

    Сообщения:
    497
    Симпатии:
    272
    Баллы:
    0
    Конечно и легче и лучше так делать. Но иметь представление как это сделано, считаю нужно. Не нужно при этом делать все уроки самостоятельно, достаточно понимать и если что повторить. Возможна же такая ситуация, когда не будет интернета под рукой, что бы скачать нужную текстуру, или когда нужно будет создать собственную.
    Поэтому полностью согласен с Вами. Уроки очень полезные.
     
    4 пользователям это понравилось.
  15. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    Текстура "Камень"
    Создаём новое изображение 400х400.

    Основные цвета установлены по умолчанию (D)

    Применим Фильтр => Рендеринг => Облака.

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

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

    Далее берём Фильтр=> Эскиз=> Рельеф. Значение параметров Детализация и Смягчение лучше не трогать - они настроены практически идеально для любого случая. Настройка же Свет применяется исключительно по вкусу. Я выбрала Вниз.



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

    С помощью Тона и Насыщенности выбираем нужный цвет. Я взяла красно-коричневую цветовую гамму. Но можно взять любой другой цвет. Очень неплохо , например, для этой текстуры смотрятся, оттенки серого.







    Получившиеся текстура уже похожа на скалистую породу. Но видно, что переходы между неровностями слишком мягкие, смазанные. Эту неестественность исправляет Фильтр=> Резкость => Контурная резкость





    Конечный результат.

     
  16. deFzone

    deFzone Новичок

    Сообщения:
    79
    Симпатии:
    37
    Баллы:
    0
    Текстура дерева мне не очень понравилась. Мне сильно понравилась текстура "ткань", но на мой взгляд она еще похожа на мятую бумагу, которую долго долго мяли, а потом развернули и выровняли.
    В общем уроки хорошие, и показывают значения многих фильтров.. :)
     
  17. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Кстати, если в этот момент остановиться, то текстура очень напоминает поверхность какой-либо планеты без атмосферы, сфотографированную спутником. Качество изображения очень близко именно к таким фотографиям. Посмотрите например на снимки лунной поверхности. ;)
     
    Последнее редактирование модератором: 24 окт 2010
  18. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    TiamatInc, да, ты прав) Действительно, как будто кусочек Луны сфотографирован...) Кстати, если при исполнении этого эффекта поменять направление тени, например, направить источник света вверх, а не вниз, как в моём случае, то имитация каменистой поверхности будет смотреться совсем по-другому...
     
  19. deFzone

    deFzone Новичок

    Сообщения:
    79
    Симпатии:
    37
    Баллы:
    0
    Текстура похожа на камень, на камень который разломлен пополам что ли, что то такое ассоциируется у меня.
    Но если поменять цвет, я думаю будет текстура похожая на воду, или озеро у которого вода светится от свечения солнца.. вот как-то так получилось:

    Еще текстура, мне напоминает снежные покровы, если смотреть сверху.. (в общем очень хорошая текстура..).
     
  20. Sherri

    Sherri Новичок

    Сообщения:
    1.068
    Симпатии:
    2.469
    Баллы:
    0
    deFzone, ну, ты и любитель синего цвета!!)) Все мои работы перекрасил в синий))) :):):)

    А ты, знаешь, очень красиво получилось...) мне нравится...) мне даже в синем исполнении эта текстура больше нравится, чем та , что получилась у меня...)
     
Показать ещё