shopify主题开发_在Photoshop中为手工商品设计Shopify主题

shopify主题开发

在本教程中，我们将为手工商品商店创建布局。 我不会过多地讨论特定的字体大小或颜色代码，而是将重点放在解释字体选择，颜色，比例等方面。

教程资产

为了继续学习，您将需要一些（免费）资产：

• 来自Unsplash的照片
• 来自StockSnap.io的照片
• Font Squirrel的Source Sans Pro字体
• 来自Font Squirrel的Serif Pro字体来源

定义业务目标

在开始设计布局之前，您需要首先定义此练习的业务目标是什么。 提升品牌知名度是头等大事吗？ 是将产品出售给新客户，还是先给他们提供价值，获取他们的详细信息，然后再出售？ 您必须考虑营销，业务目标和用户需求，以设计一种说服目标受众采取所需行动的布局。

首先问以下问题：

• 我们卖什么？
• 谁会对购买我们的产品感兴趣？
• 他们为什么要向我们购买？
• 我们将如何提供价值？

在本教程中，我决定专注于强烈的图像和对负空间的慷慨使用，以营造自由和清晰的感觉。 我希望设计看起来优雅，并吸引那些关心自己形象的人们。

制备

在进入Adobe Photoshop并降低视觉效果之前，让我们定义一些变量，例如颜色，样式和大致方向。

第1步

开始收集您想要的情绪板和调色板图像。 我通常使用Pinterest ，但是gomoodboard.com非常有用，其设计纯粹用于创建情绪板。

第2步

接下来，让我们为您的设计形成一个配色方案。 与您的品牌相关并会吸引目标受众的一种。 通常最好使用调色板生成器，例如Adobe Color CC （以前的Kuler），它可以节省您挑选颜色的时间。

从您的情绪板上传图像，然后查看生成的颜色。 调整调色板以适合您的需要，并保存颜色以备将来参考。

选择字体

受我们情绪板上某些项目的启发，我们将使用Source Pro字体家族，包括sans和serif版本的字体。 两者的混合将增加平衡感和强烈的标题。

准备好文档

在Adobe Photoshop中发挥创意之前，让我们整理一些整理工作，例如创建新文档和设置一些准则。

第1步

打开Adobe Photoshop并创建一个新文档CMD + N。 根据您的感觉来定义其尺寸以适合您的设计需求-在我的情况下为1400x3564px 。

第2步

在此之后设置一些指南，以便我们的布局具有足够的空间并看上去平衡。 设置一些准则将确保整洁，并有助于为此设计目的定义我们网站的宽度。 转到查看>新指南…并设置一些指南。 我通常选择1000px作为起点，并从各个角落添加一些指导，以便有足够的呼吸空间。

注意：本教程使用的准则：垂直为200px，500px，550px，700px，850px，900px和1200px。

提示：您还可以使用GuideGuide Photoshop插件使此过程更快。

欢迎新客户

我们将通过创建吸引人的视觉上层区域来开始我们的商店设计，以吸引访客的注意并发送有关该网站内容的即时消息。

第1步

创建一个名为“导航”的新组，并在130px处设置一个新的水平参考线 。 这是我们徽标，导航链接和搜索的位置。 将徽标放在左侧。 如果您没有，请创建一个矩形并在其上放置文本。

第2步

现在，将导航项放置为纯文本。 在计划阶段，您应该已经知道需要包含在导航中的内容，以便潜在客户发现它很有用。 使用水平字体工具（T）编写链接标题，并将其放置在徽标旁边，以留出足够的空间。

第三步

在电子商务方面，搜索是一项极为重要的功能。 将您的搜索字段放在主要顶部导航栏的右侧，使其醒目且可访问。 要创建它，请使用矩形工具（U）和水平字体工具（T） 。 请注意颜色是如何受到我们与Adobe Color CC一起使用的图像的启发的。

第4步

现在是时候放置引人注目的图像了，一旦访客第一次看到它，它将成为整个网站的焦点。 正如您最近在网络上经常看到的那样，我们将选择重点清晰且清晰的高质量图像，以便覆盖文本和UI元素。

使用矩形工具（T）绘制一个1400x700px （任何颜色）的矩形形状，并将其放置在顶部导航的正下方（还记得130px的水平辅助线吗？适用于此形状）。 然后拖动您选择的图像并将其图层放置在矩形图层上方。

之后，按住Alt键并将鼠标悬停在图像层上，直到您看到一个向下的小箭头，然后释放鼠标以创建剪贴蒙版，以便仅在矩形区域内可见图像。

按CMD + T调整照片大小，并确保按住Shift键，以便按比例调整大小。

第5步

为了帮助我们的图像将注意力更多地吸引到水平中心，让我们在底部添加一个从透明到黑色的渐变。 拾取渐变工具（G）并将其自定义为从黑色＃000000变为透明。 之后，按住Shift键并用鼠标从图像底部拖动到中间附近以创建渐变。 然后将其制成剪贴蒙版 ，并将其不透明度降低到50％，这样就不会那么强烈了。 将图层重命名为“阴影”，以便于识别。

第6步

现在该使用功能强大的标题吸引您的访客的眼球，并鼓励他们了解更多信息。 使用大胆的Source Sans Pro并撰写简短标题。 我使用了70px大小的Source Sans Pro（黑色）和160的字母跟踪功能 。

步骤7

您已经吸引了用户的注意，现在提供了辅助消息，最重要的是，提供了号召性用语 （也称为CTA） 。我已将28px大小的Source Serif Pro（常规）用作副标题，并重新使用了搜索按钮以保持用户界面一致。

