好的投资组合如何成为您的资产

我们将首先在Illustrator中绘制其线框，然后将其导出到Photoshop以添加一些复杂的照明和其他效果。

在本教程中，我们将在Photoshop和Illustrator中绘制著名的三星Galaxy。

步骤1 –在Illustrator中准备画布

请参阅下面的图片以供参考。

需要这些指南来帮助我们精确绘制电话线框。

从标尺上绘制到画布上以创建新指南。

我们将使用它来放置所有指南。

制作一个新层并将其命名为guide 。

按Ctrl + R调出标尺。

制作一个A4大小的新文件。

打开您的Adobe Illustrator。

步骤2 –基本手机形状

您将拥有一个新的圆角矩形形状。

单击确定 。

确保在“ 转角半径”上输入35 pt 。

不用担心宽度和高度设置。

在画布上单击一次以打开“ 圆角矩形”选项对话框。

**圆角矩形工具。

我们的第一步是绘制基本的手机形状。

您可以直接删除它，因为我们不需要它，我们只需要更改工具设置即可。

第三步

此功能可帮助我们轻松地将对象捕捉到辅助线上。

确保从“ 查看”菜单**“ 智能向导 ”。

第四步

请参见下面的图片以获取其位置。

单击并拖动以在提供的指南内绘制一个圆角矩形。

第5步

将“ 偏移”设置为-9点 。

单击对象>路径>偏移路径 。

选择我们刚刚创建的圆角矩形。

步骤6 –屏幕区域

从对话框中删除圆角矩形，因为我们不需要它。

将“ 转角半径”设置为5 pt 。

在圆角矩形工具仍处于活动状态时，在画布上单击一次。

步骤7

使用该指南可以帮助您精确绘制。

在屏幕区域内绘制一个圆角矩形。

步骤8

选择这两个形状，然后在“ 路径查找器”面板中选择“ 减负” 。

在形状下绘制一个矩形。

刚创建的屏幕形状重复。

矩形将剪切屏幕区域，并将其变成半圆形的矩形，我们可以将其用作状态栏区域。

步骤9

将“ 转角半径”设置为10 。

再次**“ 圆角矩形”工具，然后在画布上单击一次。

步骤10 –主页按钮

这将是“主页”按钮。

在手机下部绘制一个圆角矩形；

步骤11

将“ 偏移”设置为-4 pt 。

单击对象>路径>偏移路径 。

步骤12

这将切下圆角矩形的下半部分，并将其变成半圆角矩形。

选择这两个形状，然后在“ 路径查找器”面板中选择“ 减负” 。

画一个覆盖其下部的矩形。

绘制一个圆角矩形，并将其“ 填充”设置为“ 无” ，将“ 描边”设置为“ 黑色” 。

步骤13

点击删除将其删除。

使用直接选择工具并选择其下一行。

步骤14

这将使它变成填充形状，而不仅仅是一条线。

仍然选择形状时，选择“ 对象”>“展开” 。

步骤15

在形状内部绘制两个小矩形。

步骤16

使用直接选择工具选择其左侧，然后点击删除 。

选择这两个形状，然后从“ 路径查找器”面板中选择“ 减负” 。

绘制一个圆角矩形，然后用如图所示的矩形覆盖其左侧。

步骤17

选择“ 对象”>“展开”以将此线转换为形状。

步骤18

在形状的顶端绘制一个矩形。

步骤19

我们将得到一个三角形。

单击上下角进行删除。

单击矩形左边框的中心以添加新点。

步骤20

将“ 填充”设置为“ 黑色” ，将“ 描边”设置为“ 无” 。

步骤21

选择两个形状，然后在“ 路径查找器”面板上单击“ 合并 ”。

以下是我们所做的按钮。

步骤22 –应用程序图标

在画布上单击一次，并将“ 转角半径”设置为1 pt 。

**圆角矩形工具。

步骤23

**移动工具，然后按Alt + Shift + 拖动形状以复制它。

在屏幕内部为图标库绘制一个圆角矩形。

步骤24

选择我们刚刚创建的圆角矩形，然后在“ 对齐”面板上单击“ 水平分布中心 ”。

步骤25

使用钢笔工具在第一个矩形内绘制电话接收器的形状。

步骤26

使用类型并在图标下添加标签。

步骤27

绘制一个椭圆形的头部，然后手动绘制它的肩部。

在下一个圆角矩形内，绘制一个头像图标。

步骤28

选择两个形状，然后在“ 路径查找器”工具上单击“ 合并 ”。

步骤29

选择两个形状，然后单击“ 团结”以将其变成气球标注。

在下一个圆角矩形中，绘制一个椭圆和一个逗号形状。

