这篇文章最初发表于2009年。
介绍的技巧和技术可能过时。

随着Twitter迅速成为最热门的网站,每个人都想从人群中脱颖而出。已经有一系列高质量的设计展示在不同的网站上,这表明了“侧边栏”等趋势的出现。让我们来看看关于Twitter背景设计的一些最佳实践,并开始创建我们自己的。

我们都知道默认的蓝色Twitter背景,对吧?设计不错,这是干净和时髦的,但它并不突出,当大多数Twitter用户也有相同的外观。此外,如果你渴望获得更多的追随者,删除此背景可能有助于显示您是活动用户,或者如果你是代表你的公司或服务发微博,这有助于证明你不是垃圾邮件发送者。

一般来说,在创建你的Twitter背景时,有三种主要的方法(除了无聊的纯色!):

1。重复背景图案

重复的背景图案是老网站的背景效果,创建重复图形并将文件上载到您的帐户。主要的优点是,重复模式可以在任何监视器分辨率下工作。实例:

推特简介
推特简介
推特简介
推特简介
推特简介

2。背景图形褪色为彩色

在您的个人资料中使用一个图形有助于增加一些视觉兴趣,为了使其在高分辨率下工作,图像会褪色,使其混合成单一颜色,然后指定为背景色。实例:

推特简介
推特简介
推特简介
推特简介
推特简介

三。超大背景图形

第三种针对Twitter背景的一般方法是使用一个非常大的背景图像来填充整个屏幕。虽然这种方法在视觉创造力方面提供了最广泛的选择,它确实带来了图像文件大小的问题,以及图像不可避免地会切断某个监视器分辨率的事实。实例:

推特简介
推特简介
推特简介
推特简介
推特简介

侧边栏还是没有侧边栏?

Twitter背景设计背后的创造力所产生的一个趋势是使用侧边栏。侧边栏是屏幕不动产的一个区域,用于显示有关用户的附加信息,比如大轮廓图像,网站和其他社交网络的简介和列表。由于1024×768分辨率显示器空间不足,使用侧边栏方法的配置文件通常只能向上容纳1280×1024个,更不用说被Twitter网站的主要内容所隐藏了。

我把一个方便模板所以你可以想象你的主题将如何看待1024×768的流行资源,1280×1024,1680×1050和2000×1920。打开PSD并将您的设计放在模板文件夹下。

我们自己设计吧

Twitter个人资料设计

鉴于目前的信息,让我们为自己设计一个酷而有创意的Twitter背景。为了容纳大多数用户,为了减少装载时间,我们将从上面继续选择第二个选项,并使用图形和背景色。

打开twiter-bg-template.psd模板进入PS图beplay足球象处理软件。我们将主要解决1280×1024及以上的住宿问题。任何小一点的设计都只是看不到。

为背景选择纯色,我选择了一种温暖的灰色。使用选项/alt+backspace填充背景层。

下载线条纸资源从sxc打开到photoshop,beplay足球用钢笔工具剪出一段纸。

将纸张资源粘贴到主文档中,根据蓝色模板层缩放和定位。

通过添加投影,给纸上添加一些真实感,使用非常微妙的选项来重现光线如何自然地落在纸上。

右键单击图层调色板中的放置阴影效果,然后选择创建图层,然后按Cmd+T和Warp来扭曲阴影。

拖动扭曲过滤器的角点以拉伸阴影,这有助于形成稍微凸起的角。

粘贴在此咖啡杯污渍在文件中按比例排列。将混合模式设置为“倍增”,以使白色区域透明。

打开这个咖啡杯的图像在新文档中,在杯子周围创建一个遮罩,并切掉主对象。

贴在杯子里,放在左上角。添加软放置阴影。

高高的杯子在现实生活中会投下更大的阴影,因此,从放置阴影创建一个层,并使用扭曲设置来拉伸阴影,增加更多的现实主义。降低不透明度以避免阴影在设计中占据焦点。

放置在另一个元素中衬纸,把它缩小到合适的尺寸,旋转并定位到位。再加上一个非常柔软的投影,使之真实。

使用“扭曲”设置转换页面,使下角向上弯曲。

扫描并粘贴一些涂鸦到页面上,旋转并缩放到合适的位置,使它们从上一叠纸下面出现。

在混合选项中,添加一个深蓝色的套印,给人一个圆珠笔绘图的印象。

下载旧空白宝丽来,将图像放入设计中,并添加一个微妙的阴影。

打开你自己的照片,把它放在宝丽来区。用面膜把多余的部分切除。

