基于内容的推荐算法示例_基于像素的网站：资源，教程和示例

与现代趋势相比，使用像素样式的艺术品设计Web界面相对模糊。 您确实需要在Internet上浏览一些网站，以找到一些很好的例子。 很难，但并非没有。

在本文中，我收集了有关基于像素的网站设计所需的一切的大型汇编 。 有许多针对初学者和专家的健康教程。 我还提供了一些方便的工具和资源，您可以使用它们来进一步探讨该主题。 如果您对视频游戏图形或等距像素图稿完全感兴趣，那么您会喜欢这个集合的。

资源资源

这些是一些用于Web脚本和数字图形的独特开发资源。 当您深入研究创建像素网站布局时，您将不会总是感到需要遵循所有规则。 这种基于Web的资源的集合很可能会一次又一次地派上用场。

我已经习惯了使用开源代码。 这就是为什么找到像Spritely这样的jQuery插件总是令人兴奋的情况。 您可以将此脚本包含在您的网站中，以进行快速的动态精灵动画和滚动背景。

整个插件由JavaScript和HTML / CSS提供支持； 不需要Flash或任何其他后端语言。 文档页面很简单，但足以让您入门。 开发人员有许多示例演示，您也可以下载。

当前的稳定发行版本是0.6.1，并已适当更新。 动画效果与Opera，Chrome，Safari，Firefox和Internet Explorer 6+兼容。 此外，任何在Android或iOS上运行的智能手机浏览器都应完美呈现。

这是由开发了功能强大的开源脚本精灵马蒂亚斯·马丁内斯 。 FatPixels只需要jQuery库即可正常运行。 尽管我会说Spritely是一个更复杂的动画库，但是FatPixels在Web开发人员的市场上确实占有一席之地。

您可以轻松创建动画精灵，而无需创建.gif图像。 实际上，您将能够将所有图像导出为.jpg，并为一个长动画效果创建一个sprite队列。 FatPixels主页具有出色的演示以及用于构建它的jQuery代码块。 如果您正在寻找轻巧的东西来动画精灵，那么FatPixels是您的理想之选。

当使用“ sprite”一词时，有两个不同的含义。 视频游戏角色或动画精灵通常是较小的图像，仅具有很少的像素。 但是，在CSS中，“精灵”一词指的是单个图像，充当您网站的图标页面。

您应该使用单个Sprite表而不是单个图像的原因是为了减少服务器资源。 下载包含所有图标的较大图像而不是许多较小但分开的图像，会更快。 但是，将所有这些图标放到Photoshop中确实是一件很麻烦的事。 甚至没有必要困难，只是重复和费时。

幸运的是， SmartSprites CSS Generator是解决这种情况的理想资源。 您可以使用GIF或PNG格式的所有图像快速生成像素完美的图纸。 此外，您可以快速确定每个图标的background-position x / y坐标。

设计一套好的重复背景图像非常困难。 创建无缝图像可能需要几天的时间。 但值得庆幸的是，在线上有资源可以下载免费的背景图块。

Squidfingers模式库就是这样的资源之一。 它提供了150多种不同的像素样式的图案，您可以在项目中下载和使用这些图案。 样式非常动感，色彩丰富，因此种类繁多，是方便携带的绝佳资源。 下载链接为.zip格式，这使它们更小且更容易在计算机之间传输。

关于Spriters资源，我不能说太多精彩的事情。 在此网站上，您可以搜索所有各种游戏系统中的Sprite Sheet。 这些可以包括地图，建筑物，菜单屏幕，角色精灵，图标以及几乎所有东西！

他们自2001年以来一直在线，并且视频游戏的目录已大大增加。 TSR背后的整个社区都有平面设计师，他们可以撕裂这些不同的游戏精灵。 如果您对任何形式的视频游戏设计或在线粉丝感兴趣，则必须查看这个令人惊叹的画廊。

更有趣的是从TSR衍生出来的一些姐妹网站。 游戏迷还帮助撕裂了基础纹理并渲染了角色模型 。 总体而言，这是一个非常棒的社区，非常支持在数字艺术作品中使用精灵。

这是一个非常酷的Web应用程序，虽然没有提供必要的价值，但是绝对是一件很整洁的事情。 400像素可让您在线创建像素文档，并将图像存储在其网格中。 该网站的设计方式与百万美元首页类似，每张图片在整个图片中占据一个正方形。

您可以在他们的Web界面中玩耍，创建一些非常愚蠢的艺术品。 这不是您马上就能学到的东西，但是一旦掌握了它，玩起来会很有趣。 它是一个很好的工具，可以从任何具有Internet访问权限的计算机上使用。

与400 Pixels类似，您可以将Major Output用作像素作品的个人在线工作室。 它仍处于开发的早期阶段，但是所有核心用户功能已经可用。 您可以注册一个免费帐户并立即开始创建像素艺术。

每个图像都存储在本地服务器上，您可以在网站和论坛上进行热链接。 许多图像向公众开放，您可以通过单击不同的作者或标签来检出它们。 还有一个搜索框，但我觉得搜索结果的质量并不总是很好。

