photoshop脚本_为Photoshop编写灵活的网格脚本

最新推荐文章于 2024-05-14 02:38:52 发布

daique1908

最新推荐文章于 2024-05-14 02:38:52 发布

阅读量1.1k

点赞数 1

文章标签： python java 编程语言人工智能 android

photoshop脚本

成为一名有能力的网页设计师意味着对网格有扎实的掌握，尤其是如果您要追求响应式网页设计。在本教程中，我们将研究用于生成自己的自定义网格的Photoshop脚本，此外，我们将打开引擎盖，并查看脚本的实际制作方式。

您很可能已经使用了一个或另一个网格系统中的psd文件。您可能已经打开了psd，并附带了所有指南，然后您已经更改了文档大小，以给自己一些喘息的空间。

就我们的脚本而言，无论文档大小如何，它都会生成Photoshop指南。这将使我们能够指定列数，装订线大小和布局宽度。好的，介绍足够了，让我们深入。

在本教程中，我们将使用JavaScript编写Photoshop scriptlet。以下是我们将介绍的功能，方法和其他详细信息。

使用变量作为活动文档参考。
使用提示从用户那里获取输入。
Number()函数可确保仅数字数据类型。
Guides.add()可将指南添加到我们的文档中。
“ for”循环的用户重复一个过程。
使用“ if”有条件地执行代码或跳过代码。
如何更改文件度量单位。

在进入开发过程之前，让我们首先快速介绍如何在Adobe Photoshop中实际安装和使用脚本。

步骤1：用法下载和安装

该脚本与Photoshop CS5及更高版本兼容。您可以从上面的链接“下载：源代码”下载脚本，也可以从我的网站下载脚本的更新版本。下载脚本（.jsx文件）之后，将文件复制到[Photoshop root] \ Presets \ Scripts 。

然后，您可以通过如下所示进入“文件”>“脚本”来访问Photoshop中的脚本。

步骤2：用法启动脚本

在启动此脚本之前，您需要至少打开一个活动文档（当前该脚本无法运行，并且会引发错误）。成功启动脚本后，它将显示其第一个提示。它将要求您输入用于网页设计的版式宽度。

我默认使用960px的宽度，因此，如果此时您不输入特定值，它将使用960px。您可以输入任意宽度，但理想情况下应为偶数。如果输入一个奇数值，例如955，则脚本中的计算将呈现小数。这意味着只有一个像素的分数，这在涉及定位向导的情况下是不可能的。即使我们要舍入该小数值，也不会为指南提供100％准确的位置。

步骤3：用法列数

在第一个提示处按“ Enter”（或在设置布局宽度后按OK）后，将出现下一个提示，要求您输入要在布局中使用的列数。默认情况下，我使用12列。

步骤4：使用率和装订线

最后，出现第三个提示，要求输入边距值（边界和外部列之间的空间）。然后将此值加倍以获得装订线空间，就像960网格系统中的情况一样。

步骤5：使用结果

在所有三个提示中都提供了值之后，您将看到文档中的指南以列的形式排列。如果您在此处看不到任何指南，则可能已关闭了指南的可见性。您可以通过转到视图>显示>指南（Ctrl +;）恢复它们的可见性。

在上图中，您可以看到列，边距和装订线空间。这些颜色只是为了说明什么。红色显示列；白色表示装订线，绿色表示装订线。实际上，您不会得到这些颜色。如下图所示简单地进行指导。

现在我们熟悉了如何使用此脚本，让我们看看如何使用JavaScript实际编写它！

步骤1：文档开发检查

在实际开始编写脚本之前，我们需要知道应用程序中是否已打开并激活了Photoshop文档。我们使用以下条件进行检查：

if ( app.documents.length != 0 ) 
 { 
 
 //Our entire code will go here 
 
 } else { 
 
 //No active document exists
 
 }

我们将以下所有代码放在这些大括号中，并以上述的}结束脚本。

步骤2：开发转换单元

我们的首要任务是将Photoshop文档的度量单位转换为像素-在设计Web时我们需要像素完美！

//This shall set  measuring units of document to Pixels.
  preferences.rulerUnits  = Units.PIXELS;

步骤3：开发文档宽度

接下来，我们将确定Photoshop文档的尺寸。

var doc = app.activeDocument; //save reference of active document to variable "doc" for easy typing later on
  var docWidth = doc.width; //gets the width of the document
and stores it in "docWidth"

该网格系统独立于文档的高度，因此我们不需要检索它。

步骤4：开发水平中心

现在我们需要找到文档的水平中心或文档宽度。我们如何做到这一点？简单; 将文档宽度除以二。

var docXcenter = docWidth / 2 ;

在这一点上，目前尚不清楚为什么我要评估这个中心，但是随着我们的前进，我将在脚本中描述它的用法。

