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.
techniques
How To Create a Stylish Drop Cap Effect with CSS3
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.
Create a Typography Based Blog Layout in HTML5
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.
How To Create a Simple WordPress Blog Theme
So far in this WordPress theme tutorial series we’ve put together a visual concept in Photoshop and coded up a working prototype in HTML and CSS. Now let’s take our static web page files and create a fully working WordPress theme by splitting up the code over the various template files and injecting the relevant WordPress PHP tags.
How To Code a Blog Theme Concept in HTML & CSS
Last week we went through the process of creating a clean blog theme layout in Photoshop. Now, let’s transform the visual concept into a working HTML/CSS prototype web page before finishing everything up as a complete theme next week. We’ll build the page structure with clean HTML, then style up as much as possible using CSS styling to create a lean website design that still replicates the original concept.
How To Create a Blog Theme Concept in Photoshop
In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.
How To Create a Slick Features Table in HTML & CSS
We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.
Showcase of Impressive Design Process Explanations
A common feature amongst the top design portfolio and agency websites is a visually presented explanation of their design process. This simple idea of describing how a potential client’s project will be handled from start to finish is a great way of securing projects and giving the customer an insight into what their working relationship with the designer(s) will be like. This showcase rounds up a bunch of impressive examples of how various designers have explained their design process with the aid of clever graphical elements.
Create a Grid Based Web Design in HTML5 & CSS3
Follow this step by step walkthrough of the making of a sleek, grid-based website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.
How to Code a Stylish Portfolio Design in HTML/CSS
Over on my Blog.SpoonGraphics design blog this week, I posted a Photoshop design tutorial that takes you through the process of building a stylish portfolio design concept. Follow this second part of the tutorial here on Line25, where we’ll code up a stylish portfolio design into a fully working HTML and CSS website. Stick around for part three, when we’ll go a step further and convert the static website into a WordPress build.