注意我使用的间距。 始终在元素周围留出足够的空间，以便更快地感知它们并使其看起来更有条理。 此外，如果仔细观察，您会发现文本层彼此更靠近。 这是由于格式塔的邻近定律 。

“根据邻近定律，彼此靠近的事物似乎被组合在一起。”

建立信任

我们已经完成了“欢迎新客户”或标头区域。 在吸引了访客的注意力和兴趣之后，是时候向他们展示我们的商店所提供的更多好处了。

第1步

由于我们将网站的顶部区域保持在最小限度，因此我们将在其余布局中保持简洁的美观。

放置一个可能使您的访客感兴趣的标题和简短的说明，以鼓励他们更多。 我用过Source Sans Pro（Semibold）24px和深灰色＃282723 。 确保在标题上方留出足够的空间，使其与顶部区域一致。

为了便于说明，请使用较亮的内容，以便使其在视觉上较弱，并立即被认为是次要的。 我使用了16px Source Serif Pro（常规） ，颜色为#adadad灰色。

第2步

建立信任的一种有效方法是使用触发大脑，创造欲望的高质量吸引人的图像。 确保花费时间为您的产品拍摄精美的照片或请专业摄影师完成工作。 在本教程中，我将使用虚构的产品，因此我不必自己拍照-而是使用Unsplash和Stock Up中的照片 。

选择矩形工具（U）并绘制一个矩形。 之后，将您的产品照片拖到Photoshop中，将其放在矩形上方并创建一个Clipping Mask 。 如果需要，请按CMD + T调整图像大小。

第三步

为简单起见，我们将仅提供有关产品的基本信息，包括标题和价格（您可能会发现这些信息会触发用户想要了解更多信息）。

选择相同的Source Serif Pro字体，然后使用与该标题相同的深灰色输入标题。 之后，在价格标签上使用较浅的灰色，因为这是辅助信息，不需要太多的视觉强度。 要记住的另一件事是，我们的商店元素（如标题，号召性用语按钮和描述框）居中。

第4步

现在，将所有产品层归为一组，然后按CMD + J进行复制，将它们放置在较早定义的垂直准线之间，并在它们之间留出空格。

第5步

我们完成了包含三个产品的“趋势”部分。 根据Paul Seys的说法 ，三个选项是使您的提议更具说服力的最佳选择。

“一种这样的技术被称为“戈尔德洛克效应”（或“戈尔德洛克定价”）。 这个词源于格林兄弟的故事，在那儿Goldilocks吃了三碗稀饭。 第一个太热，第二个太冷，但最后一个“恰到好处”。”

现在，我们放置一个小分隔线，以便将布局分成多个部分。 我使用了线工具（U） 1px浅灰色#e6e6e6因此可见，但不太牢固。

提示：按住Shift键可轻松绘制完美的水平线。

第6步

现在，让我们创建另一个显示更多产品的部分，并将其称为“受欢迎”。 人们一直在寻求验证，并展示其他人喜欢的流行产品，这为他们提供了证明这些产品物有所值的社会证据。

复制CMD + J，并自定义“趋势”部分的标题，描述和产品。 复制更多产品，使3x2的最佳产品网格化。

捕捉线索

在展示了大多数视觉效果以引起人们的兴趣和欲望之后，是时候捕获访问者的信息了，以防他们现在不想购买，因此您以后可以联系到他们。

第1步

我们将包括一个使用相同标题和描述格式的简单博客部分，以及一些博客文章摘录，以将用户重定向到他们可能感兴趣的内容。

选择矩形工具（U）并绘制一个巨大的矩形，它将作为此新部分的背景。 使用细微的浅灰色使产品与产品略微分离。 我用过#fbfafa 。 现在复制上一节的标题和描述，并将它们放在新背景的顶部。

第2步

现在，选择“ 水平字体工具（T）”，然后输入博客文章的标题，日期和简短摘录。 我再次使用Source Serif Pro作为标题和描述，并使用Source Sans Pro作为日期。

即使在此博客块中，您也会注意到清晰的视觉层次结构，标题最暗，最大，其他元素的颜色更小，更浅。 始终采用视觉层次结构来实现逻辑流程。 为了保持一致性，使博客文章与产品块一样大。

第三步

现在，将所有博客帖子层归为一组，然后按CMD + J将其复制两次，将其放置在垂直准则之间，并与产品之间留出空格。

在展示了一些很酷的产品和有价值的博客文章之后，是时候稍微吸引您的访问者，并提供带有明确号召性用语的表格进行订阅了。

再次抓住Rectangle Tool（U） ，选择较深的颜色，例如#282723并为我们的订阅表单绘制背景。 通过使用明显较暗的背景，您将创建对比度，该对比度将自动引起观众的注意。

第5步

现在写一个简短的摘要，解释人们为什么要订阅； 表达功能 优势 。 之后，导航到我们设计的导航，并复制包括按钮的搜索字段，然后将其重新用于订阅表单。

拖动重复的图层并将其放置在我们新创建的背景之上，然后自定义输入字段并调用号召性用语按钮。

第6步

最后，每个模板都必须具有包含链接的页脚，以便人们可以向下滚动并找到对关键页面的导航，例如客户支持，联系信息，社交网络等。

再一次，复制博客文章文本层并对其进行自定义以显示您选择的链接。 拆分不同的链接组，并形成等距排列的行。

最后一点：在版面的最底部添加版权行。

恭喜你！

而已！ 我们终于完成了Shopify动力商店的主题设计，现在继续检查您的文档层，删除不必要的文档层，然后将其交给开发人员，或者甚至更好地自己编写！

翻译自: https://webdesign.tutsplus.com/tutorials/design-a-shopify-theme-for-handcrafted-goods-in-photoshop--cms-24060

shopify主题开发