步骤30

在最后一个圆角矩形内，绘制四个较小的圆角矩形。

步骤31

以下是我们完成的图标！

步骤32 –菜单导航

Alt + Shift + 拖动形状以复制它。

在图标上方，绘制小圆圈。

步骤33

选择所有圆，然后在“ 对齐”面板中单击“ 水平分布中心 ”。

步骤34

这个较大的圆圈表示它是“活动”页面。

选择一个圆圈，然后将其调整为更大的尺寸。

步骤35 –信号图标

使用直接选择工具向上拖动第二个矩形的顶线。

在屏幕上部的状态栏中，绘制一个小矩形，然后复制它。

步骤36

重复此过程，直到有四个矩形，如下所示。

步骤37 –电池图标

选择这两个形状，然后单击团结 。

画两个圆角矩形。

步骤38 –演讲者

按Ctrl + D几次以重复此复制过程。

画一个圆，然后按Shift + Alt + 拖动以复制它。

步骤39

绘制一个覆盖小圆圈的大圆形矩形。

步骤40 –相机

“照相机”仅由一些具有相同起源的不同大小的圆圈组成。

步骤41 –侧面按钮

如图所示，在手机两侧绘制两个圆角矩形。

步骤42 –在Photoshop中准备画布

打开Photoshop，然后制作一个新文件， File> New 。

现在是时候使用Photoshop将其变为现实了。

我们已经完成了电话线框的工作。

步骤43

在选项对话框中，选择“ 路径” 。

返回到Photoshop，然后将其粘贴（ Ctrl + V ）。

在Illustrator中选择所有路径（ Ctrl + A ），然后将其保存到剪贴板（ Ctrl + C ）。

步骤44

矢量路径将保留在“ 路径”面板中的新路径中。

步骤45 –基本形状

选择“纯色”，然后在下一个对话框中将颜色设置为＃0f1219 。

单击“ 图层”面板中的白色和黑色圆圈以添加新的调整图层。

将基本形状路径复制到新路径。

添加渐变叠加以在形状上添加微妙的照明。

步骤46

复制我们刚刚创建的形状，然后双击其缩略图层将其颜色更改为＃c3c6c9 。

步骤47

这会将形状变成手机边缘。

在选项栏中，将内部路径模式设置为从路径区域减去 。

添加“ 斜角”和“浮雕”以将形状转换为三维形状。

步骤48

在电话边缘的部分上绘制细微的阴影。

**画笔工具，并将前景色设置为黑色。

从现在开始，您绘制的所有内容都将进入手机边缘。

通过按Ctrl + Alt + G将图层转换为剪贴蒙版 。

制作一个新层。

步骤49

通过这样做，您使选择范围缩小了1像素。

单击选择>修改>缩小 1像素 。

按住Ctrl键并单击电话边缘层，以根据其形状进行新选择。

步骤50

制作新图层并绘制其他细微的阴影和高光。

步骤51

在手机边缘绘制阴影和高光。

重复上一步，这次使用Contract by 2 px 。

我们可以看到结果更加真实。

以下是在边缘上添加高光和阴影前后的区别。

步骤52 –屏幕区域

您可以使用任何颜色。

单击添加新的调整层，然后选择纯色。

将屏幕区域复制到新路径。

添加内发光和中风 。

双击图层以打开“ 图层样式”对话框。

步骤53

在这里，我使用了一个不错的星云图像 。

将壁纸图片直接放在屏幕区域层的顶部。

让我们在屏幕上插入墙纸。

步骤54

墙纸将自动进入屏幕。

按Ctrl + Alt + G将其转换为剪贴蒙版 。

步骤55

这样，调整层将仅影响墙纸而不影响手机。

通过按Ctrl + Alt + G再次将其设置为Clipping Mask 。

从菜单中选择“ 色相/饱和度” ，然后使用滑块修改墙纸颜色。

单击“ 图层”面板中的图标黑白圆圈以添加新的“ 调整图层” 。

下面是您的图层外观应如何。

步骤56 –主按钮

添加＃cccfd2颜色的调整层纯色。

将主按钮复制到新路径。

双击图层并**“ 阴影”和“ 斜角和浮雕” 。

步骤57

该过程与我们在步骤48至步骤51中使用手机边缘进行的操作非常相似。

让我们在按钮上绘制高光和阴影。

单击选择>修改>缩小 1像素 。

按住Ctrl键单击主按钮层，以根据其形状进行新选择。

步骤58

在按钮上绘制微妙的高光和阴影。

制作一个新层。

步骤59

添加一个新的调整层纯色，其中白色为白色。

选择其他两个按钮并将它们复制到新路径。

步骤60

将不透明度降低到20％。

