This tutorial explains how to crop an image to a certain size without the image distorting. This has many different uses – one of which is inserting an image into a specific space on your website. You can have scripts which will automatically crop an image to a certain size. However this does have its problems – the script will generally crop the image so that the centre of the image remains – but this can chop off essential parts of the image around the edge. This tutorial will show you how to manually crop the image so you have control over how the end image looks.

Example: we need an image to fit into a space which is 320 x 235 pixels.

Step 1 / Open her up

Open your image in Photoshop. Here you can find out how large the current image is by selecting ‘Image’ from the menu. In my example, the image is 850 pixels wide and 565 pixels high.

Step 2 / Create new document

Create a new document in Photoshop and set the size of this to the exact size you wish the cropped image to be. In this case 320 pixels wide x 235 pixels high. (For images on the web, sizes are always in pixels and the colour mode should always be RGB – as opposed to CMYK.)

Step 3 / Drag her in

Click back onto your image and select the Move Tool (hot key V). Click and drag your image onto your new Photoshop document. As the image will be much larger than your new document, only a portion of it will be visible.

Step 4 / Transformer

Select Free Transform from Edit on the menu (hot key cmd T). This shows the outline of the image.

Step 5 / Re-ee-size

You can now adjust the size of the image. Simply hold down the Shift key (at all times), click on a corner of the black outline and drag to the size you require. Keep the Shift key down whilst resizing as this prevents the image from distorting. When the image is closer to the document size you can release the Shift key and move the image around within the document to ensure the right parts of the image are showing. Move the image around by clicking and dragging with your mouse, or by using the arrow keys on your keyboard. Resize and move around until you are happy with the cropped image.

Please note: Once you’ve resized an image to be smaller, you can’t make it larger again as this will cause the image to be blurred/bitty.

Step 6 / Save for web

If your image is to be placed onto the web, save it as follows.

You now have a brilliantly cropped image!

Please note: this image has been purchased from istockphoto. If you wish to use it please purchase it from their website.

Related posts:

1. 7 Things You Didn’t Know About Adobe Photoshop
2. Colour shifting in Adobe Photoshop / Illustrator
3. 3D prototype mock up in Adobe Illustrator

We worked with the Actons team to achieve this by firstly creating a new brand identity which used a mixture of a slick, professional font and a more loose hand written one. The two balanced each other out, giving the persona the brief required. We also chose two main brand colours – again one was quite bright (orange) and friendly whilst the other more reserved (dark mauve).

This brand identity led to the design of the web site which built upon the same principles – mixing a professional slick feel with friendly bubbly design elements. We ensured that key messages were clear and that there were plenty of calls to action which were strategically laid out to maximize the site’s effectiveness.

We also produced a very functional content management system for the site which empowers the Actons team to create flexible landing pages for the website. We used the open source platform Drupal which allows alot of flexibility in building the website’s functionality.

The website also contains an interactive Flash feature we nicknamed “Mr Actons” which can be seen on the injury claim information page. Users can select areas of a figure which displays useful information about what could be claimed for if that area was injured.

The site also integrates with social media platforms – automatically notifying them of any new blog posts which are entered by the Actons team into the website and thereby saving time. We ensured the branding is reflected across those social media sites.

This is what Actons had to say:

“We have been very impressed with Attitude Design from the outset.  They, have always been extremely pro-active and exceeded our expectations with the, design process,  their flexibility and their willingness to help at every, stage.  The finished website was delivered on time and had more impressive, features than we could have ever imagined.  We have received some fantastic, feedback since the site was launched and would not hesitate to recommend or, use them again. Thank you.” Victoria Morrell / Project Manager

So, another happy client and another site to add to the portfolio! Feel free to browse any of the other website projects we’ve completed in our website portfolio »

Related posts:

1. Attitude Design in top 50 website designs of 2006
2. Income Max – new brand identity and website
3. Future First

Disclaimer: We are not attempting to take any credit for the above work – we have had nothing to do with any of the designs shown. If you have any questions regarding this please contact us.

Related posts:

1. Time Machine / Fashion Adverts from the 80s
2. Time Machine / Car Ads of the 1920s
3. Time Machine / Perfume Ads from the 90s

From the website, you can instantly see a snap shot of high performing hosting companies. Each listed company has a review section which is easily accessed by clicking one button. There are lots of reviews for each hosting company which you can read through before making a decision.

There are also star ratings for key areas such as ‘Reliability & Uptime’, ‘Tech Response Time’ and so on. This is great for those in a hurry and who just want to see performance levels at a glance without having to read through reviews.

The site also offers a simple comparison chart which compares its top ten hosting companies – so you can see at a glance what features each company offers and how they compare for price.

As companies constantly change in terms of the service they offer and packages/prices available, this site is a great way of getting up to date information on the best hosting company for you.

