Scott Salter

  • Archive
  • RSS

Pet Paradise website

This is how my pet shop website/store, Pet Paradise, is currently looking. 

I have designed this website inline with my branding guidelines, and the store’s mission statement, my photography, social networking links, and the sidebar menu I created from a photo. 

Homepage

Toys page

Food page

Contact page

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • 1
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

New Pet Paradise logo

I changed the logo for my pet shop - Pet Paradise. This was how it looked before…

Not much different, but this is how it looks now. I have changed it by changing the paths using the direct selection tool, and adding effects to the paw and circle, to make it look less robotic, and to blend it better with the font I used (MTF Peach Cobbler)…

This is the business card for Pet Paradise.


    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Branding Guidelines

Design for Web & Mobile devices
24/02/12

In the session today, we’ve been looking at branding guidelines. I found the Bath Spa University guidelines. 

Branding guidelines include things like;

  • Logos; what logo to use, how to use them, what size they need to be, what spacing is needed around the logo, what colours can be used, where it should be positioned, and things like what not to do like manipulate the logo, and rotate it.
  • Typography; What font(s) to use, how you should use them, colour, manipulating fonts, sizes, and weight.
  • Colours; Branding guidelines feature colour palettes which show you which colours to use, what the colour code is so you get the colour exact, RGB/CMYK and pantone.
  • Photography/Imagery; What photos you can use, how to use them, and branding guidelines include Don’ts - e.g. you don’t want clip art to be used on a professional poster. Guidelines also tell you how to position logos/text on top of photos.
  • Print; Things like where to place logos, sponsor logos, address (page layouts) etc on print documents like business cards, letters, flyers.
  • TV
  • Promotional products; Pens, clothes etc
  • Signs

Branding guidelines also have very neat, modern and professional looking layouts too. Some feature background information about the company at the start. 

Picture Below… a screenshot from the Bath Spa University branding guidelines, which can be found online - http://www.bathspa.ac.uk/services/marketing/branding-new/bsu-brand-guidelines-2012-01-12.pdf

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Icons

Design for Screen & Mobile Devices

…also in the brief, was the task to create 6 icons. My theme was social networking/social media icons. I created an icon for Facebook, Twitter, Tumblr, Wordpress, YouTube and email, for websites to use to share content, and to link to accounts on other websites.

To create the top 4 icons in this post, I used the stamp tool in Photoshop. 

Facebook

Twitter

Tumblr

Wordpress

YouTube

With this icon, I have attempted at making it look like a computer screen (buttons/lights in the bottom right), and have created a red triangle which acts as a play button symbol. I’ve kept it to the YouTube colour scheme - red, black, and white. 

Email

For email, I created an @ sign using a font from dafont.com called “new facebook”, and a photo I took of a keyboard. 

I didn’t want to edit or mess around with the top 4 icons too much because I didn’t want them to look too different to other social networking icons, and I didn’t want it to not look like an icon/symbol for those sites, so they’re looking rather basic. Other than looking basic, I’m fairly pleased how they look. 

I created a new look for the YouTube icon because I wouldn’t have been able to create the same effect as the other icons because of the logo and the amount of lettering it contains.


    • #Design for Screen and Mobile Devices
  • 1 year ago
  • 1
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Wallpapers

Design for Screen & Mobile Devices

For our Design for Screen & Mobile Devices sessions, we were given a brief to create 6 wallpapers. I created mine using six photographs, and some typography. 

Bath architecture

This is a photo of Bath Bus Station. Although it doesn’t represent Bath, I chose to create a wallpaper from it due to it’s composition and the shapes and lines on the building. I edited the photograph to make it black and white to give it only one main colour scheme. On it’s original photo, I was going to add text saying “Bus Station. Bath, Somerset”, but didn’t because to anyone who isn’t from, or doesn’t know Bath, it doesn’t look like a bus station, and the photograph is just showing architecture… not buses.

Clifton Suspension Bridge

For this wallpaper, I used one of my photos of the Clifton Suspension Bridge (Bristol), and added text onto the photo with a theme of the bridge… I added words like “Concorde” because Concorde flew over the bridge on it’s last journey, and words like “BS8” because that is the postcode. I gave the words/typography the shape of the bridge - the Clifton & Bridge being the towers, the Suspension being the bottom of the bridge, and the rest, the chains. 

Design / Architecture