步骤5：开发用户度量

此时，我们需要向用户询问他们要使用的布局宽度，列数和装订线间距。

例如，960gs使用以下固定组合：

布局宽度：960px
第一种组合：12列：10像素外边距：20像素内装订线
第二组合：16列：10像素外边距：20像素内装订线
第三种组合：24列：5像素外边距：10像素内装订线

如果我们将其中一种组合（默认为第一种）用作默认设置，将会获得更清晰的结果。

// Get layout width from user. Default  to 960px.
var layoutWidth = Number ( prompt ( 'Enter layout width:' , 960 ) ) ;
 // This gets number of columns from user. Most appropriately 12,16, or 24. Default 12 columns. 
  var cols = Number ( prompt ( 'Enter numbers of columns:' , 12 ) );
// Gets margins from left right from user. Which will  later be doubled to get gutter. Default 10px
  var margin = Number ( prompt ( 'Enter space between columns:' , 10 ) );

Prompt（）到底是什么？

好的，在继续之前，我们先来看一下“提示”到底是什么。

prompt ("Message to user here", "Default value here");

提示会向用户显示对话，并显示一条消息和一个如下所示的输入框：

用户输入所需的输入，此时提示将返回该输入。

提示的第一部分（出现在逗号之前）用于为用户提供一条消息。我们可以指导用户有关输入类型，有效值等的信息。

prompt("Enter number of columns. Appropriate values are 12, 16, 24.", 12);

提示的第二部分是提示对话框的默认值。对于此处的列，我们使用12作为默认值。

那数字（）呢？

数字是从给定输入中提取数字的方法。如果用户输入的不是数字（例如名称或其他字符串），则该方法将返回NaN （非数字）。这种卫生措施可确保您仅获得在某些只能使用数字的情况下必不可少的数字数据类型。

现在，让我们回顾一下我们之前准备的代码片段。

第一行获取布局宽度的值。网站的实际内容将在该宽度之内。由于我们使用的是960gs，因此默认值是960px，但是您可以将其更改为任意宽度。

在第二行中，我们获得用户希望在其布局设计中拥有的列数。 960克使用12、16或24根色谱柱，因为它们非常有效地工作，但绝不是强制性的。

在第三行中，我们获得了位于列之间以及布局边界上的空间。在列之间，此空间通常是装订线的两倍。

步骤6：开发计算装订线和中心

var gutter = space * 2; 
//Calculates the horizontal center of the layout and so the center of document 
  var layoutHalf = layoutWidth / 2 ;

此处，正在计算装订线空间并将其分配给变量gutter 。在第二行中，我们正在计算通过用户输入获得的布局宽度的一半。换句话说，就是我们布局的水平中心。

步骤7：开发定义限制

在本节代码的前两行中，我们正在计算布局左边界和右边界的位置。我们将这些称为外部限制；左边的限制是minLimitOuter ，右边的限制是maxLimitOuter 。

在以下两行中，我们正在计算布局的内部边界。这实际上是我们的布局宽度减去装订线宽度。将其视为直接位于布局宽度内的边距。

//outer limits that is the layout width;
  var maxLimitOuter = docXcenter + layoutHalf;
var minLimitOuter = docXcenter - layoutHalf;

  //Inner limits for 960gs
  var minLimitInner = minLimitOuter + space;
  var maxLimitInner = maxLimitOuter - space;

这是我们前面讨论的docXcenter的定义。 docXcenter是我们整个文档宽度的中心。我们需要对此进行评估，以便将内容放置在文档中心。我们不会在中心放置指南，但是我们需要它来放置其他元素。

那么， layoutHalf是layoutHalf ？这是用户定义的布局宽度的一半。我们将该宽度分成两半，以便我们可以将每一半放在docXcenter的任一侧。从这里我们可以确定布局左边缘和右边缘上辅助线的位置。

左向导的位置为（文档中心-布局宽度的一半），因此右边缘的向导为（文档中心+布局宽度的一半）。

步骤8：显影列宽度

在这里，我们计算每列的宽度。稍后在重复“添加指南”过程时将需要此值。

var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;

第9步：开发向外部限制添加指南

最后，我们进入了第一个实际的“添加指南”步骤！在这里，我们在布局边界添加了两个指南。我们的外部限制。

doc.guides.add ( Direction.VERTICAL , minLimitOuter );
doc.guides.add ( Direction.VERTICAL , maxLimitOuter );

第一行在minLimitOuter（布局的左边缘）和maxLimitOuter布局的右边缘位置向我们的文档添加了垂直向导。

让我解释一下上述代码行。

doc.guides.add(Direction.VERTICAL/HORIZONTAL, position)

该行实际上将指南添加到我们的Photoshop文档中。 “ doc”只是对我们当前有效文档的引用。 “指南”是类指南的对象，它位于文档内，并且负责Photoshop文档中的指南的行为和属性。 “添加”是类指南的一种方法，可将指南添加到我们的文档中。

doc.guides.add()是一种仅需要两个参数的方法。第一个是导向的方向，可以是垂直或水平方向。第二个参数只是引导的位置。如果将单位设置为像素，则将假定传递给第二个参数的值是像素，或者分别是其他值。

步骤10：开发第一个循环

第一个循环将处理我们的第一组指南和内部限制：

for ( i = 0 ; i < cols ; i++ ) {
  guidPos = minLimitInner + ( ( colWidth + gutter ) * i );
  if ( guidPos > maxLimitInner ) {
  break;
  }
  doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
  }

让我们看看它。我们重复（循环）代码“ cols”次，因为这是用户要使用的列数。在这段代码中，我们还将添加内部边界。

“ for”起始行之后的第一行是用于引导位置的变量“ guidPos”。 “ minLimitInner”确保我们的第一个指南的位置从minLimitInner开始；内部界限。然后，我们继续将colWidth和gutter乘以被迭代0到“ cols”次的“ i”。这样，我们将第一组指南添加到文档中。这些指南将在每一列的左侧。

然后在第二行中，检查guidPos值是否超过maxLimitInner; 文档的右内边界。如果是这样，它就会跳出循环。如果此条件不成立，则循环继续直到满足该条件。

第三行代码只是将指南添加到guidPos位置的文档中。

步骤11：开发第二循环

是时候处理我们的第二组指南了。

for ( j = 0 ; j < cols ; j++ )
	{
if ( j == 0 ) 
{ multiply = 0
  }
  else
  {
  multiply = 1;
  }

temp_gutter = ( gutter * multiply ) ;
guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );
 if ( guidPos > maxLimitInner ) 
{
  break;
  }  
doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

这段代码几乎没有什么细微的差别，为我们的列的右边缘和右内部边界添加了指南。

这是完整的代码：

if ( app.documents.length != 0 ) 
{ 
    preferences.rulerUnits = Units.PIXELS;
    var layoutWidth = Number ( prompt ( ' Enter layout width: ' , 960 ) );
    var cols = Number ( prompt ( ' Enter numbers of columns: ' , 12 ) );
    var space = Number ( prompt ( ' Enter space between columns: ' , 10 ) );
    
    var doc = app.activeDocument;
    var docWidth = doc.width;
    var docXcenter = docWidth / 2;
    
    
    var gutter = space * 2; //gutter space
    var layoutHalf = layoutWidth / 2;
    
    
    //outer limits that is the layout width;
    var maxLimitOuter = docXcenter + layoutHalf;
    var minLimitOuter = docXcenter - layoutHalf;
    
    
    //Inner limits for 960gs
    var minLimitInner = minLimitOuter + space;
    var maxLimitInner = maxLimitOuter - space;
    
    var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;
    
    
    doc.guides.add ( Direction.VERTICAL , minLimitOuter );
    doc.guides.add ( Direction.VERTICAL , maxLimitOuter );
    
    
    for ( i = 0 ; i < cols ; i++ )    
    {    
        guidPos = minLimitInner + ( ( colWidth + gutter ) * i );
        
        if ( guidPos > maxLimitInner )
        { 
            break;
        }
        
        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
    
    }
    
    
    
    for ( j = 0 ; j < cols ; j++ ) 
    {
        if ( j== 0 )
        {
            multiply = 0
        }
        
        else
        {
            multiply = 1;
        }
        
        temp_gutter = ( gutter * multiply );
        
        guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );
        
        if ( guidPos > maxLimitInner ) 
        {
            break;
        }
        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
    }
     
    }// end-if app.documents.length
        
    else
    {
       alert ( " No active document exists " );
      }

尽管此脚本可能存在缺陷和缺陷，但目的是在一个实际示例中向您介绍有关Photoshop JavaScript的一些知识。您可能根本没有掌握它，但我希望它至少能激发您的好奇心。如果您有任何疑问，请随时在评论中保留。

翻译自: https://webdesign.tutsplus.com/articles/writing-a-flexible-grid-script-for-photoshop--webdesign-7719

photoshop脚本

daique1908

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
photoshop脚本_为Photoshop编写灵活的网格脚本

成为一名有能力的网页设计师意味着对网格有扎实的掌握，尤其是如果您要追求响应式网页设计。在本教程中，我们将研究用于生成自己的自定义网格的Photoshop脚本，此外，我们将打开引擎盖，并查看脚本的实际制作方式。您很可能已经使用了一个或另一个网格系统中的psd文件。您可能已经打开了psd，并附带了所有指南，然后更改了文档大小，以给自己一点喘息的空间。就我们的脚本而言，无论文档大小...
复制链接

扫一扫