So over all we think that this is a great resource which will be a “must visit site” for anyone looking to purchase web hosting…

Please note: this is a paid review…

Related posts:

1. Vodafone New Brand Review
2. Brand Review: The McDonalds Refresh & Fast Food Chains

The brief was simple. Create an easy to use iPhone App which gives information about the UK tax credits. iBenefits is an easy to use information hub, bringing the benefits and tax credits system to your fingertips in an instant.

Features:

• Comprehensive list of benefits and tax credits available to people in Great Britain
• Key entitlement information for each benefit and tax credit
• Essential claiming contact details and websites
• 2010/2011 benefits and tax credits rates

iBenefits is available in the iTunes store for just 59p. Read more about the App here »

Lee Healey, Managing Director of Income Max said “Attitude have done a top job, I’m thrilled… We can’t believe the App! We love everything about it from the fantastic branding to the amazing functionality”

Related posts:

1. Attitude Design v4 Launch
2. Income Max – new brand identity and website

Netforte

IT support and consultancy firm Netforte required a fresh brand for their company. A professional and distinctive brand was developed including a ‘mark’ which can be used by itself. We also designed business cards and leaflets for Netforte.

MIA – Made in Asia

MIA – Made in Asia sells products created by local craftspeople in Asia. Having already designed several items for the company (including packaging and the logo) we were asked to design a professional stationery set, including letterhead, business card and envelope.

We were also very excited to be commissioned with the MIA e-commerce website. A clean and professional design was developed which incorporates a creative look to compliment the special products available. The website takes payment via PayPal and a delivery fee system is included which calculates the delivery fee based upon location and weight. Order confirmations are automatically emailed to the customer and to the MIA admin.

SIFE Nottingham

The Nottingham SIFE team required the design of a report to display results and information about their recent work. The report had to display alot of information in a clear and easy to read format. Here we have shown the front and back cover of the report and the inner spread. We also designed a series of icons to represent different criteria and these are also shown below.

Impossible Bottle

A creative and ingenious company which inserts impossibly large items inside bottles. A brand and website design was required and we developed a professional yet eye catching design which conveys the ideas of mysteries and secrets. This website also has simple e-commerce functionality.

Sanco Technology

Sanco specialize in drying technology and required a creative and eye catching brand design for the company. A professional logo was developed making use of special effects to create a strong, memorable design.

iWeekend

Having previously designed the tourism site ‘Ireland Weekends‘, Attitude Design was approached to develop a re-design of the site. A fresh, creative design was developed which invites the user into the site with friendly ‘polaroid’ style photos and an interactive calendar.

Bible Learning Centre

Having already designed the logo and other promotional items for the Bible Learning Centre in Nottingham we were asked to design some business cards. A clean simple design was produced which is consistent with the Centre’s brand.

Better Languages

Translation company Better Languages approached us to design a business stationery set. A clean, professional design was adopted making use of a watermark to create consistency throughout the set.

Is your business in need of a fresh look? Contact us today for a free quote for all your brand, print and web design requirements.

Related posts:

1. Sizzling Summer Designs from Attitude
2. Winter Wonders from Attitude
3. Latest Designs Springing Up from Attitude

Put Your Website On A Handheld Device

Go on! Try it! How does it look? Does it become easy to use and navigate around? Is the information a mobile user needs, such as a telephone number, easy to find and use? If not why not take advantage of this amazing special promotion we are currently offering and get your website mobile! For only £400 +VAT we will develop a bespoke version of your website specifically for a mobile device! Hurry – offer will end June 30th!

Previously this service cost £600 so it’s a massive £200 saving…

Place your order now »

An Example

We recently worked with Better Languages to produce a cutdown version of their website for mobile devices. Try it on your mobile: http://www.betterlanguages.mobi – see what we mean? It fits the screen, the calls to action are relevant to mobile devices (e.g. call now will actually ring the number if the device allows this functionality), it’s clear and easy to read with all the contact details readily available. It was displayed recently at The Internet Conference as an example of cutting edge technology.

What did Better Languages think of our work?:

“As part of our ongoing development strategy we felt it was important to set up a .mobi version of our site, initially this is a single page including a news feed and contact details. We were, as usual, extremely pleased with Attitude’s work on this site, and are very happy with the result. We will be looking to add different language versions of the .mobi in the future, and are confident it will improve the user experience of our site.” Mike Hunter, CEO, betterlanguages.com Ltd.

This is what we are offering – but for your website and your brand!Be one of the first in your industry and lead the way in the mobile revolution that is sweeping the world!

There are also two more blog posts about the Better Languages mobile website here » and here » – just in case you are interested.

Why It Makes Sense

A Smartphone is a phone with advanced features such as email and internet. In 2009 the number of people in Britain using Smartphones came to almost 6.2 million and over one fifth of people in the UK with a mobile phone were using it to browse the web. With the choice, quality and availability of Smartphones increasing, this number is only going to get bigger.