“主要输出”似乎是另一个有趣的社区工具，但可能无法为像素艺术家提供太多教育价值。

讲解

现在您已经拥有了资源，让我们看一下许多教育中心提供的教程以及遍布Internet的有用的博客文章。 我为初学者和中级设计师整理了一小组非常方便的像素艺术教程 。 这些教程中的许多教程都将重点放在Adobe Photoshop上，但是您可以跟随几乎所有高级图像编辑器一起学习。

显然，Google上有数以百计的Pixel-Sprite教程，但是Derek Yu网站上的此特定教程在教育如何创建像素Sprite时经历了许多不同的步骤。 简化和解释了许多过程，使初学者可以快速参与其中。

电子游戏迷会喜欢本教程，因为您会在幕后偷看如何创建这些特定的图形。 我喜欢找到一个网站布局，其中散布在整个设计中的视频游戏像素图稿。 它提供了一种独特的怀旧感，这是到处都找不到的。 任何人无论出于何种原因想要创建自己的像素精灵，都可以从Derek的10步教程系列开始。

这是针对像素图稿领域的初学者的另一个完美教程。 该博客文章由Brandon Treb撰写，他是一位出色的设计师和移动开发人员。 您可以在此有关基于像素的Photoshop艺术的详细指南中找到各种有用的信息。

您必须知道如何在Photoshop中设置首选项，以便在导出时像素图稿不会显得笨拙或质量下降。 您可能会惊讶地发现要真正获得良好的图像质量需要进行大量自定义。

这是另一个惊人的教程，其中充满了Photoshop中手绘像素艺术的技巧。 像素艺术技术的这种集合简直令人惊讶。 浏览内容的任何人最有可能找到以前未知的东西。

有关在草皮和树皮上创建纹理的详细说明； 还介绍了如何克隆绘制的像素图稿并将其转换为图标设计。 这一切都取决于每个领域的实践和精确度。 那些真正有热情的人会坚持下去，并在几个月内为他们的像素风格想法找到可靠的技术。

这是Smashing Magazine的一个教程，该教程介绍如何使用CSS / JS编写游戏作品集，该作品利用了Pokemon游戏系列中的许多sprite。 作者是Daniel Sternlicht ，他也碰巧在这种基于游戏的布局上运行他的个人作品集。

该网站充当RPG世界，您可以使用键盘控制角色精灵。 您可以输入不同的建筑物，然后显示诸如联系方式和投资组合条目之类的信息。

我非常喜欢本教程，这是将像素图稿与网站开发相结合的一种令人兴奋的方式。 即使您对JavaScript不太了解，这仍然是一篇非常有趣的文章。 我已经看过一些代码，必须对Dan这样的创意教程大加赞赏。 任何宠物小精灵的狂热者一定会爱上他的想法的。

这个小型网站gas13.ru提供了我见过的一些最古怪，最专业的像素教程。 在等距池教程中，向您介绍了如何创建闪亮的块和水纹理。 此外，您还会在侧边栏中找到所有其他等距像素tut的资源。

有很多东西要学习：您可以为视频游戏和网站背景设计店面，像素精灵，甚至是详细的纹理 。 我不确定作者是否仍在积极地发布内容，但是现有文章足以供初学者学习基础知识。

既然我列出了所有最好的像素教程，那么我肯定会一开始就将其包括在内。 有关像素图稿的整个教程对于新手来说是很棒的后续文章。 从一开始就将向您介绍GIMP或Paint.NET等开源软件。

您将学习如何导出图像以及像素设计的许多方面，例如抖动和抗锯齿。 有很多不同的技术可以遵循。 您应该通过研究复古的8位和16位视频游戏来掌握一些设计思想。

作者Kevin Chaloux赞扬了Derek Yu的像素精灵教程（之前列出），并提到这是他刚开始使用时的灵感来源。

Web设计师经常忘记，图标图标（收藏夹图标）是任何品牌计划的重要组成部分。 所有最受欢迎的网站都可以通过其16×16网站图标来识别。 当使用这样有限的画布时，您不得不处理像素密集的艺术品和插图。 这个来自OXP的favicon教程在结合这两个想法方面做得非常好。

通过此教程，您可以了解为什么在创建收藏夹图标时像素艺术如此有益。 还有用于导出.ico文件的工具和可靠技术。 还包括来自网络的流行图标的小型展示。

这是我认为可以使所有Web设计师受益的另一种资源。 它可以教育您如何创建收藏夹图标以及如何使用严格的像素限制。

陈列室画廊

我想以一个不错的像素风格的网站设计库作为结尾。 我已经介绍了40个具有各种艺术视野的各种布局示例。 像素化艺术品的趋势才刚刚开始在主流网站中重新出现。 我希望像素网站的这种独特展示可以为世界各地的Web开发人员提供灵感的来源。

翻译自: https://www.hongkiat.com/blog/pixel-based-websites/