跳到主要内容

15个Photoshop CC网页和应用程序设计技巧

我们许多为应用程序设计的人都会有Photoshop CC在我们的工具库中,如果你像我一样,你将不断寻找更聪明的工作方式。今天,我想分享一些我多年来学到的工作流技巧和窍门。

01.使用Adobe Comp CC快速设计

Adobe Comp CC可用作快速入门项目的一种方式,无论是用于UX / UI决策,设计还是其他方面。在Adobe Comp中开始项目后,您可以设置网格系统并轻松添加设计内容,从使用Typekit字体的类型格式到图像和图形。完成后,您可以将您在Adobe Comp CC中设计的内容直接带入Photoshop CC并继续在那里进行操作。

02.设置更聪明

为了简化您的工作流程,首先应该看看您的设置。例如,您可以轻松更改工作区以显示所需的更多工具和面板。只需选择“窗口>工作区>图形和Web”。这不仅可以添加和组织您最常使用的面板,还可以在工具栏中显示绘图工具。

您也可以利用一些偏好。转到“Photoshop CC>首选项”或“编辑>首选项”,选择“单位和标尺”类别,并将标尺单位设置为所有新文档的像素(或任何您需要的),无论哪个配置文件(打印,网页)已经被用来创造它。接下来,转到“首选项>性能>历史记录和缓存> Web / UI设计”。在这里,您可以优化Web和UI设计的历史状态,并将缓存级别设置为具有大量图层的较小文件。

最后一次省时。如果在Photoshop中没有打开文档,请按T键 用于在“工具”面板中选择“水平类型”工具的键。然后,进入选项栏并更改字体,字体大小等 - 这些格式设置将成为您未来任何新文档的新默认设置。

03.使用画板加快工作速度

自从Photoshop中引入了画板以来,为Web或应用程序设计变得更加容易。画板允许您在同一文档中设计多种不同的设备尺寸和方向,并使导出更快。以下是一些提示:

  • 当选择画板复制它时,alt +单击画板周围出现的任何“加号”图标
  • Alt +将画板拖动到新位置以复制它
  • 使用任何方法选择画板,然后按ctrl + J复制它
  • 按alt并单击“图层”面板中的画板,使该画板适合您的屏幕
  • 要一次折叠所有画板,cmd +单击“图层”面板中画板名称旁边的箭头
  • 要快速导出画板,请选择“文件>导出>快速导出为PNG”

04.创建一个网格

Using the new Guide layout command you can easily set up a grid based on your needs

使用新的Guide布局命令,您可以根据需要轻松设置网格

我们大多数人在Photoshop中工作时会设计成某种网格。最新版本的Photoshop CC可以轻松完成此操作。打开文档后,选择“查看>新建指南”。在出现的对话框中,您可以设置垂直和/或水平参考线,并将该网格应用于选定的画板或文档中的所有画板。

05.重复使用自定义形状

To save a serious amount of time, you can save custom shapes and reuse them

为了节省大量时间,您可以保存自定义形状并重复使用它们

如果您发现自己经常创建某些形状,则可以轻松保存这些形状以供重复使用。只需绘制形状,然后选择“路径选择”工具(黑色箭头),右键单击形状并选择“定义自定义形状”。这将使用其余自定义形状保存形状,可以通过选择“自定义形状”工具(在“矩形”工具下)或“选项”栏下的“形状”菜单中访问该形状。

06.选择使用快捷方式

在工作流程中节省一些时间的任何地方都是黄金,选择是您可以随时学习更多快捷方式的区域之一。以下是一些要记住:

  • 使用“移动”工具,在“选项”栏中选择“自动选择图层”选项(或“自动选择组”)。这样可以轻松单击画板中的内容并选择图层
  • 或者,关闭“自动选择”和cmd +单击内容以暂时将其打开
  • 使用“移动”工具并启用“自动选择图层”,移动并单击多个对象以选择所有对象
  • 在画板上,您可以使用“移动”工具自动选择单个对象:选择该图层,右键单击内容,然后在出现的菜单中选择父组(或其他)
  • 如果没有大量分层内容,请在内容之间拖动以选择多个图层

07.解决矢量绘图

Instead of hunting around for vector properties, you can edit them with the Properties panel

您可以使用“属性”面板编辑它们,而不是寻找矢量属性

在为网络或应用程序进行设计时,您需要创建矢量图稿。每个新版本的Photoshop都会变得更容易。一个典型的例子是“属性”面板的大修 - 在一个地方编辑矢量形状时,我们可以找到最广泛使用的特征。

以下是一些简单的绘图和编辑技巧:

  • 要在绘制时拖动形状,请按空格键,拖动形状,然后释放空格键并继续绘制
  • 要从中心绘制,请在绘制时按alt
  • 要限制比例,请在绘制时按下shift
  • 如果您不希望形状捕捉到画板边缘,则可以打开和关闭捕捉边界(“视图”>“捕捉到”>“画板边界”)
  • 最后一个提示:在绘制矢量形状之前,请确保选中“Snap Vector Tools和Transforms To Pixel Grid”选项(“Photoshop CC>首选项>工具或编辑>首选项>工具”)。这可确保您的矢量具有清晰的边缘。