In this busy world that we live in where people are always ‘on the go’ no modern business should be without a website which is in a mobile friendly format. Wherever members of your target audience are – whether it’s on the train or waiting for a bus, they should have access to your website in a tailored version to suit their handheld device.

Benefits

• Better brand perception
• Gets you ahead of your competition
• Connects in an effective way with more of your audience
• Is useful to your audience
• Helps your SEO

How It Works

We put a script onto your website so that if someone visits it from a mobile device the site will appear in a format that is optimized for this. The design will generally be simpler than your main site (to reflect the small screen it is being viewed on) and will include your main message, what your services are, contact details and a contact form.

If someone is viewing the site from a mobile phone that isn’t a Smartphone then that isn’t a problem either – they will simply see the site as text only.

What We Can Offer You

Attitude Design currently has a great offer on its mobile friendly website designs and we’d love you to get in touch!

For £400+VAT we will deliver:

• x1 initial “flat” (uncoded) design of a single page .mobi website for hand held devices based upon your current website design
• The design will include:
  • Header bar with your logo on it
  • Main message and call to action
  • A few paragraphs of text about your business
  • Contact details with a link to Google maps
  • A link back to your main website.
• x1 set of amendments if neccessary
• Coding in HTML and CSS and implementation
• Add Google Analytics so you can measure your visitor levels

Place your order now »

Please note purchase of .mobi domain name and hosting might be additional. We will attempt to host the .mobi site on your current server but will be happy to discuss this with you.

Keeping Up To Date

As new Smartphones enter the market it is also important to keep your mobile friendly site up to date so that people can view it from the newest models. We can offer ongoing maintenance to ensure that however new someone’s Smartphone is – they can still see your .mobi website.

Maintenance: from £30 + VAT per year

Contact us today to discuss your project in further detail and see what we can do for your business.

Other Services

We do of course offer more than just mobile websites – we provide great, functional design across both print and web.

If you need a brand makeover we can also offer logo design, stationery design, website design and much more - let us know. Special package prices are available – please ask for details.

We look forward to working with you!

Related posts:

1. Mobile website special offer!
2. Mobile Moans – The Logos Of The Mobile Industry
3. Attitude Design – Sponsors of The Internet Conference

The brand identity we designed for the prestigious conference

We have recently been involved in exhibiting and sponsoring The Internet Conference. Held in Nottingham at the East Midlands Conference Centre and hosted by Hallam Communications – our expectations were high!

The Event was held at The East Midlands Conference Centre, Nottingham

We knew it would be brilliant as soon as Susan Hallam walked down through the audience towards the stage to a Black Eyed Pea’s thumper. Giving us a brief welcome she introduced Charles Arthur, the Technology Editor from the Guardian. He talked about how to assess change on the internet and talked about many of the new technologies and trends happening right now. Amongst the bunch was HTML 5 and the importance of websites which work on mobile devices. Susan then took over in her usual charismatic style, with an introduction to the new features of Google. Tips about Google Snippets and Google Places featured heavily.

The rest of the day followed with high quality speakers, intermingled with coffee breaks and lunch.

Natasha Barnett teamed up with Susan in their “Web Inspector” session. They pulled up delegates websites and critiqued them – pointing out, and allowing the audience to point out, where websites could be improved. Some comments were harsh – but fair. One of our clients, Mike from Better Languages had his site put up. We held our breath – our reputations at stake!

Natasha Barnett, Head of Web Marketing at Capital One, shows our Better Languages website as an example of good web-design.

Phew – the gurus loved it! Commenting on the clear and easy navigation, the good SEO, clear messaging and simple calls to action. Later they also demoed the betterlanguages.mobi site. A site we had designed to ensure that it could easily be read on a hand held device. Again, positive comments – we must be doing something right!

Kelly Herrick of Abacus Lighting was excellent in her introduction to Twitter for business – as well as Richard Flewitt who gave a brilliant talk about the power of video. He mentioned that YouTube was the second largest search engine – a fact which raised a few eyebrows…

Later Dr Mike Baxter talked about users’ psychological processes when they come to purchase online. Brilliant, logical and in-depth – he really educated the audience.

Dr. Mike Baxter in full swing

There were of course many other speakers (see the program here) although we have only reported on the ones we were able to listen to. Speaking to other delegates they all reported that the event was worthwhile and that they had learnt lots of practical things which will help boost their online marketing.

Some of the materials we produced for the event...

It was an honour to be associated and involved in the event. We supplied the brand identity and many promotional materials for the event – including the website.

Paul Allen, our marketing strategist at our stand

The message of our stand "your brand is priceless"

We were also exhibiting at the event and met many brilliant people. It was great to be able to discuss our passion about what we do. If you were there and didn’t get a chance to speak with us – be sure to drop us a line or follow us on Twitter.

So – was it worth being involved in? Definitely. Would we go again? Absolutely! It was a positive educational time – let’s hope Hallam Communications host another one soon!

Related posts:

1. Attitude Design – Sponsors of The Internet Conference
2. NewsFlash: The Internet Conference 14 May
3. Hallam Communications

Related posts:

1. Attitude Twitter update for the week (2010-04-09)
2. Attitude Twitter update for the week (2010-03-12)
3. Attitude Twitter update for the week (2010-02-12)

Just a reminder that The Internet Conference is only 1 week away!

Featuring hand picked  leading internet marketing experts and hosted by Hallam Communications at the East Midlands Conference Centre, it’s going to be a an event to remember! The speakers and topics are:

• Keynote Speaker:  Charles Arthur:  The Guardian’s Technology Editor
• Susan Hallam:  What’s New With Google
• Dr Dave Chaffey:  Improve your Business Perfomance with Google Analytics
• Dr Mike Baxter:  Improving your Ecommerce User Experience
• Kelly Herrick:  Finding Your Business Voice on Twitter
• Richard Flewitt: Engage and Inspire with YouTube Videos
• Ian Lockwood:  Essentials of Search Engine Optimisation
• Mark Shaw:  Essentials of Digital Copywriting

So – book now for a boost in ideas to further your business. http://www.theinternetconference.co.uk/

When you are there pop by and see us at our exhibition stand. We’d be happy to chat to you about maximizing your brands potential and helping you to make a reality of some of the techniques and concepts you hear from the talks…

We look forward to seeing you.

Related posts:

1. The Internet Conference 2010
2. Attitude Design – Sponsors of The Internet Conference
3. 5 Videos To Help You Market Your Business

Images from www.adclassix.com

Disclaimer: We are not attempting to take any credit for the above work – we have had nothing to do with any of the designs shown. If you have any questions regarding this please contact us.

Related posts:

1. Time Machine / Fashion Mags from the 50s & 60s
2. Time Machine / Perfume Ads from the 90s
3. Time Machine / Levi’s Ads in the 00ties

@DavidAirey at least it wasn't for your wife in reply to DavidAirey #

Related posts:

1. Attitude Twitter update for the week (2010-04-23)
2. Attitude Twitter update for the week (2010-02-26)
3. Attitude Twitter update for the week (2010-03-12)

Creative TV Adverts Part 1

Creative TV Adverts Part 2

Creative TV Adverts Part 3

Related posts:

1. Txt Island – Inspirational Creative Video
2. 5 Videos To Help You Market Your Business
3. Inspirational Policing Pledge Posters

Related posts:

1. Attitude Twitter update for the week (2010-03-12)
2. Attitude Twitter update for the week (2010-01-29)
3. Attitude Twitter update for the week (2010-04-30)

Intro

Ever wanted to wrap some text inside a shape? The way you do it is with Illustrators handy “Envelope Distort” which can produce some very creative and exciting shapes to make your designs that extra bit special! “Tell me more” we hear you say – ok we will…

Step 1 / Shape up

Create the shape you want to eventually fill with text. For this example we produced a shape by using pen tool (Hot Key P). Make sure you join the edges of the shape together so its one continuous path. You can also use standard shapes like rectangles (Hot Key M) or ovals (Hot Key O).

Step 2 / Set the type

Next – create the text you wish to fill the shape. You do this selecting the Type Tool (Hot Key T) and then clicking and draging on your artboard to create a text box. Tap in your text and then formate it using the “Character” Pallet (Hot Keys OPTION +T).

Step 3 / Outline

Now “Outline” your text by selecting it (using the “Selection tool” – Hot key V) and then go to Type > Create Outlines (or hot keys Shift + Command + O).

Step 4 / Reorder & Shape

Make Sure your text is ‘behind’ the shape you want it to fill – Select the object and go to Object > Arrange > Send to back (Hot keys Shift + Command [ ). Also select different colors for your text and main object

Step 5 / Enveloping

Now we should be ready for Envelope Distorting! So simply select the text and the shape you wish for it to be fitted into. Go to Object > Evvelope Distort > Make with top object (or hot keys: alt + command + C) and wham – you have yourself a very cool piece of typography!

Step 6 / Finish it off

To finish off go to Object > Flatten Transparency and hit “ok” – you’ll now find that you can see the bezier curves which will allow you to edit or position the object further if you need to.

Conclusion

So – another cracking effect brought to us via Adobe Illustrator! Leave a comments or example of this effect in action! Enjoy enveloping!

Related posts:

1. 3D prototype mock up in Adobe Illustrator
2. 7 More Things You Didn’t Know Adobe Illustrator Could Do
3. 7 Things You Didn’t Know Adobe Illustrator Could Do