beORANGE - Design & Illustration by Richard Barnes http://www.beorangedesign.com The official online portfolio of Essex based designer and Illustrator Richard Barnes (aka beORANGE) Wed, 01 May 2013 09:51:51 +0000 en-US hourly 1 http://wordpress.org/?v=3.5 Piping hot http://www.beorangedesign.com/blog/piping-hot http://www.beorangedesign.com/blog/piping-hot#comments Sun, 16 Dec 2012 12:47:03 +0000 Richard http://www.beorangedesign.com/?p=1438 pipeElements
I’ve been working on some branding for a plumbing firm this week, this has coincided with me recovering from a small operation in the middle of the week so I’ve had more than a few hours to fill and I found myself getting really into this little project. I used the interchangeable pipe elements to create the letters G & D which are the initials used by the plumbing firm and I liked the style of the letters so much that I decided to try and form the alphabet by using only the 4 components I created.

Here is the result. I got most of the letters formed to a nice standard but I really struggled when things got diagonal! The K is a little bit of a dodgy one but it works. I haven’t yet decided how best to create the letters V, Y & Z.

pipeLetters

]]> http://www.beorangedesign.com/blog/piping-hot/feed 0 CSS Animated Website Header http://www.beorangedesign.com/blog/css-animated-website-header http://www.beorangedesign.com/blog/css-animated-website-header#comments Sat, 24 Nov 2012 14:22:41 +0000 Richard http://www.beorangedesign.com/?p=1403 I’ve been flexing my CSS muscles recently and I’ve decided to tackle an animated website header using nothing but CSS and its transition properties. I did this for fun and practice and I hope others can learn from what I have demonstrated below.

The main points of interest hear are the transition values included in the CSS to initiate smooth animations and also the ‘:target’ property which adds an extension to the url of the page and activates the desired element when the user clicks on it.

Launch Preview

HTLM & CSS Code can be seen below

<!DOCTYPE html>
<html>
<head>
<title>CSS Animated Website Header</title>

<style type="text/css">

body{
	margin:0;
		font-family:'Helvetica', Arial, sans-serif;
}

#sliderWrapper{
	width:100%;
	margin:auto;
	height:400px;
	overflow:hidden;
	background:#f0f0f0;
	border-bottom:1px solid #f0f0f0;
	-moz-box-shadow: 0 0 50px #666;
	-webkit-box-shadow: 0 0 50px #666;
	box-shadow: 0 0 50px #666;
}
.folioStrips{
	list-style:none;
	margin:0;
	padding:0;
	clear:left;
}
.folioStrips li{
	width:10%;
	height:400px;
	float:left;
	overflow:hidden;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: all 1000ms ease-in-out; 
	-moz-transition: all 1000ms ease-in-out; 
	-o-transition: all 1000ms ease-in-out; 
	-ms-transition: all 1000ms ease-in-out;
	cursor:pointer;
	background-color:#f0f0f0;
	background-position:center center;
}
.folioStrips li:target{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	width:80%;
}
.folioStrips li .inner{
	display:block;
	padding:100px 30px 20px 30px;
	height:280px;
	background-repeat:repeat;
}

.folioStrips li .inner .innerContent{
	width:420px; 
	height:200px; 
	margin:auto;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0.0;
	-khtml-opacity: 0.0;
	opacity: 0.0;
	-webkit-transition: all 400ms ease-in-out; 
	-moz-transition: all 400ms ease-in-out; 
	-o-transition: all 400ms ease-in-out; 
	-ms-transition: all 400ms ease-in-out;
	color:#ffffff;
	line-height:24px;
	font-size:18px;
	font-style:italic;
	text-shadow:1px 1px 1px #333;
}
.folioStrips li:target > .inner .innerContent{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}
.folioStrips li .inner .innerContent img{
	float:left; 
	width:180px; 
	height:180px;
	padding:5px;
	margin-right:20px; 
	background:#ffffff;
	-moz-box-shadow: 0 0 3px #333;
	-webkit-box-shadow: 0 0 3px #333;
	box-shadow: 0 0 3px #333;
}
.folioStrips li .inner .innerContent h2{
	margin:10px 0 10px 0;
	font-size:1.4em;
}
.folioStrips li .inner .innerContent .excerpt{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
}
#sliderControls{
	width:100%;
	text-align:center;
	margin-top:20px;
	clear:left;
}

.sliderBtn{
	width:20px;
	height:20px;
	display:inline-block;
	margin:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	-webkit-transition: all 300ms ease-in-out; 
	-moz-transition: all 300ms ease-in-out; 
	-o-transition: all 300ms ease-in-out; 
	-ms-transition: all 300ms ease-in-out;
}

.sliderBtn:hover, .sliderBtn:target{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}

</style>
</head>

<body>


