成都seo
做网站推广价格 第1步：从Photoshop中提取所有图像资源
我曾经认为这是一项非常繁琐的工作，但Adobe创建了一个精彩的“生成图像资源”功能，使这个过程更快更容易。
以下是在Photoshop中生成图像资源的方法：
1.在“图层”面板中，选择并命名所有图像
确保名称已准备好生产，因为您将在下一步中导出它们。
为所有图像层提供生产就绪的名称。
2.转到文件 ? 生成 ? 图像资源
这将创建一个包含所有图像资源的文件夹。它们将具有您在Photoshop中定义的名称，格式和图像大小。
生成图像资源会自动创建PSD图像并将其导出到一个文件夹，以便于上传。
第2步：创建一个新的Webflow项目并添加您的字体
创建新的Webflow项目后，转到项目设置中的“字体”选项卡，然后添加所需的所有字体。您可以选择Google Fonts库中的任何字体，您拥有的任何字体，或连接您的Typekit帐户以从中添加字体。
您可以在Webflow中使用Typekit，Google Fonts或您自己的个人收藏中的字体。一定要确保只选择你需要的重量！
无论您是上传字体还是从Google字体或Typekit中选择字体，都要小心，只选择您网站上需要的权重。您添加到站点的每个字体权重都会增加总文件大小，从而增加加载时间。
第3步：上传您的图片
在Designer中，打开“资源”面板并添加所有图像，方法是拖放它们，或单击上传按钮（带有向上箭头的云图标）。无论哪种方式，您都可以批量上传图像。
将图像批量上传到资产管理器，这样您就可以准备好所有图像进入Webflow。
第4步：创建样式指南
在Webflow中创建样式指南允许您在一个位置调整全局网站样式，以便在客户端决定不喜欢标题字体或想要不同的蓝色时快速更新设计。
您可以将样式指南创建为站点的自己的页面，也可以将其设置为符号，以便在工作时轻松地从页面添加和删除它。
在构建样式指南时，我通常包括：
H1到H6标题。确保为每个标题级别设置全局选择器的样式（即“所有H1标题”）。
段落。对于长格式和其他内容，您可能需要具有单独的段落样式。
按钮。不要忘记设计不同的状态！
文字链接。同上国家。
颜色。请务必将所有自定义颜色保存为全局样本。
将样式指南部分转换为符号可以轻松地放入任何页面以供参考，然后删除。
专业提示：让你的风格指导一个符号
将整个样式指南部分转换为符号，以便在任何页面中添加或删除。这很方便，因为它允许您在您正在处理的页面上使用样式指南以供参考，并且可以在页面完成时轻松删除它。
您还可以添加文本元素和徽标的浅色和深色变体。如果页面背景的颜色不同，则很方便。
第5步：创建品牌调色板
我们曾提到在上一步中为样式指南添加颜色，但它需要更多关注。
在页面中添加div块，并从Photoshop设计中为其提供背景色。使用吸管选择PSD中的颜色并将十六进制代码粘贴到Webflow中，以确保您拥有正确的阴影。然后将颜色保存为全局样本并对其进行适当命名。
重复操作，直到锁定整个调色板。通过全局保存每个样本，您将能够快速轻松地在整个站点中应用正确的颜色 - 甚至可以在以后根据需要进行更新。
添加您的品牌颜色并使其全球化，以便以后易于重复使用和更新。
第6步：构建您的全局元素
网站导航，页脚，联系表单等元素通常不会在页面之间发生变化。在构建这些全局元素时，请务必将每个元素组成一个符号。
符号允许您将任何重复的元素转换为可重用的组件，并在您进行更新时使该符号的所有实例在您的站点上保持同步。
这样，您可以快速地将全局元素添加到需要它们的每个页面，从而大大加快了设计过程。
将重复的全局元素（如页脚，导航栏和联系表单）转换为符号，以便以后轻松重用。
在网络上释放你的创造力
构建完全定制的，可立即投入生产的网站 - 或超高保真原型 - 无需编写任何代码。仅限Webflow。
免费入门
第7步：为自己的成功做好准备
当你使用PSD工作时，很容易陷入基于像素的心态。但是为了简化响应式设计过程，您需要在相对而非固定单元中进行思考- 对于您的大部分站点而言，这意味着以百分比进行思考。
当您为较小的设备调整设计时，这样做可以为您节省大量的工作。
以下是我采取的一些步骤，以确保我的设计能够轻松响应：
将您的章节设置为100％宽度，相对位置并将它们清除：左。这可以确保子元素保留在父元素中，并且该元素不会在任何时候崩溃。我也习惯这样做，因为Internet Explorer需要相当明确的样式方向。
添加溢出：隐藏到任何超出页面宽度的元素，以防止水平滚动
如果向元素添加大宽度，请确保将其宽度设置为百分比
使用ems进行字体大小调整，至少对于行高，最好是大小
在样式化移动断点之前完成桌面设计，因为样式在Webflow中向下渐变
如果您使用预先设计好多个断点的PSD工作，请务必先比较各种设计，然后再开始查看是否需要考虑任何根本性的变化
第8步：负责任地进行Flex
Flexbox是一种功能强大的布局工具，可以显着加快您的工作流程，尤其是当您尝试垂直居中内容，均匀分布元素或更改不同断点处的元素位置时。
我通常使用基本的盒子模型样式，如相对，绝对和固定定位 - 但这只是因为我在人们还在使用IE8的世界中长大。
也就是说，flexbox有几个很好的用例：
反向布局：在“text-left，image-right”和“image-right，text-left”之间交替的布局曾经很难在移动设备上处理。但是使用flexbox，您只需单击“反向布局”复选框即可确保图像始终显示在文本的上方或下方。
虽然这种设计在桌面上看起来很漂亮，但它会在移动设备上不一致地交换文本和图像。
通过反转布局，我们可以确保页面在图像和文本之间一致地交替。
垂直定心元素
信不信由你，容器内的垂直定心元件过去很难。Flexbox使其一键式简单。
当前标题：
成都seo做网站推广价格
本文地址：
http://shouzuofang.com/view/176358.html