Pattern в качестве фонового изображения
Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.
Чтобы было яснее, рассмотрим пример psd-макета страницы:
Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?
До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.
Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.
Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.
Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.
Описание выполняемых действий приведено в локализованной версии Photoshop.
Простое вырезание фона
Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.
В этом случае нужно поступить только одним способом.
Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .
Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера
50x50px
100x100px
. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.
Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.
Вырезание фрагмента фона
Второй способ отличается от первого лишь только тем, что на этот раз удалось обнаружить в рисунке фона макета повторяющиеся фрагменты. При этом фон макета все также является растровым изображением.
Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.
Pattern в Photoshop
Третий способ основан на понятии
pattern
в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить
pattern
в нарисованном дизайнером psd-макете.
Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое
pattern
в двух словах.
Это образец узора какого-то определенного размера (который может быть любым) —
Как замостить фон картинкой под случайным прямым углом?
Есть картинка, нужно замостить ею фон так, чтобы они все были не под одним углом, а под разными (90, 180, 270 или 0). Как это можно реализовать?
- Вопрос задан более трёх лет назад
- 410 просмотров
Комментировать
Решения вопроса 1
Даша Циклаури @dasha_programmist
ex Software Engineer at Reddit TS/React/GraphQL/Go
либо создать контейнер (overflow:hidden), в него класть inline элементы с заданным фоном, создать заранее 4 класса css, ну и заполнить, логику только додумать (там ширина/высота/паддинги):
.rot_90d
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 1
console.log(`You’re pulling my leg, right?`);
Либо на сервере генерировать предварительно, либо создавать элемент canvas, помещать его подо все остальное и рисовать на нем эту картинку необходимое количество раз со случайными поворотами.
как замостить картинку в фотошопе
например есть маленькая картинка, я хочу ее замостить, как на рабочем столе в виндовсе, по все рабочей области. можно так сделать ?
Лучший ответ
автоматом помоему никак. создаешь изображение нужного тебе размера. перетягиваешь в него картинку. и нажимаешь контл -J. столько раз. сколько копий тебе надо. и потом переключаясь между слоями инструментом перемещение растаскиваешь их как тебя надо. .
может и более простой способ есть. но я только такой знаю. .
если непонятно. пиши в агент подскажу
Остальные ответы
может поможет http://turbobit.net/800s2o19yamz.html
ТАм есть пункт РАСТЯНУТЬ, выберите его должно получиться. Или можно увеличить размеры самого изображения в меню ИЗОБРАЖЕНИЕ
Как замостить картинку на фон приложения?
Не могу найти решение в гугле, как можно замостить картинку на фон layout. сделать это нужно по горизонтали. То есть имеется картинка 2*1280 px. нужно замостить во весь экран.
ЗЫ- собсна как можно картинку(прикрепил) такую вот сделать background, чтобы рационально ресурсы использовать(тобишь залить как она есть jpg то не пойдет).
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Замостить фоновую картинку
Подскажите как заставить картинку растянуться по ширине ячейки таблицы, и при этом заполнить ее по.
Как поставить картинку на фон
в OpenGL + C++ как вставить картинку в виде фонового изображения?
Как загрузить картинку на фон
Помогите пожалусто, я самоучка и немогу понять как добавить картинку на фон.
Как поставить картинку на фон?
Как поставить картинку на фон?
Универсальный программист
Регистрация: 21.12.2013
Сообщений: 374
Записей в блоге: 1
пересобрать программу с новым фоном
Регистрация: 04.05.2013
Сообщений: 61
а можно чуть конретнее? не совсем понял..
Регистрация: 28.03.2014
Сообщений: 156
Просто свойство android:background=»@drawable/. »
Можешь под разные разрешения переделать или 9patch использовать
Регистрация: 04.05.2013
Сообщений: 61
да, так и решил проблему
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как поставить картинку на фон.
http://htmlworker.ru/portfolio/fish_verstka/index.html вот сайт, интересно как делается картинка на.
Как поставить на фон картинку?
Как можно поставить на фон картинку? если картинка находится на рабочем столе в папке. можете.
Как установить картинку на фон формы
Народ подскажите как в PascalABC.NET установить картинку, именно КАРТИНКУ на фон, точнее в правую.
Как поставить на фон диалога картинку?
Доброго времени суток, такой вопрос. Как сделать картинку фоном для диалога? Цвет менять диалога.
Или воспользуйтесь поиском по форуму: