逐步设计粉丝网站
这篇文章早已酝酿和准备好了。最初，它应该作为“创建粉丝网站”系列文章的延续(第一篇和第二篇)发布。那么，这篇文章为什么在Fable 3的博客中呢？答案很简单：在没有一个具体例子的情况下，关于设计的讨论就如同无本之木。设计不可能存在于真空中。因此，当不久前决定重启我们专注于Fable系列游戏的某个粉丝网站时，我决定，正好可以借此作为我“分享经验”的案例。
事实上，我并不打算揭示宇宙的伟大秘密，或仅靠一篇文章教你如何为你的粉丝网站创建独特的设计。设计的主题浩瀚而多元，单靠一位设计师是无法通过一项作品全面展示的……我还想说明一下，这不是一节Photoshop的教程。网上已经有很多了，请谷歌一下。作为作者，我假设你已经熟悉Photoshop的基本功能，因此请不要期望我提供逐步指导的“点击这里”，“转到哪里”的指引。这不是Photoshop教程，而是设计创作的研讨会。我会讲述我的工作方式，分享一些技巧和秘密，虽然这些秘密其实并不是秘密，只是常常被遗忘。开始吧：)
准备画架和画布
在我们的案例中，画架将是Photoshop CS4，而画布则是我们的原始、尚且空白的新文件。除了“照片蒙版”，还有其他程序，例如Gimp。有些人还会在Corel Draw中工作。不过，无论如何，目前人类尚未发明出比Photoshop更好的网页设计工具。这是网络设计师的主要工具。Corel Draw或Adobe Illustrator可以用于创建单独的设计元素，但在Photoshop中“组装”布局是最方便的。
关于画架的准备工作已经完成，接下来是画布。这里需要提到屏幕分辨率。五年前，1024x768的分辨率无处不在，而1280x960刚刚开始进入人们的视野。几年以前，1680x1050和1600x1200被视为高分辨率。而今天，拥有默认的Full HD分辨率的显示器变得越来越普遍。因此，我们应该以1920x1080作为最大分辨率的参考。然而，1024x768并不会急于完全退役，这意味着这是我们的下限。实际上，更重要的原则是宽度，因为我们的网页在高度上会很长，就像网络上90%的网站一样。
过去，制作“可伸缩”网站是流行的。也就是说，设计的单独元素由重复的元素组成，使得网站可以根据用户的分辨率而拉伸宽度。但是随着Full HD的到来，这种根据用户分辨率调整网站的方式变得不再美观。人眼的构造使得距离一臂长度的信息在大约A4纸的宽度内才能清晰地感知。超出这个范围的信息，眼睛就会失去焦点。因此，内容部分现在通常被做得比较窄，而左边和右边的空间则用某种背景装饰填充。这样一来，既满足了内容的需要，也保持了设计的美感 :)因此，我们的内容部分将定为1000像素（请记住，浏览器右侧有一个滚动条，会“占用”1024中的24像素）。因此，我们的“边距”区域的背景美观部分将为(1920-1000)/2=460像素，左右各460像素。为了避免不小心超出这一范围，我使用了参考线。在启用标尺的模式下，我只需移动鼠标并“拖动”参考线到需要的位置。还可以标出画布的中心。我还大致标记了我为网站顶部预留的高度，未来它会有所变化，但我已做了“标记”。一切准备工作完成。进入准备阶段吧：)
初步准备完成
收集灵感
这一阶段既简单又复杂。你需要收集将用来制作设计的素材。如果你是一位专业艺术家，你当然可以亲自绘制所有需要的艺术和界面元素，或将这项工作委托给你的团队……另一方面，在这种情况下，你，阿尔捷米塔季扬诺维奇安德烈维奇，为什么会出现在这篇文章中呢？ :) 这篇文章是为初学者准备的。我们将需要主题艺术和界面元素，或者至少是我们可以用来制作这些元素的素材。很可能你第一次收集不到所有的材料，所以对于艺术和灵感的寻找还需要你多次回来。通常我会从官方网站开始，然后转向大型粉丝网站，如果有的话。之后，我会切换到Google和Yandex的图片搜索。特别是同时使用这两个搜索引擎，因为它们的搜索结果差异很大。在一个搜索引擎的结果不理想时，另一个可能会找到大量资料。如果收集到很多艺术品，游戏的界面截图很大，开发者发布了很多壁纸……但通常你总有一些东西是缺少的。
通过我的搜索，我找到了不少Fable及其不同部分的艺术品。但对于第三部分，漂亮的艺术作品却寥寥无几。但你要收集所有的东西：壁纸、概念、截图……你永远不知道什么会派上用场。我不想让你为我找到的材料的完整选择而感到疲惫。在这里你会发现最终构成设计基础的那些元素。
这一框架的最终构建分解成了许多独立的界面元素
第三部分找到的第一幅正常艺术作品
这是第二幅艺术作品。除此之外，没有找到任何适合的风格.
而这一幅艺术作品则被直接用作背景。虽然不完美，但没有找到更好的。
第二部分的艺术作品在工作结束的时候派上了用场
那还怎么能少了LOGO呢？
开始工作
现在可以开始工作了。我先给你一个小技巧，我会定期以新名称保存工作结果，从而保持版本历史。默认情况下，第一个结果为版本0_1，之后依次为0_2，0_3等。当你认为做完了想做的一切，可以开始向评论员/朋友/客户展示时，版本将变为1_0。很可能设计会需要修改。这时会出现版本1_1、1_2等。这种方式很方便，方便跟踪自己的进度，也为以后有需要时可以回到较旧版本的想法或从中取出某个元素提供了可能性，即便在当前版本中你已经删除或更改到看起来不一样的元素。
还有一个建议，在Photoshop中，所有元素都存储在单独的图层中。别懒，及时给它们起个有意义的名字，并通过ctrl+b的功能将同一个元素的图层分组。当您的文件中累积超过100个图层时，要想在没有注释和分组的情况下理清头绪会变得极其困难。
但说了这么多，是时候看看第一个结果了。虽然这不是第一个，实际上是几乎零的结果：
在这个阶段，大致勾画出了内容区域，艺术品大致放置在它们可能存在的位置。各处可见已知的和未知的元素，这些元素未来会融入到设计中，或者不融入。继续往下。顺便说一下，这个阶段进行了一些重要的技术工作。我们很小心地从背景中剪出了我们的角色，并将框架分解成小部分。
在剪切时，我更喜欢使用层蒙版，而不是橡皮擦。用黑色涂抹需要隐藏的区域，白色保留可见部分。灰色的半色调则表示半透明区域。这样，如果我擦掉了一些多余的部分，就能轻松地恢复。已剪切的角色我以最高分辨率单独保存，以免丢失。
框架是通过切割小块并将其转化为纹理的方式被分解的。角落是反射的，左上角的同一个角落被反射了三次。这样我达到了对称的效果。
最初的设计计划是阴暗一些，风格上接近我们前两个主要艺术作品。通过使用柔和的画笔和不同的混合模式，我成功地将背景的明亮画面转变成了一幅相当阴暗的画布。我试图将内容部分展示为三层折叠的羊皮纸，周围包裹着你熟悉的金色框架。皇冠作为关键元素之一继续出现在设计中。我慢慢开始给菜单寻找字体。
漂亮的西里尔字体比较稀少。因为通常它们根本没有。也就是说，英语字母是有的，而俄语字母却没有。要么对于俄文版收取高额费用，要么俄文版是民间艺术家粗糙和糟糕的版本。或者一切都好，但字体不易辨认 :) 图片中的字体名为bonzai。需要的可以联系我，愿意分享。我们继续。
经过一些努力，开始逐步绘制出一些合理的东西。创建了主菜单的第一个版本（随后会修改，但这个草图会多次用到）。仔细的朋友会注意到，这个菜单的左侧和右侧是我们的皇冠与框架的装饰卷曲的结合。不要害怕组合不同的界面元素。它们的结合常常会带来意想不到但愉悦的效果。此外，主要内容部分的概念也发生了变化。我尝试去展示一些像皇家斗篷的东西，但结果我完全不满意。因此做出了果断的决定，改变了概念。
这还不是新的迭代，这实际上只是一种试验：那样在明亮的版本看上去如何，没有“斗篷”？-显然更好，但还需要继续考虑。顺便说一句，左上方的元素是fleur字体的“字母”。这是创建界面元素的绝佳选择。一瓶中有大量的卷曲和花朵。
这是一些新尝试。我在网站顶部尝试安置我们的角色，但重点并不在此。我放弃了水平菜单，改试做一个垂直的。感觉还不错。中央菜单已经移动到了底部。
又一个中间迭代，我比较了水平菜单和垂直菜单，思考是否将侧边块设置为点击可展开。
这是一个很好的案例，显示了保存的以前版本的重要性。设计走向了一条错误的道路。全宽内容的卷轴与中间的框架，以及缩小的侧边块框架看起来糟糕透了。我放弃了这个选项，回到之前的步骤，通过其他方式开展新路径。
那么，时刻到了！返回到之前的步骤，玩弄我们元素后，最终得到了一个接近最终的布局。所有主要元素都已聚集并在其应在的位置：主菜单、侧边块、内容、头部和底部。如果仔细看看，你可以注意到一些来自之前不成功的迭代的元素仍然派上了用场。文本布局随机取自一个关于《龙腾世纪》的站点，只是为了突出文本的位置。作为主要字体，我选择了Palatino Linotype。这是一种漂亮的标准字体，非常重要。在这种情况下，你的网站在任何Windows用户那里都会毫无问题地显示。当然，可以使用自定义字体，这些字体可以在用户的浏览器中缓存，但这会带来额外的流量，同时在不同浏览器中字体显示存在问题。不建议过于沉迷于此。网上有很棒的Windows标准字体表。我自己使用，并推荐你使用。至于顶部，可以而且应该使用装饰性字体。网站名称在这个阶段找到了一个优秀的字体，名为Algerius Caps。感受一下与之前的区别！
这是一个非常有趣的阶段，清晰地表明即使在接近完成的设计中，总有改进的空间。首先，我还是放弃了底部菜单，并最终将其变为底部菜单。记得我说水平菜单总会有用吗？-确实是。整体布局已清理掉不必要的元素，避免这些元素干扰设计。最重要的是，在设计中找到了皇冠的最终位置。到了拔剑出鞘的时刻！我们取出艺术作品，剪切掉其中的手与剑和皇冠。对悬挂在手套上的标志的上色工作如同精雕细琢。此时1000%以上的放大倍数绝对是有用的。我还开始对背景色进行校正。背景显示得太黄绿色。降低了它的饱和度。我通常使用一个附加层，使用需要的颜色填充，混合模式设置为软光，但根据需求可以尝试其他混合模式。在这种情况下，色调通过一种蓝色的图层进行了调整。
我继续优化设计。修正了背景上艺术作品的位置，重新调整了它的色调。几乎消除了在上次清理之后遗留下来的所有杂质，只有一个卷曲被漏掉。但是我还注意到网站的名称在天空背景中看上去比较苍白。于是我修正了风格，使其与背景形成对比，同时仍然使用网站的主要颜色。
决战时刻
嗨！这是版本1_0。实际上并不是最终版，但在这个阶段我决定向我的朋友展示这个布局，并听取他们的批评。这里已经完全没有杂物，背景再次进行了色彩校正。但更重要的是，添加了带有搜索和社交网络按钮的菜单。最初将只启用RSS，但很快Twitter、YouTube频道和Facebook页面也会开通。
第一个重要的评论是，我们的角色在网站头部显得非常孤单。他需要一个伙伴。不幸的是，在第三部分中没有美丽的女性艺术作品。但是，来自第二部分的女郎来帮忙了。这也是恰如其分，毕竟这个网站不仅仅是关于第三部分的。为了替代角色的女伴，我们的角色被剥夺了手枪，这显得多余。
但是事情没有就此结束，新的批评也来了。这个网站的金色调显得过于刺眼，而主内容块的金色边框却占据了太多空间。好吧，我通过图层效果降低了色调，缩小了边框。那些增加了设计负担和复杂化排版的链条也被移除。现在是决胜时刻。最后的版本：
www.Fable-game.ru
结语
实际上，我们仍然面临着排版工作，这也会带来一些小的修正。例如，背景和角色之间的相对位置。还有样式的修改，bug的查找和纠正。但这已属于技术上的事。最棘手的事情已经过去。当你走到这一阶段时，可以放松一下，给自己点赞，放心大胆地把这项新工作放入你的作品集，然后开始填充和丰富网站的内容，构思最佳结构……但这又是另一段故事 :)
我真诚地希望，我的“带图片和讲述图片的故事”能够让你喜欢，更重要的是，能够帮助你创造出你自己独特、美丽、惊人的设计。期待在评论中看到你们的问题、建议或意见。
*设计和文本的作者是我，Ksandr\_Warfire
此材料专为GAMER.ru准备