Salt Pepper—The Art of Illustrating Texture

2024-03-10 09:58

本文主要是介绍Salt Pepper—The Art of Illustrating Texture,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

就不写图片描述

Salt & Pepper—The Art of Illustrating Texture

椒盐噪声— 插图艺术的阐述

Learn four different texture techniques using Adobe Illustrator and Photoshop.
使用Adobe Illustrator和Photoshop学习四种不同的纹理技术。

In the world of illustration you sometimes need to add depth and tactical representation to objects. There are many ways to achieve this digitally, using things like gradients, heavy color contrasts, patterns, textures, etc.
在插图的世界里,有时你需要给予对象赋予深度和策略的表现。有很多方式可以实现这种数字化,使用渐变、深色对比,模式、纹理等思想。

For the past few months I’ve been experimenting and tooling different ways to incorporate textures into my illustrations. After countless hours of exploring, and numerous conversations with fellow Illustrators, I’ve discovered a few different solutions I’m happy to share. This article covers four texture techniques using Adobe Illustrator and Adobe Photoshop, and is intended to play to your own tooling strengths.
在过去的几个月中,我一直在实验和使用不同的方式将纹理融入到我的插图路。经过不停地探索,以及与其他众多插画师谈话无数个小时后,我发现了一些不同的解决方案,现在我很高兴与大家分享。本文介绍使用Adobe Illustrator和Adobe Photoshop制作的四个纹理技术,当然也看你使用软件的造诣。

Before we get started

在开始之前

This article is intended for novice Adobe Illustrator and Photoshop users. To keep the read as short as possible, I’ve skipped over the application tooling basics to get straight to the goods as fast as possible.
这篇文章面向Adobe Illustrator和Photoshop的新用户。为了让它言简意赅,我已经跳过了软件使用基础部分直接说我们的操作。
But before we jump into the formulas, let’s understand the methodology as it applies to all techniques.
在我们一头扎紧教程之前,让我们理解一下这项被应用到所有技术上的理论。

The Salt & Pepper Methodology

椒盐噪声理论

When cooking with salt and pepper, a little can go a long way. The same rule applies when illustrating. A dash of tint with a pinch of shade can bring a whole new dimension or emotion to a composition. As a general rule, tints refer to highlights or brighter areas, and shades are the shadows or darker areas of a specific color or object.
当用椒盐做饭的时候,差之毫厘谬以千里。这种规则同样适用于插图。带阴影的色彩可以带来一种全新的感受,就好像把维度或者说感情色彩相融合。从常理讲,色彩指的是高亮或亮色区域,而色调是阴影或特定的颜色或对象的较暗区域。
We’ll be using two main attributes in both of the applications. The first is blending modes, and the second is transparency. For the tinted textures we’ll use the Overlay blending mode. For the shaded textures we’ll use the Multiply or Color Burn blending mode.
我们将在这两个应用程序使用两个主要属性。第一种是混合模式,并且第二个是透明度。对于浅色的纹理,我们将使用叠加混合模式。对于阴影贴图,我们将使用内嵌或颜色加深混合模式。

Below you can see an example using three layers:
下面你可以使用三层看一个例子:(本来是动图,太大了传不上来,截图了,分别是俯视图和正视图)
俯视图
正视图

1.alt layer — Overlay blending mode; low transparency.
1.ALT层 - 覆盖混合模式;透明度低。
2.Pepper layer — Multiply or Color Burn blending mode; low transparency.
2.Pepper层 - 嵌入或颜色加深混合模式;透明度低。
3.Solid vector shape(s)—Object you wish to apply tints and shades to.
3.纯色矢量形状(S)-禁止你所期望的色彩和色调的应用(这句翻译不来。。)。

The techniques

技术

For all of the techniques we’ll use the same simple, illustrative object — an orange — so you can see the different results in comparison. An orange works particularly well because it has a great shape and material texture. OK, ready to learn the four techniques?
对于所有的技术,我们将使用同样的例子,我们的插图:一个橘子, 以便你可以看到不同的效果。橘子的效果特别好,因为它有一个很棒的形状和材料质感。 好的,准备好学习的四种技术了吗?

1. Illustrator & Grain Effects

1. Illustrator & 纹理效果