步骤61 –应用程序图标

将其颜色设置为蓝色。

制作新的调整层纯色。

将图标复制到新路径上。

步骤62

双击图层并添加微妙的“ 渐变叠加” 。

步骤63

删除其他三个形状。

步骤64

对其他颜色重复上一过程。

步骤65

将其颜色设置为白色。

添加新的调整层纯色。

将图标形状复制到新路径上。

双击图标层并**外发光和渐变叠加 。

步骤66

在每个图标下添加一个适当的标签。

步骤67 –菜单导航

添加颜色为＃7e899b2d的新“调整层实心”。

选择四个小导航圈，然后将其复制到新路径。

步骤68

重复相同的过程，在中间使用更大的“活动标签”，这次使用＃cbced4颜色。

步骤69

我为我选择了3。

在**选项卡的顶部添加一个数字。

步骤70 –侧面按钮

将其放在电话后面。

使用颜色＃b0b3b6制作新的调整层纯色。

将侧面按钮复制到新路径。

步骤71

添加角度为0度的 内阴影和内发光 。

步骤72

对另一个按钮重复该过程。

步骤73

另外，添加内发光 。

添加内部阴影，但是这次使用180度将阴影添加到按钮上。

双击“图层”按钮以打开“ 图层样式”对话框。

步骤74 –状态栏

添加时间信息。

使用黑色作为新的调整层纯色。

选择状态栏并将其复制到新路径。

步骤75

选择绿色作为其颜色。

添加新的调整层纯色。

将电池复制到新路径。

使用以下设置添加内发光 。

步骤76

双击图层并**渐变叠加 。

选择白色作为其颜色。

将信号图标复制到新路径，然后添加调整层纯色。

步骤77 –演讲者

添加一个新的调整层纯色 ，其颜色为＃6b6f76 。

在选项栏中，将较小的圆形路径模式设置为从路径区域中减去 。

将扬声器复制到新路径。

双击“ 图层”，然后添加以下“ 图层样式” 。

这就是结果。

步骤78 –相机

对圆圈内的环执行相同操作，但颜色为＃585a5e 。

添加一个新的调整层 ，颜色为＃272d36 。

**圆并将其复制到新路径。

下面是100％放大率的相机。

步骤79 –反思

添加新的调整层纯色，将白色设置为其颜色。

在手机上绘制一个多边形切口，并将其模式设置为“ 相交路径区域”。

将电话的基本形状复制到新图层上。

双击反射形状并添加微妙的“ 渐变叠加” 。

步骤80

将混合模式设置为屏幕 ，并将其不透明度降低到70％并将填充降低到0％ 。

步骤81

新建一个图层，并在其上方区域突出显示更多内容。

按住Ctrl键单击反射层。

步骤82

按Ctrl + A ， Ctrl + Shift + C ， Ctrl + V可以将电话复制到新图层。

单击背景上的眼睛图标将其隐藏，并使手机位于透明背景上。

通过选择所有图层将电话图层放置在组中，然后按Ctrl + G。

步骤83

将电话放在原始电话下。

右键单击并选择“ 垂直翻转” 。

按Ctrl + T变换手机。

步骤84

添加图层蒙版并绘制从白色到黑色的渐变以淡化反射。

步骤85 –阴影

将其不透明度设置为10％ 。

新建一个图层，然后在手机下方画一条黑线。

使用较大的画笔大小和0％的 硬度**画笔工具。

步骤86 –背景

释放您的创造力。

这里没有完美的规则。

制作一个新层，并开始使用不同的蓝色阴影进行绘画。

让我们在后台工作。

步骤87

使用很大的半径大小，并确保**预览选项，以便您可以实时查看结果。

添加高斯模糊（“ 滤镜”>“模糊”>“高斯模糊” ）。

步骤88

6像素

制作一个新文件，大小为6××××??

让我们制作一个像素图案（或者，您可以跳过这些步骤，并使用PSDfreemium中已经制作的像素图案）。

步骤89

使用1像素画笔大小的铅笔工具新建一个图层并绘制对角线。

按下Ctrl + 0，以最大化画布放大级别。

步骤90

单击编辑>定义图案将图像另存为图案。

隐藏背景，因此我们只看到对角线。

步骤91

返回我们的背景，双击它，并使用我们之前制作的图案添加“ 图案覆盖 ”。

这是结果。

最后结果

我希望您喜欢本教程。

如您所见，我们只是结合了Illustrator中矢量绘制的灵活性和Photoshop中像素绘制的简便性来获得逼真的产品图像。

最后，我们可以取回手机。

下载

翻译自: https://www.hongkiat.com/blog/bethemes-building-good-portfolio/