ribbon Enter Now

Want a brand new website for your charity worth over £5,000?

Positive Web Design is offering one lucky charity the incredible opportunity to win just that!

Call Free for an instant quote
  • /wp-content/themes/default/images/headings/bespoke-sites.png
  • /wp-content/themes/default/images/headings/brochure-sites.png
  • /wp-content/themes/default/images/headings/ecommerce-sites.png
  • /wp-content/themes/default/images/headings/template-sites.png
GET A FREE QUOTE

    • Archive for November, 2011

    « Older Entries

    Flash Back To HTML

    Monday, November 28th, 2011

    Flash is a great way to display animations in web design projects, the only problem is that there are loads of issues with flash. The first is that it can’t be used on mobile devices, there is also a lot of compatibility issues such as browsers and whether the user has the right version of flash installed and finally, flash can take a long time to load.

    Google has released a tool called Swiffy, and all that is required is an SWF file, Google will then convert the file into HTML format. The HTML code does use Javascript but there are less issues when using Java and this can be used on mobile devices.

    All that has to be done to convert a flash file is go to the site and upload an SWF file, Google will then convert the file and show you it in flash format and HTML, you can then go to the page with the HTML code and view the page source. The HTML code you then need will be between the two script tags.

    Now that a tool like Swiffy is available, we could potentially be seeing much more animations on websites, this is because of the convenience that is now available, thanks to Swiffy. Flash is great and we all wish we could integrate flash into more things, and now we can.

    Posted in Web Design Work |

    Glow Ahead

    Friday, November 25th, 2011

    Sometimes there are aspects of an image that can seem a little dull and to put it bluntly, boring. Making certain aspects of an image stand out is a difficult task but there are a few things that can be experimented with to really bring your main elements out from the page.

    Making your images glow can be a difficult task, however there are a few different settings that can played around with to give that perfect glow effect.

    Having a dark background always help bring out your image, especially if it is a brighter colour, it will create a contrast and stand out from the page. Creating a glow effect will also bring images out to attention. Try and play around with the outer glow and inner glow settings in the layer style. If you really want that glowing effect, try using a white image and then selecting a florescent colour for the outer and inner glow. Note that in the quality section, the best setting for a glowing effect is the half round setting; this is because it creates the illusion that light is being radiated from the image or object.

    If you really want to take that extra step in creating an image that glows, add a drop shadow with roughly the same colour as the outer glow, then play around with the distance to determine how much your image should radiate. Similar to the outer glow, half round quality is great for creating a light emitting effect.

    Conclusion

    Creating a glowing effect can really bring attention to the appropriate areas which previously would have been overlooked. When used correctly, the glow effect can create a professional, futuristic look to your web design creations.

     

     

    Tags:, , , , ,
    Posted in Web Design Work |

    Creating A Light Spiral Around An Image

    Wednesday, November 23rd, 2011

    Creating a coloured spiral around an object can really bring the image to life and add that extra effect, with a few simple steps I will show you how to add a spiral around any object that looks like it goes around your image. This technique can be used in web design to really bring out your images or backgrounds and create something new and eye catching.

    The first task is to select your image, neon coloured spirals look great around black and white images but you can choose any colour spiral that you would like, this will come later in the spiral creation.

    Open the image up in PhotoShop. Create a new layer and then select the pen tool, you will need to make sure your pen tool is set to paths. You then need to create a zig zag like pattern aroung the object that you want to create the spiral around, which should look something like below. You can keep the spiral as close to or as far away from the object as you would like.

    Then you need to select your brush tool and right click, selecting the thickness of your spiral, I have used 5 as the thickness for my image. You then need to click back on to the pen tool and right click, select stroke path and make sure the brush is selected. Then click ok, for your reference here is what I have done with my image. to make the lines inside your spiral go away, hit the enter key.

    If you would like your image to be multi coloured, you will need to create a new layer, then select the brush tool. Select a failry large brush size, don’t worry about being neat , just cover the general area of the lines you want to change the colour. Here is what I have done below.

    Then to make the new layer of colours become the spiral, hold the alt key and click between the original spiral layer and the new coloured layer. It should look like the image below.

     

    Adding The Spiral Effect

    To do this you will need to select the erase tool, make sure it is a soft edge so you can gradually cut away the spiral. Then make the spiral weave in and out of the image by erasing the correct sections.

    If you need to modify the colours in their sharpness settings and so on, double click layer two and play around with the settings to create your ideal image.

    Below is my final completed image for your reference.

    Tags:, , , , , ,
    Posted in Web Design Work |

    Facebook Plugins 101

    Monday, November 21st, 2011

    Some Web Design experts may not be too social media savvy, this is not their fault because they are not social media gurus, simply web designers. Social media is an increasingly important factor for businesses and the demand to add Facebook to someone’s website is increasing. So what plug ins should be used and where?

    First of all, lets get the terminology out of the way. A like is when someone likes a page, this is essentially becoming a fan and subscribing to the pages updates and so on. When someone recommends something, then the page they recommended shows on their wall for all of their friends to see. If your client wants maximum exposure to their Facebook page, then consider incorporating both the like and recommend.

    The Like Button

    This is the bare minimum when it comes to Facebook. By default, Facebook shows you a like button plus the amount of users liking your page with their profile pictures. For a less in your face approach, deselect the send button and show faces. Then switch the layout style to button count. You’re like button should then look a little something like this.

    This version of the Facebook like goes very well with the Twitter follow or Retweet button, along with the Google plus 1.

    The Send Button

    The send button can be incorporated into the like button by selecting the send button option. However if you would like to put the send button elsewhere then you can use this plug in. The send button allows users to send your page to a friend(s), however this is not used much by Facebook users and it is much simpler to include a like or recommend button.

    The Comment Box

    For those who want Facebook users to comment on their page or content, then including the comment section can be a great plug in to use. You can change the settings of the comments so they need to be approved before hand, for more specifics, check out the comment box plug in itself.

    The Activity Feed

    The Activity Feed shows users what is happening on their Facebook profile, this is basically their news feed on your site. This is fairly pointless because they did not come to your site to see what their friends are doing, chances are if they are a heavy Facebook user, then they will have Facebook open in another tab,

    The Like Box

    The like box is the big daddy of Facebook plug ins, it includes: the like button, Your live stream, and the amount of people who have liked your page including profile pictures. This has all of the features that are needed for the best exposure for your Facebook page. You can pick and choose what part of the plug in you want to keep/delete, but if you client is really involved in the Facebook page I would suggest this.

    Recommendations

    The recommendations plug in show similar pages to the page that the Facebook user is on, and recommends them to the user. This can be somewhat tedious and also a waste of space. If you have a link going to your most important pages, then this plug in is practically useless and I would not suggest it to be used on any site.

    The Login Button

    This button lets Facebook users log into Facebook directly from your site. I think that this button is somewhat pointless because if a visitor wants to use Facebook on your site and they are not currently logged in, then they will be prompted to before they can like our page or anything along those lines.

    Registration

    The registration button allows people to sign up for Facebook directly from your site, however people would much rather sign up to Facebook directly from the site instead of your own. This plug in is not worth installing into your site because it would not benefit yourself and would most likely not get used.

    Facepile

    Facepile is a pile of faces who have liked your page. This can be used creatively, however it is incorporated into the like box and is much neater and tidier in that plug in. Although if you would like your pile of faces to be arranged elsewhere, then this plug in can prove to be useful.

    The Live Stream

    Live stream shows your pages live stream, sounds fairly simple, and it is. This is incorporated into the like box and I would say it is fairly pointless on its own.

    Conclusion

    Facebook provides a huge selection of plug ins, but in my opinion the only one worth using is the like box. This is because everything important is included in this plug in. The other features that are not included in the like box are not worth including because they do not add any value to the page. The only other plug in I would recommend is the comment section, but this must be used carefully to stop spam and negative, undesired comments which could do more harm than good.

    Tags:, , , ,
    Posted in Web Design Work |

    Adding Your PhotoShop Photos to the Web

    Tuesday, November 15th, 2011

    It can seem quite a task to get your hard web design work from photo shop onto the web, but once you know the process it can be quite simple.

    Instead of saving your work or using save as. You must save for web devices (ALT+SHIFT+CTRL+S) if you would like to use the shortcut.

    Once you have clicked or enter the shortcut, you will be taken to another window where you can edit what file type you want your image to be. JPEG tends to be the best route to take but sometimes you may have to save as a PNG file.

    There is also the quality field, this is where you can change the level of quality you want your image to be shown as. Keep in mind that if your image quality is saved as 100, then it will take longer to load online. A good guideline to stick by is use a quality of 60 but sometimes this may change if you are using the image for something like Twitter for example, where there is a limit to the size of the file that you can upload.

    The size of the file is displayed at the bottom left hand side of the window and changing the file type and quality of the image can reduce or increase the file size. The lower the quality, the lower the file size will be. The file types do vary quite a bit when it comes to file size but here is them in order from lowest to highest: PNG-8, PNG-24, GIF, JPEG,WBMP.

    Tags:, , ,
    Posted in Web Design Work |

    Making the Perfect Twitter Background

    Monday, November 14th, 2011

    photoshopFor those that aren’t a dab hand at photo shop, it can be fairly simple to make a bespoke web design styled  Twitter background with a few simple steps and just a few tools.

    I have spent a lot of time tweaking images with tools, just to experiment with the outcome and how I can use the tools to create the perfect image or background. One of the most simple methods to make a professional background is to take a photo or an image, and blend it into the profile. The real trick is how do you blend the image?

    The first thing you will need to do is pick a colour scheme, one you have done this, it makes the rest of the process much easier. Once you have your theme colours selected, you will need to find a photo or image that fits in with the colour scheme, if you have an image in mind before hand, try and build your theme around some of the most striking colours in that image. I suggest picking the colours closer to the outside to be your background colour, but this can vary.

    Now the image and theme is selected, you just have to fit them together, open the image in photo shop and set the canvas size to roughly 700px700px, remember the image will appear in the top left hand corner of Twitter, so if you want your image to appear lower you will have to experiment with positioning.

    You need to set the background colour of your image the same as the background colour that you have set on Twitter, once this is done the next step is the easiest.

    Select the erase tool (if the circle is too big or small use [ ] to adjust the size). Once your circle is the correct side, just trim away at the edges of your image until it is blended nicely into the background. Now it is just a case of position and this will change with each design but the best thing to do is to take a printscreen of the Twitter profile and see where works best.

    Below is a screenshot of the Twitter profile i created using this method, and it just a reference that you can use to base your ideas upon.

    Tags:, , , , , , ,
    Posted in Web Design Work |

    Using Your Web Design Skills to Benefit your Social Media Efforts, Google Plus

    Wednesday, November 9th, 2011

    Google Plus is the new kid on the block, but it has more gadgets and features than all of the other social networks. Not only that, but it is the smartest looking network going. Google Plus does look the most crisp in its’ appearance, especially when you put G+ next to Facebook it just looks cluttered and unprofessional.

    When creating a business profile or page, there are only really two different sections that you can design for, the first would be the profile page, if you visit +Google https://plus.google.com/116899029375914044550/posts, try clicking on the profile picture, it spins around! Admittedly this kept me amused for a while, not just the fact that a profile picture spins and changes, but more how different pages have used this to their advantage.

    This use of the profile picture inspired our designer to make a mirror image of our logo, here is our Google plus profile that our designer created https://plus.google.com/b/115193871712101370105/115193871712101370105/posts.

    Notice the banner too, it is called the scrapbook in Googles’ case, each image is 125px-125px and it is very similar to the banner that is available on Facebook, Google used this space cleverly to write their whole name and any company with only 6 letters will be spelling their company out across the page. If your business has more than 6 letters then you can use the space available for many different opportunities, but it is best to just treat this space as a normal banner.

    Conclusion

    Google Plus is definitely a cleaner and crisper social network, and design work should be carried out in the same manner. Due to Google +es simplicity, it really has potential for a professional appearance.

    Tags:, , , , , ,
    Posted in Web Design Work |

    « Older Entries