08.复制形状格式

我们花了相当多的时间来格式化我们的设计。为节省时间,您可以将格式从一种形状复制到另一种形状。在“图层”面板中,右键单击形状图层,然后选择“复制形状属性”以复制所有属性(笔触/填充)。然后选择多个图层或图层组并右键单击,选择“粘贴形状属性”。也可以使用“路径选择”工具选择形状 - 只需右键单击形状,然后选择“复制填充”或“复制完成笔划”以复制和粘贴其中一个。

09.在CC库中保存资产

If your company lets you use them, CC libraries are a no-brainer for saving and reusing assets and formatting

如果您的公司允许您使用它们,CC库是保存和重用资产和格式的明智之举

CC库使您可以轻松地在云中保存格式和资产(例如图形),然后您可以将其应用于设计项目。要重复使用已保存的图形,只需将其从“库”面板拖到您的设计中即可。内容链接到“库”面板中的资源(默认情况下,但可以嵌入),允许您拥有一致的共享元素,如一系列Photoshop文件中的标题。如果您更新资源库资产,资产将在您的设计中更新。

Linking smart objects is great for updating content across multiple projects

链接智能对象非常适合跨多个项目更新内容

链接的智能对象允许您跨PSD放置源文件以进行非破坏性编辑。与CC库一起,这可以真正加快您的工作流程,通常可以节省文件大小。

例如,如果你设计Retina(HiDPI)@ 1x,最终需要缩放内容。您的原始图片内容大小必须为@ 2x或@ 3x。然后可以使用“文件>放置链接”将其作为智能对象引入。如果您使用“文件>导出>导出为”等方法缩放设计或导出,您可以在其中更改大小(2x),Photoshop知道使用智能对象中的原始图像数据。

11.保存图层样式

Saving layer styles help create greater consistency

保存图层样式有助于提高一致性

我们将图层样式应用于我们的内容,以添加阴影,渐变和笔触等非破坏性样式。这意味着我们很可能在对象上使用大量相同的样式。您可以在“样式”面板中保存图层样式,以便在其他位置重新应用它们。这是保持一致外观和节省时间的简便方法。

首先将图层样式应用于图层或组(将图层样式应用于组是将相同样式应用于一堆对象的快速方法)。然后,选择“窗口>样式>创建新样式”。为样式命名,调整设置并单击“确定”。您创建的样式现在将在“样式”面板中可用。

12.过滤层

Filtering your layers can make focused editing much easier

过滤图层可以使重点编辑变得更加容易

如果您的Web或应用程序设计文件中有很多图层,则很难在“图层”面板中找到内容。过滤图层是关注特定图层的好方法。您可以根据名称,应用的效果,画板等进行过滤。

例如,您可以过滤列表以按名称查看所有按钮(“按钮”)。完成后,您可以通过切换“图层”面板顶部的红色按钮来关闭过滤,再次显示所有图层。

13.复制CSS

Copy CSS from content directly in the layers panel for use in development

直接在图层面板中复制内容中的CSS,以便在开发中使用

在“图层”面板中,您可以复制Photoshop从图层内容生成的CSS。然后,您可以在开发过程中使用此代码。转到“图层”面板并选择图层或组,右键单击其中一个图层或组,然后选择“复制CSS”。然后,您可以将CSS粘贴到编辑器中。

14.出口资产

All the export options you need when using the Export option

使用“导出”选项时所需的所有导出选项

能够导出资产以用于开发过程是许多网页设计师使用像Photoshop这样的应用程序的原因之一。以下是一些快速出口资产的方法:

  • 要将画板导出为PNG,请选择“文件>导出>快速导出为PNG”。如果要选择其他文件格式,可以选择“文件>导出>导出为”
  • 要将“快速导出”更改为PNG以外的其他内容,请打开“Photoshop CC>首选项>导出或编辑>首选项>导出”,然后更改导出选项
  • 要将任何内容导出为PNG,请在“图层”面板中选择它,右键单击并选择“快速导出为PNG”
  • 要导出任何内容,请在“图层”面板中选择它,右键单击并选择“快速导出为PNG”或“导出为”。在那里你也可以选择导出多种尺寸(@ 1x,@ 2x,@ 3x等)

15.在设备上预览

Quick preview on a device using the Adobe Preview CC mobile app and Device Preview panel in Photoshop

使用Photoshop中的Adobe Preview CC移动应用程序和“设备预览”面板在设备上快速预览

使用Photoshop中的“设备预览”面板和设备上的Adobe Preview CC移动应用程序,您可以在多个iOS设备上预览Photoshop设计。您在Photoshop CC中所做的更改甚至可以在预览CC中实时显示。在“设备预览”面板中,只要安装了Adobe Preview CC移动应用程序,就可以使用USB或Wi-Fi将多个iOS设备连接到Photoshop。

我们偶尔会陷入困境,需要推动尝试更新的功能。 Photoshop现在提供了许多方法来节省设计Web或应用程序的时间。我希望您能查看至少一些可以帮助您简化设计流程的新选项。

这篇文章最初出现在网络杂志问题288;在这里买

相关文章:



翻译字数超限