<div id="sliderWrapper">
<ul class="folioStrips">
	
	<li onclick="window.open('#one','_self')" id="one" style="background-image:url(images/postBg01.jpg);">
	<div class="inner" style="background-image:url(images/innerBg03.png);">
	<div class="innerContent">
	<img src="images/postThumb01.jpg" /><div style="float:left; width:200px; height:200px;"><h2>Post Title</h2>Info about this post will be displayed here. It will be taken from the post excerpt to help make it more dynamic. Also a link to the full post.</div> 
	</div>
	</div>
	</li>
	<li onclick="window.open('#two','_self')" id="two" style="background-image:url(images/postBg02.jpg);">
	<div class="inner" style="background-image:url(images/innerBg02.png);">
	<div class="innerContent">
	<img src="images/postThumb02.jpg" /><div style="float:left; width:200px; height:200px;"><h2>Post Title</h2>Info about this post will be displayed here. It will be taken from the post excerpt to help make it more dynamic. Also a link to the full post.</div> 
	</div>
	</div>
	</li>
	<li onclick="window.open('#three','_self')" id="three" style="background-image:url(images/postBg03.jpg);">
	<div class="inner" style="background-image:url(images/innerBg01.png);">
	<div class="innerContent">
	<img src="images/postThumb03.jpg" /><div style="float:left; width:200px; height:200px;"><h2>Post Title</h2>Info about this post will be displayed here. It will be taken from the post excerpt to help make it more dynamic. Also a link to the full post.</div> 
	</div>
	</div>
	</li>
</ul>
</div>

<div id="sliderControls">  </div>


</body>

</html>
]]> http://www.beorangedesign.com/blog/css-animated-website-header/feed 0 December 2012 Ourzone Issue http://www.beorangedesign.com/portfolio/december-2012-ourzone-issue http://www.beorangedesign.com/portfolio/december-2012-ourzone-issue#comments Sat, 24 Nov 2012 13:42:41 +0000 Richard http://www.beorangedesign.com/?p=1390
Category
Design

Client
Ourzone Magazine

Photography
Frances Sales (Tonight Alive)
Jack Ford (All Time Low)

Tools
Photoshop
Illustrator

Description of work…

The December 2012 issue of Ourzone includes readers poll results, a yearbook special feature and a great interview with Black Veil Brides. I’m very pleased with the cover of this issue, in fact I would go as far to say that it’s my favourite of the year!. This images show the cover in full size and also the first double page of my favourite feature in the issue.

Check out the whole issue over at www.ourzonemag.com

Click on the images to enlarge them →

]]> http://www.beorangedesign.com/portfolio/december-2012-ourzone-issue/feed 0 Bobstar Webdesigns Website http://www.beorangedesign.com/portfolio/bobstar-webdesigns-website http://www.beorangedesign.com/portfolio/bobstar-webdesigns-website#comments Sat, 24 Nov 2012 13:16:11 +0000 Richard http://www.beorangedesign.com/?p=1374
Category
Web Design

Client
Bobstar Webdesigns

Tools
HTML
CSS
WordPress

Description of work…

Bobstar Webdesigns is a design agency that I have been part of since its inception in 2006. We’ve had several re-brands over the years but we were looking for something that was clean and modern and responsive.

I tackled the problem by stripping the site down to a custom WordPress theme which focuses on the work in our portfolio and puts it center stage. The posts spread out to fit a large monitor and they dynamically change to three rows of three for mobile phones.

Launch Website

Click on the images to enlarge them →

]]> http://www.beorangedesign.com/portfolio/bobstar-webdesigns-website/feed 0 Classic Ford Show 2012 http://www.beorangedesign.com/blog/classic-ford-show-2012 http://www.beorangedesign.com/blog/classic-ford-show-2012#comments Sun, 27 May 2012 22:50:36 +0000 Richard http://www.beorangedesign.com/?p=1354 I had a fantastic day today at The Classic Ford Show at Santa Pod Raceway. I took the Canon along with me to get some practice in. I’ve shared a bunch of shots here for you all to take a look at. It was a dream shooting today in the sunlight and I’m really pleased with the quality of images the Canon was able to produce with very minimal shooting adjustments (I used Aperture Priority Mode throughout the day). I hope you like the shots! Any advice is welcome, please comment below.

Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford
Ford

]]> http://www.beorangedesign.com/blog/classic-ford-show-2012/feed 0 Turning over a new leaf http://www.beorangedesign.com/blog/turning-over-a-new-leaf http://www.beorangedesign.com/blog/turning-over-a-new-leaf#comments Thu, 17 May 2012 16:20:38 +0000 Richard http://www.beorangedesign.com/?p=1290 In my line of work simulated paper and page turns are an everyday occurrence. I’m often faced with the task of converting flat magazine features into 3D style mockups to help promote Ourzone. If you’re an Ourzone subscriber you will see my new solution to this problem hitting your inbox very soon, as I have incorporated it into the design of our new html newsletter.

mag simulator

