如何在Photoshop中创建自己的自定义网格系统

2024-04-26 16:23:58

网格是一种流行的网站构建方法。它更加一致，使各个部分成比例地正确。 CSS Grid框架的两个示例是960.gs或Skeleton 。但是，使用网格框架的限制之一是灵活性将降低。

我们受框架规范及其作者方法的束缚，在许多情况下，这些规范可能不适合我们的网站要求。

在本文中，我们将向您展示如何为CSS和Photoshop创建自定义网格 。为了简化该过程，我们将使用几种工具。让我们来看看。

安装指南

首先，我们需要安装GuideGuide ，这是一个Photoshop扩展程序来创建辅助线，专门用于轻松创建Grid。为了能够安装GuideGuide，您的Photoshop必须至少为CS4。

可以通过Adobe Extension Manager如下安装Photoshop扩展。

计算你的网格

在Photoshop中设置辅助线之前，我们需要计算网格，其中包括总宽度，列宽，列号和列装订线 。这些可以使用Heroku.com的网格计算器轻松完成。

在此示例中，我想为1000px指定总宽度，为装订线宽度指定30px ，并为列数指定10 。然后，该工具将自动生成实际的内容宽度以及适当的列宽 。

您也可以下载生成CSS网格。

创建网格

是时候回到Photoshop了。转到此菜单： 窗口>扩展以在Photoshop侧栏中显示GuideGuide面板。然后，创建一个新的Photoshop画布，设置按照Fulll宽度画布宽度-于我而言，这是1000像素 。

根据网格计算器中的字段，填写GuideGuide面板中的字段-“装订槽”，“列宽”和“列号”。

然后，在GuideGuide面板中，转到“ 设置”选项卡。在此标签中，您会找到一些预设的指导线。选择“ 轮廓”预设以在画布边缘创建辅助线。

我们已经完成了，这是我们准备用于设计网站的自定义网格。

此外，可以通过扩展画布宽度在画布的左侧和右侧添加更多的呼吸空间，然后在新图层中添加矩形以为网格的列创建可视帮助器。

下载PSD

翻译自: https://www.hongkiat.com/blog/photoshop-custom-grid/

如何在Photoshop中创建自己的自定义网格系统相关推荐

PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
PS网页设计教程IV——如何在Photoshop中创建一个专业博客网站布局
向Talk-Mania网站致敬.一年前,在该网站上看过许多不错的网页设计教程.一年后,再回头想看看有没有什么新的教程的时候,蓦然发现该网站已经打不开了.也许是关闭了,也许是改了网站名了.幸好,去年本人 ...
PS网页设计教程V——如何在Photoshop中创建一个商业网站布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
如何在Photoshop中创建光剑
With Rogue One coming out this weekend, the internet is in full on Star Wars fever (well, more than ...
PS网页设计教程VI——在Photoshop中创建一个食物博客布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
如何在sqlite3连接中创建并调用自定义函数
#!/user/bin/env python # @Time :2018/6/8 14:44 # @Author :PGIDYSQ #@File :CreateFunTest.py '''如何在sql ...
如何在android中创建自定义对话框？
本文翻译自:How to create a Custom Dialog box in android? I want to create a custom dialog box like below ...
hive 元数据自定义_如何在Hive中创建自定义函数UDF及如何直接通过Impala的同步元数据重用UDF的jar文件-阿里云开发者社区...
如何在Hive中创建自定义函数UDF及使用如何在Impala中使用Hive的自定义函数 UDF函数开发使用Intellij工具开发Hive的UDF函数,进行编译: 1.使用Intellij工具通过 ...
vj节点_创意编码—如何在JavaScript中创建VJ引擎
vj节点 by George Gally 通过乔治·加利创意编码-如何在JavaScript中创建VJ引擎 (Creative Coding - How to create a VJ engine ...

最新文章

热门文章