The first technique uses Illustrator and the pre-built Photoshop raster effects. This technique applies a noisy/grainy style to the object. Follow the steps below in Illustrator:
第一种技术使用Illustrator和预构建的Photoshop栅格效果。该技术适用于噪声/纹理风格的对象。Illustrator中的步骤:

Steps for Technique 1

技术步骤1

Create the solid shape(s) you wish to add tints and highlights to (in our case, the orange). Lock the layer.
创建实心图形并添加你喜欢的色调和高光(在本例中使用橙色)。锁定图层。
Add two layers above the first. Label one Multiply and the other Overlay.
添加上述前两个图层。打开一个新选项卡新建一个内嵌图形和另一个图层。

In the Multiply layer create an ellipse (circle) the same size as the orange with a linear gradient fill. The gradient fill should go from white (#ffffff) to black (#000000). Also adjust the gradient angle as you wish. In our case the light source is coming from the top left, so our shade should be opposite of the light in the bottom right of the object. For this example the angle of the gradient is -60º. Finally change the white in the gradient to 0% opacity.
With the gradient object selected go to Effect > Texture > Grain. You should then see a modal with texture settings.
On the right of the modal, select Stippled for Grain Type. Then adjust Intensity and Contrast to achieve the texture effect you’re looking for. Select OK.
With the layer still selected, change the Blending mode to Multiply or Color Burn and drop the Transparency down to 10–15%.
Align your Multiply object over the solid shape (the orange in our example).
Once you’re satisfied with the results lock the Multiply layer.
In the Overlay layer create an ellipse with a linear gradient that goes from white to black and adjust the angle so the white color is closest to the light source. Change the opacity of the black to 0%.
Repeat steps 4 and 5.
With the object still selected, change the Blending mode to Overlay and drop the Transparency to 15–20%.
Align the Overlay layer over your object and that’s it. Salt and Pepper!
Download Sample File
Technique #1 Notes:
You can get different grain effects by selecting various Grain Types from the Effects > Grain dropdown menu.
Take the time to experiment. Other options like Effects > Sketch > Reticulation can work as well, and you can get some really great results by stacking the effects.
This technique also works with Mesh Gradients instead of Linear Gradients.
2. Illustrator & Raster Bitmap Masks
The second technique uses raster Bitmap images to create the textures. This technique can be a bit hefty on your processor. If you have a slow machine I would avoid this technique or use it sparingly.

Steps for Technique 2
In Illustrator create the solid shape(s) you wish to add tints and highlights to (in our case, the orange). Lock the layer.
Add two layers above the first. Label one Multiply and the other Overlay.
On the Multiply layer place a bitmap image in the position where you’d like to add shade to your object. You can view a sample bitmap image in the downloadable sample file below.
Change the fill color of the bitmap image to black(#000000).
Then create an Ellipse (circle) the same size as the orange with no fill or stroke. Select both the Ellipse and the bitmap image, then select Object > Clipping Mask > Create. Finally align the masked bitmap image directly over the orange below it.
With the masked bitmap image selected, in the Transparency panel change the Blending mode to Multiply or Color Burn and drop the Transparency value to 10–20%.
Next select the Overlay layer and place the bitmap image where you’d like to add a tint or highlight to your object.
Then change the fill color of the bitmap texture to white(#ffffff).
Repeat step 5.
With the masked bitmap image selected, in the Transparency panel change the Blending mode to Overlay and drop the Transparency value to 10–20%. Voilà, Salt & Pepper success!
Download Sample File
Technique #2 Notes:
In order to alter the fill color in Illustrator, the raster texture must be in a Bitmap format.
You can also use gradient color fills with this technique.
3. Power Textures with Illustrator & Photoshop
If you‘re wanting a unique paint brush effect with realistic strokes and/or realistic textures, this technique is for you.

Steps for Technique 3
Open up Photoshop and create a new file the same size as your Illustrator Artboard. Also open the vector design in Illustrator. In our example, it’s the orange.
In Illustrator select the entire orange object and select Edit > Copy. Next open up Photoshop and select Edit > Paste. Then you should be prompted with Paste As options—be sure to select Smart Object.
In the layer panel create two layers above the smart object layer. Label one layer Multiply and the other Overlay.
Next change the blending modes of the Multiply layer to Multiply and Overlay for the Overlay layer.
In the layers panel select all three layers and then select the folder icon in the bottom of the panel. This will place all three layers into a group.
Next select the smart object layer only, then use the Magic Wand Tool to select the entire orange object. If done correctly you will see animated dashed lines outlining the orange.
In the layers panel select the folder or group. Then select the Add Layer Mask in the bottom of the layers panel (the icon is a rectangle with a circle void). This will mask the entire group (all three layers).
Next select the Brush Tool, then select a texture brush of your choice from the bush presets panel. Also make sure you have a black (#000000) fill for your foreground color in the toolbar.
In the layers panel select the Multiply layer and start brushing in the shade area on the bottom right of the orange. You can avoid adding too much texture but lowering the opacity of the brush.
Next select a white (#ffffff) fill for your foreground color in the toolbar.
Then select the Overlay layer in the layers panel and start brushing in the tint area on the upper left of the orange. You can avoid adding too much texture by lowering the opacity of the brush.
Finally take a look at your overall composition. If the textures appear too drastic, you may need to lower the transparency of the Multiply and/or Overlay layers. That’s it, you’re done!
Download Sample File
Technique #3 Notes:
If you’re wanting to increase saturation and add shade to your smart object(s), you might want to use the Color Burn blending mode rather than the Multiply blending mode which just adds shade.
You can really get some great effects by using multiple brushes—especially if you’re using a pressure-sensitive graphics tablet.
A great resource for simulating realistic brushes in Photoshop is Kylebrush.com.
4. SVG Textures
This technique uses light code to create textured illustrations for the browser. The reason I added this is because of how low the file size is. You might have a unique challenge where you want to use a scalable illustration—let’s say for a responsive site—and desire subtle textures.

Steps for Technique 4
Follow the same steps as the first technique except when it comes to applying the Effect > Grain (step #4). Instead, use Effect > SVG Filter > AI_Static, then follow the remaining steps (#5–12) from Technique 1.
Download Sample File
Technique #4 Notes:
Compare the difference in file size for SVG and PNG at 2x to see if this technique is worth it. In the example above, the SVG is 4KB and the PNG is 82KB. On a high-traffic site, the size difference can yield a huge improvement in browser rendering.
When saving SVG Options for the web, be sure to check Minify and Responsive before saving.
Choose wisely and use sparingly

Above is a side-by-side comparison of the four texture techniques
Each of the four techniques are visually very similar. Define your style direction then figure out which technique works best for your end goal. Also consider the tools you’re comfortable with: If you’re short on time, stick to what you know; If you’re an Illustrator guru with a powerful CPU, you can implement fantastic textures right in Illustrator; If you’re creating a large amount of different textures, I’d suggest using Illustrator + Photoshop in combination.
Just like cooking, too much salt and pepper can ruin a dish. I’m a strong believer in, “If it doesn’t taste good, don’t serve it.” The same rule applies here—thus the name. Use textures sparingly. Too much and your objects might appear flatter than when you initially started. I know it’s fun to add more and more, but you have to remind yourself of their value. Always apply textures with purpose.
Thanks for reading and best of luck with your future Illustration projects :).
原文地址:https://medium.com/google-design/salt-pepper-the-art-of-illustrating-texture-c962dc67cc35

这篇关于Salt Pepper—The Art of Illustrating Texture的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/793869

相关文章

发现个有趣的东西:Tweetable Mathematical Art(用三个140字符以内的函数生成一个1024尺寸的图片)

发现 我是在看《构建之法》这本书时,看到作者提到这个: 好厉害!用三段140字符以内的代码生成一张1024×1024的图片_IT新闻_博客园 这是2014年一个人在 Code Golf Stack Exchange (a question and answer site for programming puzzle enthusiasts and code golfers) 发起的编程挑战:

Salt Function Flow:深度解析复杂网关编排的优势与实践

系列文章索引: Salt Function Flow 系列文章 在业务流程编排中,处理条件逻辑、并行任务、以及复杂的流程分支是常见的挑战。对于需要高度灵活性和扩展性的项目,Salt Function Flow 提供了强大的网关编排能力,使开发者能够轻松定义和管理复杂的业务流程。本文将深入探讨Salt Function Flow中的复杂网关编排功能,展示其如何通过排他网关、并行执行等功能应对复杂的

【HDU】5023 A Corrupt Mayor's Performance Art 线段树

传送门:【HDU】5023 A Corrupt Mayor's Performance Art 题目分析:水水的线段树,首先颜色只有30种,所以状压就好了,然后每次查询就把区间内所有的颜色“或”出来,用位运算判断一下有哪些颜色就好了。。 代码如下: #include <cstdio>#include <cstring>#include <algorithm>#in

Salt Function Flow 系列文章

Salt Function Flow 是一款Java开发、轻量级、内存级的业务流程编排框架,旨在帮助开发者通过函数式编程的方式定义和管理复杂的业务流程。它以高效、灵活的流程处理为核心,适用于多种业务场景,从简单任务自动化到复杂业务逻辑处理。 系列文章: Salt Function Flow:深度研发经验的沉淀,打造轻量级高效流程编排框架 Salt Function Flow:深度解析复杂网关编排

Salt Function Flow:深度研发经验的沉淀,打造轻量级高效流程编排框架

在开发者的世界里,业务流程编排是一个既复杂又关键的环节。如何高效地管理和编排这些流程,直接影响着系统的性能和可维护性。本次介绍一款基于大量研发实践经验而打造的流程编排框架——Salt Function Flow。它不仅轻量、强大,更是将多年实践中的最佳经验沉淀于其中,为开发者提供了一套经过验证的可靠解决方案。 为什么选择Salt Function Flow? 深厚的研发积淀 Salt Fun

Android ART 的初始化和启动

新书上市《深入解析Android 5.0系统》  以下内容节选自本书 ART的初始化  下面我们从JNI_GetDefaultJavaVMInitArgs(),JNI_CreateJavaVM()和JNI_GetCreatedJavaVMs()三个函数入手来了解ART的初始化过程。这三个函数的代码位于jni_internal.cc中。  JNI_GetDefaultJavaVMInitArg

《嵌入式系统 – 玩转ART-Pi开发板(基于RT-Thread系统)》第7章 环境监测系统(二)

原文地址 《嵌入操作系统 – 玩转ART-Pi开发板》第7章 环境监测系统(一) 7.3联网【WiFi】 ART-Pi有两种联网方式,一个是板载的WiFi模块AP6212,这个模块自带蓝牙;另一个是工业扩展板的网口,使用的芯片是LAN8720A,我没有扩展板,这里就只讲解如何使用WiFi联网。这里先看看WiFi的电路。 图11 AP6212芯片 图12 WiFi和BT接口

《嵌入式系统 – 玩转ART-Pi开发板(基于RT-Thread系统)》第7章 环境监测系统(一)

原文地址 开发环境: RT-Thread版本:4.0.3 操作系统:Windows10 Keil版本:V5.30 RT-Thread Studio版本:2.0.1 开发板MCU:STM32H750XB 从本章开始,笔者不在就某一个单一功能讲解,而是针对某一个具体的项目作为讲解的主要内容。 7.1前言 第一个项目是一个环境监测系统,我相信很多朋友都做过,我这里主要从宏观层面来把握,你学会这个

《嵌入式系统 – 玩转ART-Pi开发板(基于RT-Thread系统)》第9章 基于Select/Poll实现并发服务器(一)

开发环境: RT-Thread版本:4.0.3 操作系统:Windows10 RT-Thread Studio版本:2.1.1 开发板MCU:STM32H750XB LWIP:2.0.2 并发服务器支持多个客户端的同时连接,最大可接入的客户端数取决于内核控制块的个数。当使用Socket API时,要使服务器能够同时支持多个客户端的连接,必须引入多任务机制,为每个连接创建一个单独的任务来处理连接上

《嵌入式系统 – 玩转ART-Pi开发板(基于RT-Thread系统)》第8章 APT-Pi双网络实现自动切换

ART-Pi中有多种联网方式,最常用有两种:一个是自带的Wifi模块AP6212,另外一个是以太网,ART-Pi使用的PHY芯片是LAN8720A。 笔者在前面的文章已经讲解了Wifi的使用。 Wifi的移植使用 关于以太网的讲解请看笔者以前文章: 详解以太网(一) 详解以太网(二) 接下来将讲解以太网的使用。 8.1以太网硬件介绍 在讲解移植步骤之前,有必须先介绍我们的实