For this wallpaper, I used my photo of the architecture of Cabot Circus shopping centre. I added a piece of text saying “Design Is…” as just something which could be extended… someone could say; Design Is… Architecture, Beautiful, Horrid, Cool, Neat, Amazing. I put the text up higher so if the wallpaper were to be used on a Mac, the Dock wouldn’t be in the way of the text. 

 

Kitten

From two of my photographs, I created two wallpapers of my kitten!

British

I created a British-themed wallpaper from my photograph of a red postbox. Using the layer filters in Photoshop, I added a Union flag onto it. 


    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Wordpress

Design for Screen & Mobile Devices

For our Iconification website, although premium, I found a possible theme on Wordpress. 

It’s called “Media Store” and allows you to add widgets, has a nice theme and layout, has a ‘Top Downloads’ section, Login field, a Download button, as well as a comments and review area. The theme also contains a blog, and social networking buttons/links at the bottom of the page. 

Link to the theme

Screenshot


    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Icon designs

Design for Screen & Mobile Devices 

For the Design for Screen & Mobile Devices sessions, I designed icons. I had two themes in mind - one being social networks, and the other, my kitten!

Kitten

To create the icon below, I found a (royalty free) picture from sxc.hu of a rubbish bin with rubbish falling out of it - I was starting my kitten theme by creating a possible icon for a Recycle Bin/Trash to go on a desktop, or in the Mac dock. I then cut around an image of my cat in Photoshop, imported it into Ilustrator, and live traced it. 

I thought it looked alright, but it’s more of a picture than an icon because of how detailed the image is - if it was the smallest icon at 16x16 pixels, it wouldn’t work. Due to this, I think i’m moving away from the kitten theme. 

Social Networks

I designed six other icons with a theme of ‘Social Networks’ (which could be icons that appear on websites to share content on social networks). I designed one for Facebook, Twitter, Tumblr, Wordpress, YouTube, and for email. Although they look simple, I went for a funky/tidy look. 

Top (left to right): Facebook, Twitter & Tumblr.
Bottom (left to right): Wordpress, YouTube, and email.

When I designed the six icons above, I was pleased with them because I think they go well together as they all look rather funky, and something different to how social network icons usually look. The only things I wasn’t too sure about - Twitter & Tumblr because they are both t’s, and YouTube because although I’ve tried keeping it with the theme of the YouTube logo (red, white and black), it doesn’t really look like it should be for YouTube. On these icons, I kept the same colour schemes for the social networking websites so they would be recognised much easier compared to if I did random colours, or a same colour throughout the icon set - to do this, I print screened bits of the websites, opened them into Photoshop, and got the colour using the Eyedropper Tool.

Different designs…

I thought the above six icons looked a bit simple, not highly interesting (although I think they’d work), and not very original. I then had a go at different designs of the Twitter icon, this time, using the Twitter “t” and Twitter bird…

 

Top (left to right): Stencil Twitter birds over the “t”, Twitter birds cut into the shape of the “t”, and Twitter birds surrounding the “t”.
Bottom (left to right): A black Twitter “t”, and Twitter birds surrounding it, and Twitter bird stamps in a “t”.  

Instead of the Twitter icon in the top finished set, I’ll use one of these. I may also change some of the other icons and personalise them with their look.

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Wallpapers & Browser wars!

18/11/2011
Design for Screen & Mobile Devices

In the lesson today, I completed 5 main designs for my wallpapers. I’ve based all the wallpapers around photography, but haven’t yet thought of a theme, or which wallpaper I should pick as my theme, to then create others in a similar way. 

With this first wallpaper, I added typography on top of one of my photographs of the Clifton Suspension Bridge, in the shape of the bridge itself. The words I added to make up the typography are all in the subject of the bridge. 

I designed this wallpaper with a “British” theme in mind. It contains one of my photographs of a postbox. I found a royalty free image of a Union flag, and added it on top of the photo layer in Photoshop. I then added a “Darken” effect to the Union flag layer to create this… 

This could be a part of a “British” theme where I also create more wallpapers with the same design, but changing the photograph to something like a red London bus or an old red telephone box.

This is a screenshot from when I was creating the above wallpaper.

Here’s a wallpaper containing a photo of my kitten!

…and another!

This is a wallpaper containing my photograph of the architecture/design of Cabot Circus shopping centre.

Browser wars!

In the lesson, we also looked at different browsers, and which is best. 

From research via the w3schools website, I found that Microsoft Internet Explorer was the most used web browser in October 2011. In second place was Firefox, then Chrome, followed by Safari, and then Opera. 