I have created a neat little PSD file which I can update rapidly thanks to the use of Smart Objects. I’ve decided to make this available to you all so you too can enjoy transforming flat features into simulated 3D magazines.

Download PSD | 5.4 MB

Instructions for use

01

1 – Open up the PSD and take a look at the Layers window. The only ones you will need to edit are the top two hidden layers called ‘COVER’ & ‘FEATURE’. These layers are ‘Smart Objects’ and there are duplicates of them inside the ‘MAG FILES’ folder which you won’t need to edit (unless you’re feeling adventurous)

2 – Simply double click on the layer thumbnail to open up the contents of each Smart Object and then drag in your replacement files and hit save!

3 – Make sure that what ever you put into the smart object covers the whole canvas area to avoid gaps in the magazine & keep the smart object layers hidden as they are duplicated inside the ‘MAG FILES’ folder.

Enjoy!

]]> http://www.beorangedesign.com/blog/turning-over-a-new-leaf/feed 0 SRMcHugh Website http://www.beorangedesign.com/portfolio/web/srmchugh-website http://www.beorangedesign.com/portfolio/web/srmchugh-website#comments Tue, 15 May 2012 08:50:48 +0000 Richard http://www.beorangedesign.com/?p=1296
Category
Web Design

Client
SRMcHugh Limited

Tools
HTML
CSS
WordPress

Description of work…

SRMcHugh needed to branch out with a website that was stylish and modern. The main aims for this build were to create something clean and stimulating & to keep things simple enough for the client to continue to maintain a feed for the companies ongoing construction projects.

I created a striking visual header which spans the width of the browser and randomly fades between several construction themed images. The images are all taken by the client who had a very keen interest in being involved with the project from beginning to end.

Launch Website

Click on the images to enlarge them →

]]> http://www.beorangedesign.com/portfolio/web/srmchugh-website/feed 0 April 2012 Ourzone Issue http://www.beorangedesign.com/portfolio/design/april-2012-ourzone-issue http://www.beorangedesign.com/portfolio/design/april-2012-ourzone-issue#comments Tue, 17 Apr 2012 10:17:25 +0000 Richard http://www.beorangedesign.com/?p=1277
Category
Design

Client
Ourzone Magazine

Photography
Ian Collins (Motion City Soundtrack)

Tools
Photoshop
Illustrator

Description of work…

The April 2012 issue of Ourzone is a Slam Dunk Festival special. The cover needed to bring forward elements of the official festival graphics and also maintain our own unique style. The buildings are an imitation of those found at the bottom of the Slam Dunk Festival poster. I was forced into using multiple photographs for this cover due to the nature and location of the three bands who are on it. I exploited this by creating a collage feel and converting Keith Buckley’s image to monochrome to allow for more depth.

Check out the whole issue over at www.ourzonemag.com

Click on the images to enlarge them →

]]> http://www.beorangedesign.com/portfolio/design/april-2012-ourzone-issue/feed 0 Hello Lovely – Postcard Design http://www.beorangedesign.com/blog/hello-lovely-postcard-design http://www.beorangedesign.com/blog/hello-lovely-postcard-design#comments Tue, 20 Mar 2012 16:07:23 +0000 Richard http://www.beorangedesign.com/?p=1217

Hello Lovely is a non-profit organisation which was set up this month and its aim is to:

“promote the little things that make a big difference. Members of the public are primarily asked to make a gift for a specific group of people and attach a handwritten postcard to it, in order that the recipient can see that others out there do care about them and have taken the time to make something just for them.”

I wanted to help out by offering my services of design to create a postcard which would be sent out to Ghana along with the handmade gifts. My postcard design is pictured right. Please click on the thumbnail to view it in all it’s animal print glory!


More about Hello Lovely

Official Facebook page → Click here
Official Twitter page → Click here

Behind the spots & stripes

I thought I’d share the making process of this postcard with you all to hopefully inspire people to do what I did and create more postcards for the cause. as you can see for the the screen grabs below it was an Illustrator and Photoshop affair for me.





]]> http://www.beorangedesign.com/blog/hello-lovely-postcard-design/feed 0 March 2012 Ourzone Issue http://www.beorangedesign.com/portfolio/design/march-2012-ourzone-issue http://www.beorangedesign.com/portfolio/design/march-2012-ourzone-issue#comments Sat, 10 Mar 2012 18:25:07 +0000 Richard http://www.beorangedesign.com/?p=1199
Category
Design

Client
Ourzone Magazine

Photography
Jack Ford

Tools
Photoshop
Illustrator

Description of work…

March 2012 issue of Ourzone featuring All Time Low. The feature focuses on the US four piece and their individual personalities. The ‘Blankety Blank’ style windows on the cover were great fun to implement. Elements of this grid style run through the whole feature.

Check out the whole issue over at www.ourzonemag.com

Click on the images to enlarge them →

]]> http://www.beorangedesign.com/portfolio/design/march-2012-ourzone-issue/feed 0