This post was originally published in 2011
介绍的技巧和技术可能过时。

自从我创造了BioThemeslogo,但是Biothemes网站终于发布了一个巨响,所以我想我会拿出我的标志设计来和你们分享我的设计过程。BioThemes的标志和我以前研究过的大多数标志大不相同,which made it a super interesting project.

View the BioThemes logo

约翰·奥诺兰和吉尔伯特·佩尔格罗姆是幕后黑手BioThemes.John got in touch back in early 2010 to ask if I'd be interested in designing the logo for their BioThemes project.Being a good friend of John in the design community I jumped at the chance.
In his brief,John was keen to play on the word Bio by linking it with nature and the environment.He gave examples of theCoda标志与工作塞维索作为他希望在标志中体现的风格的例子,所以看起来我肯定会放弃规则书,在创造一个简单或扁平的标志设计,并瞄准更详细和半现实的东西。
The design I developed for BioThemes features a range of detailed leaves that fill out the entire word.In the background a tree bark texture and intricate vines all add to the theme.

查看Biothemes标志设计

生物血红素标志的制作

不像我的大多数标志设计,the BioThemes logo was build in beplay足球Photoshop at super large dimensions.整个设计基于源于卡莱布金布罗.

然后利用photoshop中的翘曲函数对平叶形状进行变换。beplay足球

所有四个角一起移动,把手伸出来形成一个典型的叶子形状。

一个快速的色调/饱和度调整改变了绿色色调,并带来了叶片的鲜艳色彩。

基本的文字随后在photoshop中列出,beplay足球添加临时绿色渐变作为图层样式。

然后贴上叶子的复印件,scaled and rotated into position over the first letter.A Drop Shadow effect will help add depth to the leaves once the numbers begin to add up.

通过按住alt键并拖动项目以创建副本,可以轻松创建每个新叶。然后随机旋转并重新定位。

一旦放置了大量的大叶子,another copy was scaled down and squashed into a different shape.This new leaf is then duplicated to fill out the gaps.

The final series of leaves is a collection of smaller leaves bunched together to fill out any unsightly gaps.

A simple beplay足球Photoshop brush was then used along with my Wacom tablet to draw a series of vine shapes between the leaves and extending beyond the outline of the letter.

为了让这些白色笔触的外观葡萄藤,一个梯度覆盖首先应用。

下一步,一个缎面覆盖在整个藤蔓上提供微妙的色调变化,以对抗可预测的梯度流。

A Bevel and Emboss effect gave the vines a three dimensional appearance with bright green highlights and darker green shadows.

最后,一个微妙的阴影提升了藤蔓,它们出现在文字或树叶上。

A few splodges of black and white using a large soft brush then added variances in colour and tone to differentiate the leaves from each other.This layer is set to Soft Light at 70%.

第一个字母现在完成了。然后在下面的两个字母上重复相同的过程以完成单词。

一组新的图层将每个字母的数百个图层分开,以保持PSD的整洁。

藤蔓层沿着叶层的一半添加,因此藤蔓在叶的上方和下方交织。

为了给背景增加一些额外的细节,the letter outlines were used as a layer mask with a tree bark texture.这将替换原始的绿色渐变。

The final touches to the logo were a series of water droplets.这些液滴的底部是用圆形的photoshop画笔创建的,散射设置为max。beplay足球

一系列图层样式的效果很快就创建了水滴外观。首先,将图层设置为“倍增”以使白色透明,then a Bevel and Emboss effect added.

内部的辉光有助于用白色辉光勾勒出水滴的轮廓。关键是将不透明度右下调低以产生微妙的效果。

Finally a soft Drop Shadow gives the droplets a subtle three dimensional appearance.

A quick addition of a butterfly links in with the ‘bio' theme.蝴蝶的颜色是用来平衡词'主题的后半部分的标志。

但是等一下,this won't work in black and white!

