Close sidebar
Skip to content
Tutorial

How to create a retro joystick on photoshop

Before we get started, let’s take a look at the image we’ll be creating. As always, the layered Photoshop file is available via our Psdtuts+ Plus membership.

So, are you ready to start? Like every tutorial, it is recommended to use the latest version of Photoshop.

Step 1

Let’s open a new document using the settings shown below.

Step 2

Now we’ll need to have some guides to make sure that everything in our document will be in the right place. And in order to put the guides in the correct place, we’ll make some fixed sized selections.

Get the Rectangular Marque Tool, set style to Fixed Size and set Width and Height to 140 pixels. Click on the canvas, then while holding the left mouse button place the selection to the top left corner. Drag one horizontal and one vertical guide and snap them to the edges of the selection.

Drag the selection to the right bottom corner and get two more guides. Because we want our tool to snap to these guides, make sure that View > Snap is active.

Step 3

We can start drawing now. First create a new layer and name it “Upside.” Pick 65% gray as your Foreground Color. Get the Rounded Rectangle Tool, set the Radius to 40 pixels, and select Fill Pixels in the tool options. Draw a rounded square as in the below image.

Go to Filter > Noise > Add Noise, then set the Amount to 2%. Also, set Distribution to Uniform and make sure that Monochromatic is checked.

Featured, Tutorial

Syntax Highlight powered with prism

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Syntax Highlight


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header></header>
  <div role="main"></div>
  <footer></footer>
  <script src="js/script.js">
</body>
</html>

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}
Tutorial

How to use Gutenberg Editor

As I write and you read this, the WordPress core team is in the process of developing an entirely new content editor for WordPress – Gutenberg – and it is currently scheduled for release at some point in 2018 as part of WordPress 5.0.

When that happens, the way that you write your blog posts in WordPress will drastically change (though you will be able to install a plugin to keep using the current editor, if desired).

It is to help you get ready for the change that I have penned down this post on How To Use The WordPress Gutenberg Editor.

I’ll show you exactly how you can use the new editor to write a blog post so that you are ready for the transition when WordPress 5.0 and Gutenberg get released.

This is a cookie notice. You can replace this cookie notice easily using the theme options from within your WordPress control panel. It will only appear once, with acceptance of the form stored locally.