在照片上画一些黄色和洋红的斑点,然后将混合模式更改为颜色。命令单击照片的遮罩并裁剪颜色。这会给图像增加一个轻微的效果,使其具有复古的外观。

用画笔工具在宝丽来的下方写下个人信息,或预先制作的手写字体。

检查设计是否有任何最后的调整,注意对象与模板的关系。

裁剪图像以适应图形元素,其余的只是一个平面颜色,可以在Twitter设置中复制。

为网络保存图像,调整jpeg压缩以在整体文件大小和图像质量之间平衡。

登录您的Twitter个人资料,然后进入设计选项卡。浏览背景图像并将其上载到服务器。

下一步,更改主题颜色以匹配整体设计。图像中的示例区域,以确保调色板匹配。最重要的选择是背景,确保它与图像的十六进制代码完全相同,以实现平滑过渡。

Twitter个人资料设计

现在设计完成后,您可以直接查看您的个人资料,查看真正的主题。如果你喜欢这篇文章,来和在Twitter上向我问好.

在Pinterest上共享
没有图像。
133评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

133评论

  1. 好文章,克里斯-真的很完整。我的Twitter帐户(twitter.com/marcofolio)正在使用选项2(背景图形褪色为彩色)。

    巧合的是,您使用了宝丽来图像van stock xchng——我在下一个jquery教程中也使用了它,今天稍后我将把它放到网上;)。“英雄所见略同”

    继续努力!

  2. 很好的教程……我的twitpage背景需要帮助,也许我能做点什么。你给我希望。

  3. 干得好。我喜欢一步一步的,而且选择可能是最好的。尽管我发现,在Safari和FF2或3中,纯色背景看起来可能不同。这是一个问题还是Twitter帮你解决了这个问题?干得好。

  4. 嘿,克里斯!我一直在考虑为Twitter做我自己的背景,这最终使这个想法开始发生,谢谢伙伴:

  5. 嗯,并不是100%确定设计界需要这样一个关于如此基本的东西的欺骗教程。不过,我很喜欢它的结构,当然也会对非技术人员有所帮助。干杯

  6. 伟大的岗位,我目前正在为“蒸馏”网站的Twitter用户设计Twitter背景,您的便捷提示肯定会很有用。我特别喜欢高迪麦克拷贝的垂直定位,这允许查看整个单词,即使在特定的个人屏幕上看不到太多的背景。

  7. 我是通过点击Mashable在Twitter上发布的链接进入你的博客的。我很高兴知道你的事。这是一个推特如何有效地将人们推广到那些可能从未遇到过他们的受众。继续做好工作。

  8. 好吧,叫我knowledgestouid,但我不知道如何从这里(photoshop)上传和替换我的Twitter背景。beplay足球你能为我们增加那些不在知情范围内的指示吗?谢谢!

  9. 嘿,克里斯,看起来很不错——有一件事要考虑的是,我在24英寸宽屏上设计Twitter背景,然后在15英寸的笔记本电脑上设计,但效果不太好——所有的事情都卡在了Twitter主面板后面……

    不过很好,干杯!
    twitter.com/markinlich网站

  10. 很好的教程,克里斯!
    我最近也完成了自己的twitter背景的重新设计,尽管发现成功上传是最困难的部分!也许有一天我可以把它列成精选的名单,如上图所示;)

    亚历克斯禅元素

  11. 我迫不及待想成为一个背景,我受到鼓舞。谢谢你的模板!这正是我想要的。

  12. 谢谢你的信息!重新设计我的背景非常有帮助。你对文件大小有什么具体的想法吗?我输出的文件是@185K..今天的下载速度可以接受什么?

  13. 我甚至不知道你能改变背景……我对Twitter还很陌生……但你启发了我……使用你的模板,我把我的主页变成了一个冰箱,里面到处都是促销材料……哈哈。我需要工作

    达维德梅尔比奇

  14. 我喜欢这个!我一直在考虑重新设计我的Twitter背景,但现在我肯定会的。谢谢!=)

  15. 最让人恼火的是,很难预测你的背景如何出现在各种各样的决议中。它甚至会根据浏览器的应用程序和设置而变化。许多最好的背景最终都被Twitter的面板掩盖了。

    所以,如果你想合理地确定你的设计不会被踩得到处都是的话,你似乎真的只有屏幕最左边的一英寸左右。

    twitter.com/robodaniel网站

  16. 令人惊奇的非常感谢你分享这个。我要试一试!(现在问题仍然存在……它是金发的证据吗。)

  17. 你好!

    感谢您的指导,
    我可以把它用于我的个人网站吗?

    请原谅我英语不好,但我是法国人;)

    拜伊

评论现已关闭