从Photoshop到Webflow:如何将静态模拟变成实时网站

发布时间:2019-08-15 11:00:07 阅读:39

如果你像大多数设计师一样,你可能最乐意在像Photoshop或Sketch这样的桌面应用程序中处理设计过程的早期阶段。这可能是处理这个过程的一个很好的方法,因为它最大限度地减少了您在Webflow中必须做出的选择的数量,加快了速度。

但不幸的是,这也意味着许多重复的工作。考虑到这一点,下面是我如何使软件开发到网络流的设计过程更快更容易。

想一起去吗?

在这篇文章中,我将致力于建筑网络流量网站免费私人空间设计投资组合设计。

步骤1:从Photoshop中提取所有图像资产

我曾经认为这是一项非常乏味的任务,但是奥多比创造了一个奇妙的“生成图像资产”功能,使这个过程变得更快、更容易。

以下是如何在Photoshop中生成您的图像资产:

1.在“图层”面板中,选择并命名所有图像

确保这些名称已准备好生产,因为您将在下一步中导出它们。

给出所有图像层的生产就绪名称。

2.定位文件棉花图像资产

这将创建一个包含所有图像资产的文件夹。它们将具有您在Photoshop中定义的名称、格式和图像大小。

生成图像资产会自动创建并导出您的PSD图像到一个文件夹,以便于上传。

步骤2:创建一个新的网络流项目并添加字体

创建新的网络流项目后,请转到项目设置中的字体选项卡,并添加所需的所有字体。您可以从谷歌字体库中选择任何字体、您拥有的任何字体,或者连接您的Typekit帐户从那里添加字体。

您可以使用Typekit、谷歌字体或您自己在网络流中的个人收藏中的字体。请确保只选择您需要的重量!

无论您是上传字体还是从谷歌字体或字体套件中选择字体,请注意仅仅选择您的体重需要在你的网站上。您添加到站点的每个字体粗细都会增加总文件大小,从而增加加载时间。

第三步:上传你的图片

在设计器中,打开“资源”面板,通过拖放或单击上传按钮(带有向上箭头的云图标)来添加所有图像。不管怎样,你都可以批量上传你的图片。

批量上传图片到资产管理器,这样你就可以把你所有的图片放到网络流中了。

第四步:创建你的风格指南

在网页流中创建样式指南允许您在一个地方调整全局网站样式,这样当您的客户决定不喜欢标题字体或想要不同的蓝色时,您可以快速更新您的设计。

您可以将样式指南创建为自己的网站页面,或者将其作为符号,以便在工作时可以轻松地在页面中添加和删除样式指南。

构建风格指南时,我通常会包括:

  • H1通过H6标题。一定要塑造你的风格全局选择器(即,“所有H1标题”)。
  • 段落。你们可能对于长格式和其他内容,需要有单独的段落样式。
  • 按钮。别忘了给它不同的状态设计风格!
  • 文本链接。各州也是如此。
  • 彩色。请确保将所有自定义颜色保存为全局样本
将您的样式指南部分制作成符号可以方便地放入任何页面以供参考,然后删除。

专业提示:让你的风格指南成为一个符号

将整个样式指南部分变成符号,以便于在任何页面中添加或删除。这很方便,因为它允许您在正在处理的页面上有样式指南作为参考,并且可以在页面完成后轻松删除它。

您还可以添加灯光黑暗文本元素和徽标的变体。如果页面背景的颜色不同,这很方便。

第五步:创建你的品牌调色板

我们在上一步提到了给风格指南添加颜色,但是它需要更多的关注。

将div块添加到页面中,并根据您的Photoshop设计给它一个背景色。使用滴管在你的PSD中选择颜色,并将十六进制代码粘贴到Webflow中,以确保你有合适的色调。然后将颜色保存为全球样本并恰当地命名它。

重复以上步骤,直到您锁定了整个调色板。随着每个样本的全局保存,您将能够快速轻松地在您的站点上应用正确的颜色,甚至在以后需要时更新它们。

添加您的品牌颜色,并使它们全球化,以便于以后重用和更新。

第六步:构建你的全球元素

网站导航、页脚、联系人表单等元素通常不会随页面变化。当您构建这些全局元素时,请确保将每个元素都变成一个标志

符号允许您将任何重复元素转换为可重用的组件,并在您进行更新时保持该符号的所有实例在您的站点上同步。

这样,您可以快速地将全局元素添加到每个需要它们的页面中,大大加快了设计过程。

将重复出现的全局元素(如页脚、导航条和联系人表单)转换为符号,以便以后重用。

第七步:为响应性成功做好准备

当你在私营部门司工作时,很容易陷入基于像素的思维模式。但是为了简化响应性设计过程,你需要考虑亲戚确定的单位——对你的网站来说,这意味着思考百分比

这样做会给你省下一笔钱许多调整小型设备的设计。

我采取以下几个步骤来确保我的设计容易响应:

  • 将截面设置为100%宽度、相对位置,并使其清晰:向左。这确保子元素保留在父元素中,并且该部分不会在任何点折叠。我这样做也是出于习惯,因为网络浏览器需要相当明确的风格方向。
  • 添加溢出:隐藏任何超出页面宽度的元素,以防止水平滚动
  • 如果向元素添加最大宽度,请确保将其宽度设置为百分比
  • 使用ems进行字体大小调整,至少对于线条高度,以及理想的尺寸
  • 在设计移动断点之前完成桌面设计作为样式在网络流中级联
  • 如果你在一个预先设计了多个断点的PSD中工作,在开始考虑是否需要考虑任何根本性的变化之前,请务必比较各种设计

第八步:负责任地弯曲

Flexbox是一个强大的布局工具,可以极大地加快您的工作流程,尤其是当您试图垂直居中内容、均匀分布元素或在不同断点处更改元素位置时。

我通常使用基本的盒子模型样式,如相对、绝对和固定定位——但那只是因为我在一个人们仍然使用IE8的世界中长大。

也就是说,flexbox有几个很好的用例:

  • 反向布局:在“文本左、图像右”和“图像右、文本左”之间交替的布局过去很难在手机上处理。但是使用flexbox,您只需点击“反向布局”复选框,以确保图像始终显示在文本上方或下方。
虽然这种设计在桌面上看起来很漂亮,但在手机上它会不一致地交替文本和图像。
通过反转布局,我们可以确保页面在图像和文本之间一致交替。
  • 垂直居中元素
    信不信由你,容器内垂直居中的元素过去很难。Flexbox使它一键简单。
  • 流体网格设计
    Flexbox还简化了基于流体网格的设计的创建。

第九步:在内嵌图像和背景图像之间做出决定

在内嵌图像和背景图像之间做出决定有时会很困难,所以我使用这些经验法则来帮助我做出正确的决定:

如果您希望图像:

  • 作为截面的背景,填充宽度和高度
  • 具有渐变或单色覆盖
  • 内心有阴影
  • 固定,以创建视差滚动效果

然后使用背景图像。

但是,请注意,带有背景图像的元素更难重用(除非您动态地提供背景图像),因为您需要添加一个组合类来避免一次又一次地提供相同的背景图像。

否则,使用内嵌图像。Webflow会自动调整各种设备的内嵌图像的大小,您可以轻松地向它们添加alt标签。此外,它们比带有背景图像的元素更容易重用。

背景图像给你自由分层多个背景效果。

第10步:何时使用边距和填充

我经常得到这个问题,所以我想我应该在这里加一个简短的提示。

如果您试图将内容与其他内容分开,请使用边距。如果您试图将内容保留在某个区域或在整个组件周围添加空间(如英雄部分),请使用填充和宽度样式。

换句话说,边距增加了空间在外面元素,填充时增加空间在…之内元素。

margin-v-padding.png

步骤11:添加动画和悬停效果

我知道开始构建交互和悬停效果有多诱人,但是等到你的静态设计完成。迷失在杂草中,不知道当用户与卡片交互时卡片会如何变化,这会严重减慢你网站建设的其余部分。

如果你想在网站设计中看到另一篇关于动画的文章,请在评论中告诉我!

步骤12:构建你网站的其余部分

既然您已经成功地将资产、基本样式和字体添加到您的站点,您的工作流程速度应该会大大提高。这个过程通常需要5到30多分钟,这取决于您的站点或PSD文件的大小和设计的复杂性。

从Photoshop转换到Webflow

有了这个过程大纲和提示,你应该可以更快、更容易地从Photoshop过渡到Webflow。如果你有什么诀窍或建议,请在评论中与社区分享!


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"从Photoshop到Webflow:如何将静态模拟变成实时网站",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560