This is the beginning of a series in how to go from Photoshop to WordPress. It will answer questions like:
- How do I bring a design element from Photoshop to WordPress?
- How do I set the background color of my WordPress website to match the color I used in Photoshop?
- How do I make my WordPress sidebar look like what I designed in Photoshop? (or my footer or header or…)
- and, so many more!
There are some basic know-hows that are essential when it comes to combining Photoshop and WordPress. This series will not cover these basic know-hows, so here is a list of resources to bring your skills up to speed in these different areas.
You need to know the basics of
- How to Use Photoshop
- How to Use WordPress
- HTML
- CSS
Plus, it’s very helpful to know a bit about PHP.
There are tons of tutorials available online. I’m including the ones I’ve used and have liked the most, plus some I’ve put together. I’m sure you have found other resources. Let us know your experience in the comments below.
Here’s a quick glance of the topics and corresponding online resources I mention below:
| Onward! Studios | lynda.com | w3schools | psdtuts+ | Photoshop Essentials | WPBeginner.com | |
| How to Use Photoshop | x | x | x | x | ||
| How to Use WordPress | x | x | x | |||
| HTML | x | x | ||||
| CSS | x | x | x | |||
| PHP | x | x |
How To Use Photoshop
Photoshop Training at lynda.com
Lynda.com is always a good resource for all kinds of training. When I was first learning Photoshop, their tutorials were invaluable. Plus, you get access to many other types of training. The specific course I recommend is the Photoshop CC Essential Training.
Free Photoshop Training at psdtuts+
This free video series helps you understand how some of Photoshop’s basic tools work. The series covers a broad range of the various tools inside Photoshop.
Photoshop Essentials
These Photoshop Basics tutorials are perfect for beginners and cover everything you need to know to get up and running quickly! Choose to review a popular topic (Layers, Selections, Shapes, Type) or view their entire collection of Photoshop Basics tutorials.
Photoshop Basic Course
This is our own Photoshop Basics course. It includes:
- Overview of Photoshop
- Easy to follow videos – without the overwhelm (most videos are 3-5 minutes in length)
- Over 90 minutes of Photoshop video training
- Step by Step instructions on how to do a variety of image-editing techniques
- Access to over 25 how-to Photoshop training videos
- Ask-the-expert assistance
- 24 hour access to course material
We are offering it at a 70% discount. All videos are available online after signing up. Plus, I am available via email to answer any questions you may have as you work through the course material. Of the options in this list, this is the only one that gives you access to the instructor to get answers for any Photoshop questions you may have as you work through the easy-to-understand video tutorials. Tell me more!
How to Use WordPress
WordPress Training at lynda.com
The WordPress Essential Training course gives you the basics of how to use WordPress. It goes through setting up a self-hosted WordPress website and then how to use WordPress to set up your website.
Videos at WPBeginner.com
WPBeginner.com is an outstanding resource for all things WordPress. I like that it’s really geared towards beginners, just as their name implies. They have a great video library of how to get started with WordPress. You’ll need to sign up for an account, but it’s free!
Intro to WordPress Course
This is our own Intro to WordPress course. It includes:
- Overview of WordPress
- Easy to follow videos – without the overwhelm (most videos are 3-5 minutes in length)
- Over 100 minutes of WordPress video training
- Step by Step instructions to set up your own WordPress website
- Access to over 20 how-to WordPress videos
- Ask-the-expert assistance
- 24 hour access to WordPress online course material
We are offering this course at a 70% discount. All videos are available online after signing up. Plus, I am available via email to answer any questions you may have as you work through the course material. Of the options in this list, this is the only one that gives you access to the instructor to get answers for any WordPress questions you may have as you work through the easy-to-understand video tutorials. Tell me more!
HTML
HTML Training at lynda.com
Again, Lynda.com has great training 🙂 Their HTML Essential Training Course course is a good candidates to learn the basics of HTML.
Learn HTML at w3schools
W3schools has very good training for more of the programming side for websites. Their HTML tutorials provide a good foundation in understanding HTML. I used w3schools a lot when I first started learning HTML. I really like their interactive windows that instantly shows the results of my HTML code. It’s a very good learning tool.
CSS
Learn CSS at w3schools
As mentioned in the HTML section, W3schools has very good training for website programming. Their interactive CSS tutorials are a great way to quickly understand the basics of CSS. Again, I used w3schools a lot when I first started learning CSS.
CSS Training at lynda.com
There are a variety of CSS courses offered at lynda.com. In reviewing their selection, CSS Fundamentals and CSS: Core Concepts provides the basics of understanding CSS to the degree you’ll need when it comes to integrating your Photoshop designs into WordPress. These courses includes styling text, using container elements, adding margins and padding, using color and controlling how images are displayed.
CSS at Onward! Studios
Although we don’t offer a CSS course, there are a series of blog posts that address CSS and provide some basic overview of how to use CSS. The following posts go into more detail about CSS.
- WordPress Minimalist Guide to CSS
- CSS Types: Tags, Classes, IDs
- Creating Nested Boxes in CSS
- Seeing the Boxes
PHP
PHP Training at lynda.com
Although this training will go beyond what you need to know about PHP, it gives you an understanding of how PHP works and will make you less intimidated when having go into PHP when customizing WordPress. PHP with My SQL Essential Training provides all you need to know and them some!
Learn PHP at w3schools
Again, w3schools is a good candidate for learning PHP interactively. Mix HTML with PHP in their PHP Tutorial.