Вот, что примерно должно получиться:
Шаг 1.
Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом.Создайте новый слой и назовите его "Создание формы". Выберите инструмент Ellipse Tool (Эллипс ) (U) на панели инструментов:
В появившейся сверху панели выберите вкладку Style (Стиль) и выберите «none» (нет стиля), выберите белый цвет:
Нарисуйте форму как показано ниже:
Теперь для придания глубины изображению создадим тень. Примените следующие настройки к этому слою:
Вот, что получилось:
Шаг 2.
Находясь на прежнем слое, нажмите Ctrl + T и правой кнопкой мыши, выберите Warp (Деформация) .
Затем перетащите край сетки:
Теперь используйте ваш творческий подход и экспериментируйте с формой. Вот несколько примеров:
Шаг 3.
Наряду с инструментом Shape Tool (Формы) (U) вы также можете использовать Rectangular , Elliptical Marquee (Прямоугольная, Овальная область) .
Нарисуйте овал, возьмите мягкую кисть и нарисуйте, как показано ниже:
Теперь вы снова можете применить деформацию к этому слою:
Обратите внимание, что при деформации курсор меняет свою форму на маленькую чёрную стрелку:
Шаг 4.
Без сомнения, после всех вашим экспериментов с деформацией у вас появилось множество слоев. Комбинируйте их между собой и составляйте любые формы. Например, такую:
Теперь добавим шары к изображению. Создайте новый слой и назовите его «Шар». Нарисуйте белый круг, как показано на рисунке ниже:
Теперь добавьте отверстия на шар. Для этого создайте новый слой поверх слоя «Шар». Затем нарисуйте круг, как показано ниже:
Затем выберите Stroke (Обводка) :
Вот какой эффект должен получиться:
Теперь добавьте ещё одно отверстие с другой стороны. Для этого дублируйте этот слой и измените размер отверстия.
Мы закончили с шаром. Для придания ещё лучшего эффекта, слейте все слои, относящиеся к шару вместе и дублируйте получившейся слой. Разместите шары, как показано ниже:
Вы можете изменять размеры шаров, для красоты.
Шаг 5.
Мы почти закончили. Теперь добавим ещё некоторые эффекты. Заменим заливку слоя Background (Задний план) с черного фона на радиальный черно-белый градиент для большей красоты:
Также добавьте несколько акцентов мягкой кистью, как на рисунке ниже:
Теперь сгладим изображение.
Дублируйте слой Background (Задний план). Слейте все слой, кроме Background (Задний план), дублируйте получившейся слой. Примените к дублированному слою Filter- Noise- Median (Фильтр-Шум-Медиана) , задайте следующие настройки.
Веб-дизайн, если рассматривать его как способ доставки контента пользователю, планируется и создается с особой ответственностью и важностью. Но сама работа упрощается тем, что в основе макета используются сетки, колонки и различные геометрические формы. Квадраты, прямоугольники, трапеции, ромбы, шестиугольники, треугольники, окружности - наиболее распространенные элементы для оформления дизайна, причем, в самых разных стилях. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформления фреймов и блоков, секций. Более того, геометрические форы могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Четкие, прямые, резкие и неокруглые линии и фигуры часто способствуют ассоциации сайта с передовыми технологиями, даже если сам контент рассказывает о… котятах, например.
Геометрия, симметрия, абстракция в Photoshop
А если немного пофантазировать и превратить фотографию в абстрактный коллаж из геометрических фигур? Мы создадим нашу форму, а потом разрежем изображение по ней и выложим новую композицию. Немного цветооткорректируем и придадим эффектов. Ничего не напоминает? Возможно, некоторые из вас вспомнят старые ретро коллажи из фотографий, газет, рисунков, когда из изображений вырезались геометрические фигуры, а затем ими выкладывалась совершенно новая симметричная фигура.
Сложно? Не совсем. Некоторые мастера используют в дополнение к Photoshop еще и Illustrator, но мы сделаем все силами одного только фоторедактора .
Для начала нам предстоит нарисовать в новом документе фигуру «Эллипс» размером 500х500 px. Можно создать такой же по размеру Документ, а затем пропорционально увеличить размер холста до 700х700 px. Можно сразу большой и нарисовав фигуру, отредактировать размеры в окне свойств. Путей много, тут как вам удобнее.
Мы же создали новый документ 500х500 пикселей, включили направляющие через центр (Меню Просмотр - Новая направляющая и затем передвинули их в центр).
Выбираем фигуру «Эллипс» на панели инструментов, отключаем заливку и оставляем контур в 2 пикселя (нам так нравится). Рисуем Окружность и при необходимости редактируем в окне свойств её ширину и высоту до 500 px. Переходим в Изображение - > Размер холста и увеличиваем до 700х700 px.
Отдельные геометрические фигуры мы будем рисовать разными цветами. Это для наглядности, для удобства выравнивания, чтобы все кружочки, уголочки визуально не сливались в черном цвете.
Затем рисуем отдельный маленький круг размером в половину большого, то есть 250х250 px и располагаем его внутри большого по центру. Поскольку мы рисуем симметричную абстракцию, то эту симметрию и придется создавать по направляющим.
Зажав кнопку Alt, инструментом Перемещение (чтобы автоматически создавались новые слои) создадим еще три копии маленького кружочка и разместим внизу, справа и слева, создав крестик. При этом сами кружочки должны пересекаться между собой и только границей соприкасаться с большим. Затем в центре тоже разместим один кружочек. И вот что должно получиться в итоге.
Поскольку мы рисуем геометрические фигуры, то одних только кругов мало. Давайте создадим треугольник, который должен будет вписаться в большой круг. Выбираем инструмент Многоугольник , устанавливаем количество сторон 3 и размер 250 px . Рисуем его, а затем с помощью Трансформирования (Ctrl+ T) подгоняем под размер (это чуть удобнее), так чтобы нижняя грань соприкасалась с тремя точками трех горизонтальных центральных кружочков.
А затем этот треугольник копируем и переворачиваем по вертикали. Итог ниже.
Таков наш рисунок.
Несложно, но красиво. Объединяем все слои в группу и делаем копию группы. Вот это нужно для того, чтобы затем иметь в будущем возможность отредактировать фигуру. Если бы мы использовали Illustrator, то фигура осталась бы там, и мы могли бы её там и редактировать. Но в данном случае, мы сохраним её в слоях как группу, а с копией поработаем дальше.
Выбираем группу копию и объединяем все слои. У нас получается отдельная целая фигура. Фон у нас белый, но если его отключить, то фигура будет прозрачной и с ней можно работать дальше.
Открываем наше изображение в новом документе, копируем слой-абстракцию и при необходимости с помощью Трансформирования (Ctrl+ T) увеличиваем фигуру до нужного размера. Согласитесь, что создать по четким размерам ее проще, а затем увеличить или уменьшить. Инвертируем цвета на слое с фигурой (Ctrl+I) или Изображение -> Коррекция -> Инверсия.
Теперь:
- Выбираем инструмент «Волшебная палочка » и выделяем некий объект в нашей фигуре.
- Переходим на инструмент выделение «Прямоугольная область » и перемещаем выделение в любое понравившееся вам место на изображении.
- Делаем активным слой с картинкой, копируем (Ctrl+ V), вставляем (Ctrl+ C).
- Берем инструмент Перемещение и переносим новым слой с кусочком картинки на старое место внутри абстрактной фигуры.
И так каждый кусочек фигуры мы меняем. Поначалу будет казаться, что получается, откровенно говоря, «белиберда полнейшая ». Но… к слою двадцатому вы заметите заметное преображение всего рисунка.
Важно: чтобы слой-кусочек ровно занял положение внутри фигуры, корректируйте его положение с помощью кнопок-стрелок на клавиатуре при активном инструменте Перемещение. Если все равно остаются нежелательные разрывы, активируйте Трансформирование (Ctrl+ T) и поправьте форму кусочка. Затем соберите все их в группу.
И вот, что получилось в итоге.
Но фигура-то у нас цветная, несмотря на то, что мы её инвертировали. Да, черное стало белым, но цветное осталось. Можно аккуратно заполнить белым (инструмент Заливка ), но тогда контур будет очень толстым и выглядеть будет несколько неказисто, рвано даже (на наш вкус). Поэтому мы выделяем слой с фигурой, выбираем Изображение -> Коррекция -> Цветовой тон/Насыщенность и снижаем параметр Яркость до нуля. И теперь границы по-современному четкие и белые.
А можно сделать их немного голубоватыми. При этом тонироваться будут только цветные границы. Проблема в том, что у нас кружочки в центре белые (ранее черные), а это значит, что они не затонируются с помощью параметра Цветовой тон. Наложим цветность другим способом.
Поэтому в окне «Цветовой тон/Насыщенность » меняем яркость на ноль и переходим в «Режим наложения » для данного слоя-фигуры. Здесь накладываем цвет и можно немного поиграть с «Внешним свечением », создав тем самым небольшую дымку.
Еще к оригиналу можно добавить теней немного, будто сверху рамка фигурная с линзами (рисунок-то искажен внутри) наложена и от её граней отбрасываются тени.
Мы оставим себе беленький оригинал для дальнейшего работы.
Веб-дизайн в последнее время несколько прохладно относится к коллажам в целом, но наши кусочки, размещенные несколько случайно и хаотично, образуя симметричную геометрическую фигуру, сохраняют целостность композиции и сбалансированность. Поэтому при размещении на главной странице под названием или логотипом, в качестве фона или в ином варианте (затонированым основным изображением или с уменьшением общей яркости и насыщенности) такой эффект не является устаревшим или признаком дурного тона.
Но давайте добавим немного ретро-веяния в коллаж. Мы подобрали вот такую текстуру пыли на черном фоне и добавляем её к нашему документу. Поскольку текстура черная, то режим наложения выбираем «Экран», что позволит сделать её прозрачной, светлой и скрыть, тем самым, всю черноту. Изображение обретет вид временной потертости, потеряет некоторую строгость и четкость.
Теперь над всеми слоями создаем Корректирующий слой «Кривые» (внизу панели слоев иконка есть). Отдельно меняем кривизну для Красного, Зеленого и Синего цвета, создавая тем самым ретро стиль и эффект обработанной старой пленки. Дополнительно можно охладить наше творение, добавив фотофильтр - «Глубокий синий» со средней плотностью .
Окончательный результат наших манипуляций является не чем иным, как абстрактным произведением искусства с частичками изображения, что были изначально вырезаны, а затем выложены в коллаже. Геометрические линии создают баланс произведения, в то время как дополнительное текстурирование и регулировка цветности завершает творение и превращает его в старинное изображение. При этом геометрические узоры могут быть самые разные, как и исходные изображения.
Ниже, например, мы отключили границы фигуры, придавая всей композиции больше воздушности, парения и нечто заоблачного. Таким образом, создается ощущение и ассоциация, что произведение не только представляет красоту технологического города, небоскребы которого поднялись гораздо и гораздо выше облаков, но и все многообразие этой красоты, преломляя и разбивая сцену на отдельные части, смешивая их в строгую симметрию.
Важно принять во внимание , что главное в таком эффекте - контраст. Располагать в верхней части фигуры кусочки светлых облаков неправильно. Фигура бы слилась со сценой, и даже наличие линий (белых или иного цвета) не решило бы проблему визуальной ясности. Поэтому подбирая изображение, смотрите всегда на общий контраст композиции; прикидывайте мысленно, можно ли разбить сюжетную картинку и будет ли сочетание геометрии и художественного произведения смотреться и гармонировать.
Выводы
Геометрические фигуры используются не только в веб-дизайне. И причина тому - способность простых форм строить общение на динамике, движении. Они олицетворяют все это собой, а человек воспринимает геометрию, как нечто прогрессивное. Попробуйте отодвинуться от монитора и посмотреть на созданный нами коллаж издалека. Вы увидите совсем иное произведение, будто бы совсем новое. Возможно, вам покажется, что вот-вот оно закрутится или начнет распадаться на отдельные элементы.
Теперь представьте, что такую небольшую анимацию можно создать в Photoshop, или можно использовать параллакс и двигать отдельно фигуру и фон (он остался у нас целым и невредимым). Идей, в действительности, очень много.
Каждый год конструкции с геометрическими фигурами становятся популярными. В 2011 году в моде были диагонали; в 2013 - стиль METRO и квадраты с прямоугольниками; в 2016-2017 - параллакс породил безумие форм от треугольников до шестигранников. Это они только появились, а потом, в последующие годы, их старались применять практически везде. Таким образом, используя абстрактный коллаж, можно поразить и пользователей, и заказчиков необычностью и ассоциативной технологичностью.
Что такое "абстракция"? Абстракция - это некое отвлечение или отклонение от принятых существующих норм. Когда мы работаем с пейзажем, натюрмортом, с портретом, мы работаем с определенной конкретной целью, перед нами стоит определенная задача, чей-то образ. Понимание абстрактной фотографии гораздо глубже. Автор старается донести до зрителя что-то тонкое, неуловимое.
Чем удобна абстракция: по мнению профессиональных фотографов данного направления - только истинные ценители искусства могут правильно прочитать абстракцию. Однако общественное мнение имеет бо льший вес: каждый вправе "прочитать" в абстрактной фотографии то, что увидит!
СОВЕТ 1: Шестое чувство!
Чем отличается профессиональный фотограф от фотолюбителя: у него остро развито шестое чувство. Нельзя сказать, что он точно знает, какой ракурс здесь ему понадобится, или же какой эффект он далее использует в дальнейшем. Есть предпочтения, но надо помнить о том, что здесь и сейчас именно это лучше, именно эта фотография произведет впечатление на зрителя!
СОВЕТ 2: Будьте ближе к объекту!
Удивительные абстракции мы наблюдаем на неполных картинах! Это может быть только кусочек ткани целого платья, это может быть только часть листвы вместо целого дерева, это может быть одно ухо вместо целого портрета!
СОВЕТ 3: "Поворачивай и режь!"
Опасный казалось бы совет! Но совет этот действительно будет Вам полезен! Не бойтесь обрезать фотографию для получения абстракции. Ведь получение фрагмента непонятно о чем - есть прямая абстракция. Также, работайте с углом поворота фотографии: иногда картина меняется до неузнаваемости при повороте даже на какие-то 90 градусов!
СОВЕТ 4: Работайте над своим кругозором!
Оглянитесь вокруг! Наверняка вокруг вас есть прямые линии, интересные текстуры, причудливые узоры, облака, скалы, растения, отражения - ничто из перечисленного не имеет одинаковую форму! Найдите нужный вам фрагмент, и сделайте отличную фотографию!
СОВЕТ 5: Используйте макросъемку!
Макросъемка, а также макроотражения - это подвид абстрактной фотографии! С помощью макроотражения можно получить весьма интересные абстракции.?view=226
СОВЕТ 6: Практикуйтесь и экспериментируйте!
Практика, практика, практика - три главных слова для настоящего фотографа! Пробуйте новые экспозиции, совмещать несовместимое, экспериментируйте с теми эффектами, с которыми другие боятся работать! Будут ошибки, ошибки - это тоже результат! Помните, что абстракция - это отвлечение от привычного!
Абстрактные изображения достаточно популярны, их используют в основном для фонов. Дизайнеры и фотографы не редко применяют абстракции в качестве фона, что придает изображению красивый эффект глубины и фантастики. Довольно часто абстрактные фоны можно встретить в интерфейсах популярных программ, например операционные системы Windows, MacOS, Android и другие используют абстрактные фоны по умолчанию, так как они привлекательны и на их фоне хорошо видны элементы интерфейса (иконки, кнопки и т.п..).
Создание абстракции - это абсолютно творческий процесс, конкретно прямых инструкций просто не существует. В данном уроке мы сделаем абстракцию на основе фильтра фотошоп "скручивание", который возьмем за основу. С помощью применения различных фильтров к простому изображению мы сделаем красивую абстракцию.
Для того, чтобы абстракция получилась яркой и красочной я возьму изображение с ярким цветом и каким нибудь градиентным переходом, например пейзаж с закатом солнца.
Данное изображение в полном размере, а так же исходник работы вы можете скачать, кликнув справа в ленте "Материалы" по значку.
1. Открываем данное изображение программой Photoshop и первым делом преобразуем его в смарт-объект. Для этого в панели слоев кликаем по слою с изображением правой кнопкой мыши и выбираем "Преобразовать в смарт-объект".
В результате на слое с изображением должен появиться значок "смарт-объекта".
2. Теперь выбираем в верхней панели меню "Фильтр" - "Оформление" - "Меццо-тинто..."
В появившемся окне настроек фильтра устанавливаем тип "Cредние точки" и нажимаем "Ок".
В результате у вас должен получиться вот такой эффект:
В появившемся окне настроек фильтра выставляем линейный метод, хорошее качество и количество ставим = 100, после чего применяем фильтр, нажав "Ок".
Фильтр "Радиальное размытие" с указанными настройками необходимо применить к изображению 3 раза, чтобы эффект получившихся линий стал более гладким. Для этого либо еще 2 раза повторяем описанную выше процедуру, либо воспользуемся быстрой командой клавиш Alt + Ctrl + F, вызвав функцию фильтра и нажав "Ок" (2 раза).
Таким образом мы получим сглаженное изображение:
4. Применим к полученному изображению фильтр "Скручивание". Для этого в верхней панели меню выбираем "Фильтр" - "Искажение" - "Скручивание".
В появившемся окне настроек фильтра выставляем угол = 100.
5. Теперь в панели слоев кликаем дважды левой кнопкой мыши по значку фильтра "Скручивание".
В появившемся окне настроек выставляем режим наложения "Замена светлым" и нажимаем "Ок".
6. Снова применяем фильтр "Скручивание", только в другую сторону. Для этого в верхней панели меню выбираем "Фильтр" - "Искажение" - "Скручивание" и в появившемся окне настроек фильтра устанавливаем угол = -100.
Таким образом мы изогнули линии в другую сторону и сделали их волнами, получив симпатичный эффект.
7. Теперь в панели слоев кликаем два раза левой кнопкой мыши по значку фильтра "Скручивание", как это делали в шаге №5. В появившемся окне настроек выставляем режим "Замена светлым" и нажимаем "Ок".
8. Далее мы сделаем изображение ярче и сочнее, для этого в панели слоев кликаем два раза левой кнопкой мыши по фильтру "Меццо-тинто". Только кликать нужно не по значку фильтра, как мы делали до этого, а по самому названию.
После чего, в появившемся окне настроек выставляем тип "Средние линии" и жмем "Ок".
9. Следующим шагом в верхней панели меню выбираем "Изображение" - "Коррекция" - "Уровни" и в появившемся окне настроек нажимаем кнопку "Авто", для автоматической коррекции и кликаем "Ок". После данного действия изображение станет контрастнее.
10. Теперь подкорректируем цветовой баланс. Выбираем в верхней панели меню "Изображение" - "Коррекция" - "Цветовой баланс" и в появившемся окне настроек ползунками настраиваем параметры "Тени", "Средние тона" и "Света" на свой вкус, смотря каких цветов вы хотите добиться.
Сохраняем эффект, нажав "Ок".
11. Последним моментом будет настройка резкости, чтобы более четко отразить узоры абстракции. В верхней панели меню выбираем "Фильтр" - "Усиление резкости" - "Умная резкость" и в появившемся окне настроек фильтра корректируем параметры ползунками, подбирая понравившийся результат и нажимаем "Ок", для сохранения.
Таким образом мы с помощью программы Photoshop сделали абстрактную картинку с помощью различных фильтров, на основе "Скручивание". Как видите, получилось красивое абстрактное изображение, которое можно использовать, например, в качестве обоев рабочего стола.