Как разбить фон PSD на мозаичные многослойные элементы

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

Проблема с фоновым изображением:изображение на заднем плане

Как вы можете видеть, на нем есть две маски, которые придают ему особый эффект:

Маски и слой

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

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

Без маски изображение выглядит так, что выглядит менее убедительно:

введите описание изображения здесь

Любые советы о том, как легко сделать текстуру мозаичной, также будут оценены, но я, вероятно, справлюсь с этим сам. Спасибо.

Это немного зависит от того, как вы думаете обо всем этом, но я бы в основном продублировал текущую деревянную текстуру (дублируйте, чтобы вы могли видеть нейтральную текстуру за ней.) прокрасьте отверстие в середине, как в ваших масках там и, возможно, немного увеличить насыщенность, сделать цвет более красноватым и сделать его темнее.
Кстати. Я могу ошибаться, но разве заголовок вопроса не спрашивает о том, как замостить эту деревянную текстуру, но в самом вопросе вы спрашиваете, как превратить эти виньетки в полупрозрачные png?
Спасибо. Я предполагаю (и могу ошибаться здесь), что могу получить изображение маски PNG, которое будет включать только эффект (прозрачное изображение), которое я могу просто наложить на последнее изображение в моем вопросе, чтобы создать первое изображение в моем вопрос. Это может работать хорошо, потому что тогда я могу разбить фоновое изображение и масштабировать изображение маски. Если у меня есть отверстие в середине изображения, вы увидите шов, который не подходит.
Да. Мозаика и наслоение, на мой взгляд, одно и то же, я не могу разложить изображение таким, какое оно есть, и если я масштабирую его как есть, будут видимые искажения. Однако, если я могу разделить его на два слоя, я могу разбить фон и масштабировать слой наложения, создавая отличный эффект для всех разрешений.
Вот краткий пример того, о чем я говорю... jsfiddle.net/lollero/fztsV (щелчок по контейнеру анимирует размеры.) Что я сделал, так это сделал дрянной шаблон из текстуры, а затем обрезал область, чтобы использовать ее как виньетку, а затем сделал, как я предложил ранее. Единственная проблема с тем, что я предлагаю, - это возможное размытие текстуры на изображении виньетки, если его размеры становятся слишком большими, но это все равно должно работать.
На самом деле, я не знаю, о чем я думал. На самом деле вам нужно удалить эти маски слоя (чтобы у вас был более темный цвет вокруг), а затем объединить все слои и просто закрасить отверстие посередине (или, возможно, использовать одну из масок слоя, которые вы уже использовали. сделано, чтобы сделать это отверстие.) сохраните это как png, и все готово.
Изображение с отверстием в центре не может быть мозаичным... Мне нужно, чтобы изображение СВЕТЛЕЕ было мозаичным (что должно быть легко), и мне нужно наложение поверх плитки, которое я могу масштабировать. Если наложение имеет слишком большую непрозрачность, масштабирование нарушит мозаику изображений.
А что в моем примере не так/отлично от того, что вы хотите/нужно?
Изображение, которое у меня есть, будет светлее, а не темнее. Маски, которые у меня есть, представляют собой объекты MASK, которые я не могу преобразовать в реальный слой. Если я сплющу их, они сольются с изображением, создав непрозрачное изображение. Если я сделаю отверстие в изображении (чтобы показать более светлый центр), между изображением внутри отверстия и изображением выше будет шов.
Вам нужно сделать более темное изображение, чтобы сделать эту виньетку. Те корректирующие слои Кривой, которые у вас есть, просто нажмите Shift, щелкните эти маски слоя в них или удалите маски слоя, а затем выберите все слои (по крайней мере, те, которые я вижу в вашем примере изображения) и объедините эти слои (Ctrl + E) что оставляет вам более темную версию этой деревянной текстуры. Итак, есть ли что-то, что вам нужно сделать иначе, чем в моем примере jsfiddle? ...и я понятия не имею, о каком стыке вы говорите... Я имею в виду... темные части выглядят темнее светлых, но это то, что вы пытаетесь здесь сделать, верно?
Вы забываете TILLING! Когда я поставлю две из них одну рядом с другой, они будут выглядеть не как одна большая доска, а как две доски с двумя точками... Я хочу ОДНУ доску, чтобы фон был мозаичным, но передний план оттенял фон. Шов появится, когда у меня будет два слоя один поверх другого, которые воспроизводят одни и те же пиксели. Попробуйте сделать это не с одним изображением, с двумя (одно рядом с другим) и вы поймете, о чем я.
Итак, опять же, что-то не так с моим примером jsfiddle? Вот снова ссылка jsfiddle.net/lollero/fztsV
Это не совсем похоже на изображение выше, и если бы оно было темнее, вы бы увидели, что вертикальные линии от окружающего изображения с дырой начинаются, а затем резко заканчиваются при попадании в изображение, расположенное сзади. Спасибо за попытку. Пожалуйста, отправьте это как ответ, если я не получу ответ, который хочу, я приму это. Извините, если я был немного расплывчатым.

Ответы (1)

Я не чувствую особой мотивации отвечать, так как кажется, что вы даже не попробовали мое предложение, и вы говорили, что моя идея не работает, потому что это и то, что мне только что показалось, как будто вы не читали мои сообщения должным образом . (может быть, я не очень ясно выразился, но все же.)

Мой пример не совсем похож на ваше изображение, потому что я не делаю вашу «работу» за вас, я просто предлагаю вам метод ее выполнения.

Основная идея такова:

  1. сделать мозаичную текстуру.
  2. создайте нетайлинговую текстуру на основе предыдущей, чтобы она была как можно более последовательной, и сделайте ее темнее. (Размер этого должен быть примерно такого же размера , как у коробки.)
  3. сделайте отверстие в середине текстуры без тайлинга.

Если вы очень беспокоитесь о том, что текстура имеет какой-то шов, вы можете попробовать изменить ее непрозрачность очень низко, а затем еще больше затемнить изображение без плитки.

http://jsfiddle.net/lollero/fztsV/1/

http://jsfiddle.net/lollero/fztsV/1/show/

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

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

введите описание изображения здесь введите описание изображения здесь

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

Как разбить фон PSD на мозаичные многослойные элементы
СпросиСетьПолитика конфиденциальности1y, 0v