Here’s a quick way to further enhance the branding of your website. If you don’t have an iPhone go get one. Then try bookmarking your website; (go to a website in your iPhone Safari browser, hit the + symbol, and hit “Add Bookmark“). What this does is take a small screenshot of the webpage and add it to your iPhone, right net to the other icons you have.
Well forget that, now we can make custom icons, so when somebody bookmarks your website, the icon is one that you actually created! As a designer I might be a little bit TOO excited about this, but hey, this is the stuff I live for. You can see in the above image the two icons I’ve created for my websites, WebDesignAndSuch and BeantownDesign. So now the icons match the favicons of my websites, and I can just touch them to launch my websites on my iPhone.
Keep reading to see how to create your own iPhone icons. Continue reading
Well if you’re still here after that, here’s the deal. I was reading an interesting tutorial about creating a button similar to the one found on the Campaign Monitor website. I actually went ahead and created the button, I always love seeing the approach other designers take at creating things in Photoshop.
Well after I created it I figured I may as well put the PSD file up here for anyone that wants to use it. I’ll give the CSS code to add it to your website as a CSS sprite also. Now I need to give credit where credit is due. The CSS code, and the tutorial of how to make the button are from Jacob Gube over at Six Revisions. Check out that link if you want the step by step of how to make this button.
I’m really putting it up here so I’ll have easy access to the PSD file in the future so I can download it no-matter where I am, make a few color adjustments, copy the CSS code, and have a new button for whatever I’m working on that day. Check out the demo to see the button in action, and feel free to download the PSD file of my version of the button. Keep reading for the CSS code.
If you’re a webdesigner you most likely use Photoshop to create mockups of webpage designs for your clients. One technique I use in a lot of my website designs is dotted borders. They add a lot more visual interest than a regular underline, and work great to break-up sections of content.
So it’s easy enough to create a dotted line with CSS for the web, but how do you create a dotted line in Photoshop for your mockups? It’s actually rather simple; (as anything is when you know how I suppose).
In a previous post I went through the process of how you can make amazing panoramas in Photoshop. It’s a simple process, using “Photomerge” to put the photos together, and “Zoomify” to make them viewable on the web at a large size.
A friend of mine just got back from a trip to Arizona, and had a couple Panoramas he wanted me to make. So here they all, for all to see.
Apple is known for their clean designs, both in their products, and the way they display these products. One of the effects they have used a lot is displaying their images with a reflection of the product below it. When used correctly, this is a very simple, clean way to display products.
I’m sure there are plenty of ways to create this, but I’ll show you the way I do it.
Digital cameras are so inexpensive now that there is no reason to not be taking photos at high resolutions. But what good is having these large photos when you need to make them tiny anyway to put them online?
I’ll show you a method of taking a collection of large photos and turning them into a panorama. Once you have a large panorama put together, there is still the problem of being able to put it online for others to use. You don’t want to have to make it 900px wide.. because obviously you will lose all the quality. Uploading it as a huge image file and having a scroll bar is no good, who is going to wait for that to load? I’ll show you the perfect solution to this problem.
Step 1 – Take Photos
Well you’re going to need photos to make a panorama! You can use a tripod with a camera, and take multiple photos as you turn the camera around until you reach the original position. Make sure to overlap the photos as you take them so there will be somewhere to blend. If you don’t care about them being perfect, or you don’t have a tripod on you, just hold it as still as you can, and turn in a circle as you take pictures. That’s the method I used when I took all these photos in St. Maarten last year. I actually like the effect it gives not having the top and bottom edges lined up, (you’ll see what I mean soon).
Well I’m a designer, (duh), so I work with color every day. There are a ton of different tools to make using color easier both on and offline. I was going to make a post about the top 5 sources/ tools that I use for color palettes, picking, etc… but I’ve decided to take them one at a time.. I think they are so important that they are all worthy of separate posts. Then maybe I will create one post summarizing them all.
I’m going to start off with my favorite. This is a Firefox Add-On (mental note.. create a Firefox Add-On post), that I use almost daily. It’s called ColorZilla.
I think Photoshop CS4 has some seam carving built into it, I’m still running CS3 so I haven’t used it yet… but the possibilities of this look amazing. I’m especially impressed by the ability to completely remove objects from a picture in a matter of seconds.
Recent Comments