Tutorials
If you post helpful information on your blog chances are some of your early posts are now outdated as technologies have changed over the years. Let’s take a look at how we can add a mix of PHP tags to our WordPress themes to automatically add a small disclaimer or warning message to posts over X years old.
Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.
Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.
Over the past couple of weeks I’ve posted the design process of my latest WordPress theme. We’ve gone through the Photoshop design stage, the HTML5 and CSS3 coding stage and now we’ll go through the templating stage to finish off the Typo design as a fully working WordPress theme.
Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.
The tutorial posts where I go through the process of creating a complete WordPress theme from Photoshop concept right through to coding the template files always go down well, so let’s start with another tutorial series based on my latest WordPress theme design. Follow this tutorial where we’ll lay out a typography based blog design over a strict underlying grid, then stay tuned for the next tutorials where we’ll build the concept into a HTML5 prototype then finish it off as a fully working WordPress theme.
Repeating background images are safest method of styling up your website background other than a plain old CSS background color. Websites are viewed in all types and sizes of browser these days, so a repeating background ensures the whole of the user’s screen will be filled with your design, unlike a static image that can often end up being cropped off or lost in a sea of flat colour. Let’s take a look at how seamless or repeating textures and patterns can be created in Photoshop.