I also discovered that the best web browser for developers, was Firefox, because you can download an add-on called ‘Firebug’ for it. Smashing Magazine website. 

We also used a website called BrowserShots.org to take a look at website browser compatibility. I looked up my Tumblr URL. This is how it looks in a version of Opera… 

The fonts don’t load correctly!

Like Opera, in ‘Iceape’, the fonts don’t load correctly, the buttons/links underneath the header are out of place, and the search bar is missing… 

In Dillo… it looks awful. However, unlike on the ‘Iceape’ browser, it contains a search bar!

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Wallpapers

For our Design for Web & Mobile Devices session, we are creating our own wallpapers. 

From research, I found that widescreen wallpapers can be created with a resolution of 1280 x 800 pixels, 1440 x 900, 1680 x 1050, 1920 x 1200, and 2560 x 1600. I’m interested in creating a wallpaper for the iPhone. To do this, I’d need to create one at 960 x 640 (high resolution screen version for the iPhone 4 or the latest iPod touch). On an iPad, you can rotate the screen, so the background will change from vertical to horizontal. I found that horizontally, the screen pixels are 1024 x 768, and vertically, 768 x 1024. However, to create a wallpaper for an iPad, it’d need to be 1024 x 1024, or even 1500 x 1500 as this website suggests. 

For the project, I’d like to create a photographic wallpaper, or a wallpaper based on typography. Or something between the two. 

After browsing this website; http://www.junkiee.net/design/70-of-the-best-desktop-wallpapers , I found some great typography-based wallpapers which I liked…

Today in Photoshop, I’ve been coming up with possible ideas for my wallpapers. I used an Autumnal looking photograph, and I used a sans-serif font called ‘Babas Neue’ (which looks rather modern) which I found on dafont.com. 

In action, it looks like this…

This is the original photo…

Photography

Looking more at photography, I used an image of the architecture on Bath Bus Station. I changed the photograph to black and white because it makes it look calmer - something you wouldn’t mind looking at every time you turn the computer on. 

I’m not sure about the piece of text I added, but I placed it higher up, because if you were to use it on a Mac, the dock wouldn’t be in the way. Here it is in action…

Working with a photograph and typography again, I came up with this possible idea for a wallpaper. I used one of my photographs of Bristol Harbourside as it’s rather calm looking, and I took it on a pleasant day. I brought down the Opacity on the photograph layer in Photoshop so the text would work, and if any files were on the desktop, it’d be clearer to navigate around, compared to if it was a normal photograph. 

Here is another idea, but of just using one of my photographs - no type. It’s a rather calm photo of Weymouth beach which I photographed early in the morning. This could work well as a wallpaper because many people like the beach, the Sea is calming, and it’s in black-and-white.

I created the wallpaper below with the ‘Earth’ wallpaper (above) in mind. I used one of my photographs of the Clifton Suspension Bridge, and added text to it. I placed “Clifton”, “Suspension”, “Bridge” in a larger font, and rotated the text. I then added text around the main “Clifton Suspension Bridge” text which is in the subject of the Clifton Suspension Bridge - such as “Brunel”, and dates. 

On the image below, I tried creating the main shape of the bridge - the “Clifton” and “Bridge” being the pillars, the “Suspension” being the bottom, and other words, in the subject of the Clifton Suspension Bridge, to make up the curved shape of it. 

Here is another photography-based wallpaper. It’s one of my photographs of a building near the Bristol Harbourside. 

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • 3
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+

Wordpress & Twitter

21/10/2011: In the Design for Screen and Mobile devices session on Friday (21st), I chose a theme I liked, added pages, added widgets, some of my photographs, and added a blog post about the Mac OS X user interface to my Wordpress.com blog - scottsalter0.wordpress.com. 

I chose the ‘Skeptical’ theme (created by ‘WooThemes’). Although it may look a bit dull, I liked it’s modern, neat and tidy look. I added a Twitter widget so visitors to the site could follow me and read my tweets, and a Flickr widget for visitors to view a stream of my photographs. 

In the session, we also looked at Twitter. If you’d like to follow me, my Twitter is @scottsalter5. 

    • #Design for Screen and Mobile Devices
  • 1 year ago
  • Permalink
Share

Short URL

TwitterFacebookPinterestGoogle+
Page 1 of 2
← Newer • Older →

About

FdA Digital Design blog

Me, Elsewhere

  • @scottsalter5 on Twitter
  • scottsalter- on Flickr
  • RSS
  • Random
  • Archive
  • Mobile
Effector Theme by Pixel Union