每个创建徽标设计的人都知道徽标也应该以单格式工作的核心原则,或者换句话说,可以用黑白复制。从第一印象来看,这种完全基于光栅的照片处理徽标可能远不是万能的,但是我们可以做一些调整,以在多个应用程序中使用的文件格式重新创建徽标。
在photoshop中选择整个徽标,beplay足球然后转换为工作路径。然后将此路径粘贴到Illustrator中以创建标识的实体矢量版本。

A detailed and simple vector version of the logo was also supplied along with the high res raster logo so it can be used on any kind of design;大或小;web or print.

View the BioThemes logo

So here's the final BioThemes logo in all its colour and intricate detail.从头到头生物主题网站to see it in action.别忘了,如果你是一个访问所有区域成员,你可以在展示主题上享受30%的折扣!

2
分享
Share on Pinterest
38评论 submitted 加上你的!
Subscribe receive beplay全方位手机移动娱乐平台Spoon Graphics newsletters

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

38评论

  1. 浏览生物主题网站,你还没有考虑过这个标志会如何缩小。在这个网站上,你看不到细节的层次,所有的细节都会融化成一个绿色的大斑点。

    This isn't a criticism of the design itself,这是一个很好的概念,而且处决也很巧妙。但如果不考虑尺寸,especially when it's specifically for a website is a little unfortunate.I can see the logo working at a larger scale,但它的尺寸和目前的不一样。

    我认为这是一个理想的机会,把球放回客户的球场,并要求标志更大一点…设计师的噩梦,but thoroughly justified in this case.

    0)
    • Hi Abbas,John here – or "The Client"if you will.我们喜欢这个标志,这就是为什么我们在产品页面的底部和站点的about页面上展示它的所有细节和荣耀。我们觉得没有必要在每一页上都有这么大的标识——我们同意它暗示的是更大的版本本身;)

      0)
  2. 浏览生物主题网站,你还没有考虑过这个标志会如何缩小。在这个网站上,你看不到细节的层次,所有的细节都会融化成一个绿色的大斑点。

    This isn't a criticism of the design itself,这是一个很好的概念,而且处决也很巧妙。但如果不考虑尺寸,especially when it's specifically for a website is a little unfortunate.I can see the logo working at a larger scale,但它的尺寸和目前的不一样。

    0)
  3. 很棒的设计克里斯,I don't think BioThemes do it justice though by using it so small on the site,I'd at least have had a bigger version on the home page to show of some of the details you put it.

    0)
  4. Yes,很好的工作,但所有复杂的细节现在都在生物血红素网站上丢失了。“主题”一词主导着生物标识,it should be a lot smaller in relation to the word Bio.是时候重新设计网站,充分利用这个标志了。一如既往的精彩巡演。

    0)
  5. Great job there,虽然这是一个遗憾,它似乎很少在网站上出现。You can't see the details,尤其是蝴蝶。
    Thanks for sharing the process.
    B.T.W.what resolution did you use?

    0)
  6. 大自然是最令人鼓舞的事物;it is great how it could create anything even in the cyber world.

    很棒的教程!我们希望更多的人使用这个例子,创造他们自己的自然组合。

    0)
  7. 我就是喜欢那个标志!这些年来,我自己做了一些标识,但这些纯粹是插画。This has opened my eyes to what can be achieved in PS.Particularly I loved the first part where you warped it into the shape of a leaf – so simple yet effective!

    0)
  8. 对于每个抱怨网站上标识大小的人来说——你有点漏掉了要点;)网站不存在展示标识的功能,它的存在是为了销售产品。That is (quite rightly) the focus of the design.

    我们为这个标志感到骄傲,这就是为什么它*在整个站点的多个位置以全尺寸显示的原因:)

    Chris did an awesome job,我们再幸福不过了!

    0)
  9. @ JohnONolan

    The ‘logo' on your site (biotheme) definitely needs a fix.

    ‘Bio' is almost unreadable.
    ‘Themes' colored in blue on silver bg is hurting more than helping.

    ( in case you are too lazy to care,把它放大2倍。)

    0)

评论现已关闭