2012-08-12 69 views
6

我在Photoshop CS5中创建了一些网站,但我通常倾向于在记事本++中使它们变为原始。我通常让他们住在网站上,编辑代码并刷新页面以查看更改。我想转向更专业的方法,并在Photoshop中制作整个模板/设计。让我从潜水回来的东西,是非常非常开始大声笑..PSD网站模板的最佳尺寸?

什么是一个很好的决议用于模板?我遇到过不同的教程,他们有不同的尺寸。例如,我的笔记本电脑分辨率是1366x768。我的办公室里有一台22英寸的液晶显示器,我知道这是一个非常大的分辨率。我会假设大多数显示器的最小分辨率为1024x768 ...

在Photoshop中创建新模板以创建网站模板时,我应该制作图像的大小以及为什么?

另外,由于我们在这个话题上,你们有任何链接到图像集合的良好资源,并且你发现可以帮助你创建你的模板最?我是一名程序员,众所周知,大多数编码人员都会吮吸图像..我只是想加强我的另一半大脑:)

在此先感谢!

+0

960px在2年前很流行,你应该考虑设计多种屏幕尺寸 – SRN 2012-08-12 04:11:39

回答

15

我会建议采取以下行动历程:

  1. 看看为most widely used screen resolutions当前统计信息。正如你所看到的,1366x768是目前最流行的分辨率,其次是好的旧的1024x768,它仍然拥有庞大的用户群。并留意移动解决方案。
  2. 因浏览器铬和其他操作系统绒毛所需的屏幕空间不足。
  3. 因为针对多种屏幕尺寸的设计每天都变得越来越重要,所以我强烈建议您选择一些目标分辨率而不是仅仅选择一种。这可以很好地由CSS处理。即使您只针对桌面设备,考虑不同的屏幕尺寸也是有意义的。
  4. 既然你还在用Photoshop来弄湿你的脚,你可以从许多基于网格的PSD模板之一开始。我知道960px one1140px one,但你可以找到更多。无论如何,如果您决定支持多种屏幕尺寸,您可能必须使用多个网格。

然后,当您想要考虑所有这些更困难时,请直接阅读Peter-Paul Koch的文章:A tale of two viewports

+1

我选择了这个答案。您的文章写得很好,提供了来源,显然您提供了最详细的答案。我感谢大家的回答,并希望我可以全部选中!感谢所有其他人,花时间回答我的问题。不幸的是,我只能选择一个作为“答案”。 – IncomePitbull 2012-08-26 00:26:51

1

看看砸杂志和注册他们的通讯以及webdesignerdepot和检查Codrops.net。他们有很棒的免费赠品,教程和标准更新。我喜欢检查我的邮件以查看它们。

至于PSD - 他们没有设置大小。我已经看到专业wordpress开发人员样机在1100px宽(根据您的布局高度是SO变体)。我不会推荐宽度超过1366像素。

我可能会做1366或1440,因为这是大多数人会看到的决议。当你在1920发送样机广泛的人认为该网站是太小,当内容仍是940-980,它们都

编辑:

我自己做的PSD的在无论是在1100px或1440px宽和主要内容是总是940-980px宽。

我在没有太多需要以图形方式查看身体背景的情况下使用1100,而当背景对网站的“感觉”更为重要时,使用了1440。

1

你想设计你的网站最常用的屏幕分辨率,似乎是1280像素×720像素。因此,这就是你想要的宽度,你可以创建任何类型的背景,并确保将其淡入一种颜色或透明地使用CSS来改变背景颜色。

请确保您的指南能够帮助您保持内联,最佳方式,创建一个宽度为960-100px和高度为720px的新文档,然后将指南拖到所有四面。

然后,您可以将文档大小更改为1280像素800-960像素。

你在720px有一个指南的原因是因为所有高于该行的东西都能保证在所有分辨率下都能看到,所以它被称为“在上面”。优秀的设计师考虑到这一点,以确保观众将被吸引到探索网站,一个特色的内容滑块是一个简单的方法。

-1

incomepitbull,我知道你在哪里...
未来我也谁是努力学习Photoshop的后端开发者..
许多前端设计者是无知的发生的事情的发展阶段..
大多数Photoshop取决于客户的规格...
高度并不重要;使用960 px(12col,16col,24col),980 px(12col,24,col),1000 px(对于不使用网格系统的用户,100%响应友好)或1140(针对较大显示器的网页, )
毕竟,作为开发者,我们解决了所有这些问题;但好的模型很重要...