This post was originally published in 2011
The tips and techniques explained may be outdated.

Want to get your teeth stuck into a website design project to sharpen your skills?按照这个循序渐进的教程,为一家虚构的眼镜公司创建一个圆滑的网站设计。在本教程的第一部分中,我们将使用深色方案构建photoshop设计概念,并将内容布局到坚beplay足球实的底层网格中。

Optik website design

这是我们将要创建的完整网站。这是一个圆滑的设计与微妙的梯度和引人注目的图像,基于一个整体的黑色/灰色配色方案。The whole website is laid out according to a solid grid which helps balance the page elements.

查看大型网站设计理念

奥蒂克标志

The fictional client I've made up for this tutorial project is a small eyewear brand named OPTIK.他们想要一个网站来展示他们的产品。它需要反映他们运动眼镜的时尚风格,并指导用户使用他们的四个产品系列。A selection of photography has been supplied,which needs to prominently showcase the products,otherwise you,设计师可以自由支配整个布局和设计。如果你想填写你的设计作品集,或者你想找一个项目作为实践/实验,请随意使用这个虚构的客户机作为您自己设计的基础。

optik网站草图

作为本教程的一部分,我们将要创建的设计从纸上开始,作为草图和简单注释。总有必要列出页面上所需的元素,这样您就可以腾出空间,并根据重要性对所有内容进行排序。一个简单的草图充实了整个布局,当我们打开Photoshop时给了我们一个清晰的方向。beplay足球

在Photoshop中创建新文档。beplay足球I have a preset template I use that already contains columns,排水沟和24px基线网格。使用方便的发电机网址:http://grid.mindplay.dk创造你自己的,or if you're an访问所有区域成员,simply download the source file and save it for your upcoming designs.

用黑色填充背景,然后使用我的第25行免费像素图案填充新层。Inverse the selection,将模式更改为“屏幕”,并将不透明度降低到10%。

Draw a selection in the centre of the document measuring the full width of the grid and fill it with black on a new layer.

打开图层样式窗口并更改放置阴影设置,从内容面板后面生成柔和的灰色辉光。

Paste in the OPTIK logo and align it to the grid,跨越三列并将文本基线与基线网格对齐。Here I'm using the original vector version,但我相信上面的jpeg上的一个小魔术棒动作可以让你使用相同的徽标。

Give the logo some cool treatment in the form of a subtle grey gradient and very light Bevel and Emboss effects to give a basic metallic style.

使用文本工具沿同一基线键入导航菜单,其中每个项目都与列对齐。Set the font styling to uppercase 14pt Helvetica with a light blue fill.

在内容面板的宽度上绘制一个细细的选择,并用一个细微的渐变填充它。复制并翻转此渐变,然后重新定位以勾勒主页设计顶部的功能区。

粘贴在第一个所谓的产品快照中,which is actually a stock photo of a cool fellow in some sunglasses courtesy of思茅斯.将图像缩放到适合特征区域的大小。

绘制一个选择并创建一个图层遮罩以隐藏图像中不需要的部分,离开信箱样式功能面板。

使用网格对齐与特征图像相关的某些内容。此处,Hydro Tek徽标是从Illustrator使用相同的Eurostilefont,而正文文本在photoshop中添加为9d9d9d 16pt hbeplay足球elvetica。

Use the Rounded Rectangle tool to draw the basic shape of a button,然后用一个梯度和精细的1px的笔触让它充满活力。图像中的颜色被挑选出来,以将所有东西联系在一起,同时保持基本色调为蓝色,以便在所有可点击元素和链接之间提供可识别和一致的颜色。

Draw four boxes underneath the feature area aligning their size according to the grid.Fill all four boxes with black.

Open up the layer style window and give the boxes a subtle grey gradient and 1px stroke to define their outline.These four boxes will relate to the four main links of Sun,Sport,技术和特殊。

导入与Sun产品系列相关的图像,并使用层掩码将其裁剪为适合小内容框的大小。This particular image is another from思茅斯.

Duplicate the image layer then go to Image > Adjustments > Hue/Saturation.Decrease the saturation by around 60%.我们将保存这两个层以在最终编码的网站上创建一个酷的悬停效果。

键入与产品范围相关的简短描述性段落,然后是一个通常为蓝色锚色的行动呼吁链接。

在这些小内容框中添加与体育相关的图片和内容,技术和特殊章节。更多照片来自思考Stockwere used alongside a creative commons photo from Flickr byMonsalvador.

在主内容面板下面,使用文本工具布局一些典型的页脚内容,如版权声明,二级链接和背对背锚定。

后退一步,在网格打开和关闭的情况下查看设计。将所有项目与列和基线网格对齐有助于实现完美的水平和垂直流动,每个页面元素都整齐地对齐。

The final PSD concept is now ready for coding up as a fully working website.If you're excited to move onto the next step,check out第二部分over on my web design blogLine25.在本教程的编码部分,我们将用HTML和CSS构建主页概念。

Optik website design

Learn how to create the website in HTML/CSS

Access This Download

Shares
在Pinterest分享
没有图像。
21 Comments submitted Add yours!
Subscribe receive beplay全方位手机移动娱乐平台Spoon Graphics newsletters

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

21 Comments

  1. There's a lot of steps missing!比如,这个标志是怎么发出这么大的光芒的?And when/how did you lighten up the whole header section?It's a great tutorial,但初学者可能很难跟上!

  2. 嘿,克里斯,我真的很喜欢你的设计,从像你这样积极的人那里学习真是太好了。There is one thing that I still can't understand from great experts like you and that is the combination of colors.How do you guys know what colors combine and what colors don't combine?For example,这个网站所有的颜色结合起来,创造了一个巨大的对比。How do you do that?

  3. 这是我读过的关于创建网站的最好的教程之一。事实上,我以前从未读过关于在Photoshop中创建网站的教程。beplay足球克里斯,your blog is still my number one source..但如果你能更频繁地写作,那就太好了。

    谢谢,
    哈里斯。

  4. Thanks for this and all the other great tutorials.我已经订阅很久了。

    有一些东西一直困扰着我的网格设计,所以我做我的有点不同。我不是说我所做的是正确的,我会分享。

    我看到的问题是,当你把所有的文本放在排水沟上时,如果然后添加一个包含文本的框,则必须将框文本移出网格。在你的例子中,the "S"of sport no longer lines up with the text inside of the "view tech info"盒子。

    我所做的几乎是在所有水槽中添加填充物(实际上不是正确的词)。所以在你的情况下,我会移动“运动”to the right by the same width of the gutter so that all the text lines up horizontally.Boxes stay on the grid and text/content stays on the padding.我这样做已经有一段时间了,在我看来效果更好。

    Although this could be all down to a personal choice!– would be good to get your thoughts!!

评论现已关闭