Introduction to Making a Photo Black and White: Photoshop Crash Course (Free Tutorial)

You may think there’s only one way a photo can look in black and white. But no! You can customize your images to look the way you want them to in grayscale using Photoshop.

On a side note, if you want to learn to code for FREE, check out our 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To begin, open up an image you’d like to edit. There are several ways to change it into black and white:

1. Go to Image > Mode > Grayscale. On the pop-up that appears, click “Discard”. This will convert the image to black and white by discarding the color. To undo that action, push Control/Command + Z.

2. Now click on the Channels tab in the right-hand sidebar. By clicking on the Red, Green, and Blue bars individually, you will get different variations of your image in black and white!

Note: to revert your image to how it looked originally, go to the Layers tab in the right-hand sidebar, and delete the layers that were added as you modified your image.

3. Next let’s look at the Adjustments tab in that sidebar. Alternatively, go to Window > Adjustments. This tab has even more options for changing the way your image looks. For instance, Hue/Saturation refers to the amount of color in your image. If you move the saturation bar all the way to the left, your image will become black and white.

4. In the Adjustments tab, you can also select the Black and White icon to convert your image. Notably, if you check the Tint box in the Properties tab that opens, your image will have a sepia tone.

As you can tell, there are numerous ways to modify your image to black and white in Photoshop. If this tutorial helped you edit a photo, we’d love to see it! Share your images with us on Twitter or in the comments below.

For more tutorials, check out our FREE 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Introduction to Making a Simple Bold Logo: Photoshop Crash Course (Free Tutorial)

The first step to launching a business is designing a stylish, recognizable logo. In this tutorial, you’ll make a bold text logo that captures your company’s personality. Looking to improve your technical skills further? Learn to code for FREE with our 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To follow along with this article in Photoshop, open a new file, and pick your desired dimensions. For the purpose of our example, also set the background to Transparent. Press OK to begin.

Firstly, let’s choose the color of our background. Click on the front-most of the two colored squares in the left sidebar. The color of this square is the color currently in use.

The “Color Picker (Foreground Color)” tab will appear. In this tab, you can manipulate values to get your desired color. We will use an off-white color by setting the values R, G, and B to 250. R, G, and B stand for Red, Green, and Blue. You can also see the hex code for this color: #fafafa. Press OK to close the Color Picker tab.

Select the paint bucket tool, and click on the background. The background will change to the off-white color!

Now choose the other colored square in the left sidebar. Let’s change its color to a very dark gray by setting the R, G, and B values to 25 (#191919). Fun fact: whenever your RGB values are all identical, your color will be a shade of gray!

Let’s draw a dark gray rectangle on the screen. In the left sidebar, click on the rectangle above the magnifying glass. The header at the top of your screen will transform to give you options for manipulating your shape.

Change the fill to #191919. Make the stroke equal to 0.00pt (non-existent). Click and drag to draw a box on the screen. To move the box around, click on the Move tool in the left sidebar. It’s the one at the very top and on the left. As you move the box, pink lines will appear to help you center it.

If it isn’t open already, click on the “Layers” tab in the right sidebar. Create a new layer by clicking on the paper icon beneath this tab.

Now we can add text to our box. Click on the “T” in the left sidebar. To type in our off-white color, click on the reversible arrow next to the two colored squares in the left sidebar.

For this example, type in “MAMMOTH”, and scale it so that it fits in the box. If you go to Edit > Transform > Scale, you can change the size of your text box by dragging its corner. To scale proportionally, push the Shift/Alt key. Hit Enter to apply the changes. Your screen should look something like this:

mammoth

Below the rectangle, in our gray-black color, type in “INTERACTIVE”. Scale it to the same size as the rectangle. Let’s change the color of “INTERACTIVE” to Mammoth Interactive’s signature orange. To do so, select the INTERACTIVE layer from the Layers tab. Click on the “T” in the left sidebar. In the header at the top, click on the colored rectangle. Then we can change the hex code and therefore color of the text to #f26522.

logo-final

There you have it! Now you are able to create a logo with Photoshop for all of your aesthetic needs. If this tutorial helped you make your logo, we’d love to see it! Share your images with us on Twitter or in the comments below.

For more tutorials, check out our FREE 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Introduction to Making Fonts: Photoshop Crash Course (Free Tutorial)

Ever needed to type something in Photoshop? Today we’ll tell you all about how to make your text the way you want it to! For those looking to improve their technical skills further and learn to code, check out our FREE 30-minute course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To follow along in Photoshop, open a new file, and pick your desired dimensions. Press OK to begin.

squares

First off, if you want to change the color of your font, click on the front-most of the two colored squares in the left sidebar. The color of this square is the color of your font.

The “Color Picker (Foreground Color)” tab will appear. In this tab, you can manipulate values to get your desired color. For instance, for a black font, set the values R, G, and B to 50. R, G, and B stand for Red, Green, and Blue.

To practice manipulating font, type in, for instance, “Mammoth Interactive”. The pink lines that appear on your screen help you center your text. If you click on the “T” in the left sidebar, the header at the top of your screen will give you more options for manipulating text.

Photoshop has many fonts on your computer, and you can add more. In the header, you can choose between different kinds of fonts, including:

  • Serif fonts have little appendages on them. These are best used in print materials like books. The serifs remind your brain of lines, making text easier to read.
  • Sans serif fonts, on the other hand, don’t have the appendages. “Sans” means “without” in French, so it is literally “without serif”.
  • Monospace fonts, such as Courier, look old and retro because at one point, all fonts were monospace. Every letter in these fonts has the exact same width.

You can also change various properties of your text, such as its size, alignment, or whether or not you want it bold.  If you go to Edit > Transform > Scale, you can change the size of your text by dragging its corner. To scale proportionally, push the Shift/Alt key. To scale from the center, push Option.

By clicking on the colored rectangle in the header, you can change font color. If you place in an image, you can match the color of your text with a color in the image. The tab “Color Picker (Text Color)” will appear. Then, if you move your cursor over the image, the cursor will transform into an eyedropper. If you click on the color in your image, your colored rectangle will change to that color. After pressing OK, you will be able to type in that color!

For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Introduction to Dimension Variables: Android Studio Crash Course (Free Tutorial)

Welcome! Ready to get a leg up on the competition? This article will teach you how to change the size of the text in your application FASTER than ever. If you are a beginner and are looking for an introduction to coding, check out our FREE 30-minute course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To follow along with this example in Android Studio, go into Project view. Then go to app > res > layout, and open “activity_main.xml”. Also, in the “values” folder in “res”, select “dimens.xml (2)”.

We’ll begin with “activity_main.xml” in Design mode, which lets us drag and drop items into our application. Select two of “Plain TextView” from the Widgets folder on the left-hand side. Position the two widgets just under the “Hello World!” text already on the screen. Your display should have three lines of text:

Hello World!
New Text
New Text

In this example, we will be changing the font size of these three lines of text. In Text mode, let’s first look at assigning size the long way. Add the following beneath android:id="@+id/textView2":

android:textSize="50sp"

Make sure this line is within the topmost TextView tag. Next, copy and paste this line into the other two TextView tags.

Now, let’s say we’re not happy with our text size of 50sp. What if we want to change it to 20sp? As you can imagine, changing 50sp to 20sp manually isn’t the favored technique. If you have a large number of TextViews, it is too tedious to change them one by one.

Thus, it’s much more efficient to reference a dimension variable. These variables are declared in the “dimens.xml” file.

In that file, in the resources tag, create a dimension variable using the keyword dimen, and name it "textSize". Also, give this variable the value 50sp. Finally, close the tag. Your line of code should look like this:


The next step is to go back to the activity_main file and reference our dimension resource. To do this, write @dimen/textSize instead of 50sp in all three TextViews.

Now if we want to change the text size to 20, we don’t have to go to each TextView in our application and correct the value manually. We can just go the resources tag in our dimension file and change 50 to 20.

Great work! With this skill, your programming will be faster and more efficient. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Introduction to Decimal Number Variables: Android Studio Crash Course (Free Tutorial)

Have you ever needed to display numbers with decimal places whilst coding a program? If so, this is the article for you. If you are a beginner and want to learn more, check out our FREE 30-minute introductory course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

In this example, we’ll be looking at an online store that is converting the prices it displays for its items from CAD to USD. To follow along in Android Studio, go into Project view. Then go to app >> java >> (topmost) com.example.zebra.demo >> MainActivity.

In order to implement decimal numbers in Android Studio, we use the keyword Double. Let’s name two double variables priceCAD and priceUSD. Add the following code beneath setContentView(R.layout.activity_main);:

Double price CAD, priceUSD;

To convert prices, we need to have a conversion rate. On a new line above the one in which we declared double variables, declare a constant by using the keyword for constants: final. As well, specify the data type Double. Name this constant CAD_TO_USD, and set it equal to 0.76, a sample conversion rate.

final Double CAD_TO_USD = 0.76;

Back with our double variables, set priceCAD to equal 9.55. You can do negative numbers, but this example requires positive numbers. Note that if you want a price of 9 you have to type “9.0”. If you just put “9”, you’ll get an error. The emulator will find an integer when it wants a double variable, which requires decimal places. Also, make priceUSD equal to priceCAD + CAD_TO_USD.<

Double priceCAD = 9.55, priceUSD = priceCAD * CAD_TO_USD;

Furthermore, let’s create the code for a message to be displayed on the screen. Below the line with our double variables, type in “Toast”, select “Create a new Toast”, and hit Enter. Android Studio will auto-complete the following code with the Toast function’s parameters:

Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show();

The string we want to be displayed on the screen goes into the quotation marks of the Toast function. Let’s code it as "The price in USD is " + priceUSD.

To test our code, run the emulator. You should see the text “The price in USD is 7.258000000000001”. Woah! This price contains 15 decimals. The online store probably doesn’t want to show the price of its items with those many.

To format the price to two decimal places, add the following before the string in our Toast function: String.format(). Enclose the string in the parentheses of that code.

As well, inside those parentheses, add the parameter Locale.getDefault(), in the beginning. Then replace + with a comma. Put a placeholder for the first decimal that appears after the comma. After "The price in USD is", write %.2f. %f stands for floating point number. The .2 specifies that we want only two decimal places to be shown.

If you want to specify the decimal places for more numbers, add more %fs separated by and. Separate the numbers with commas, such as priceUSD, 2.45. The value of priceUSD will be placed in f. If we have another one called 2.45, it will place that number in the second f.

For now, we’ll just use one placeholder. If you run the emulator again, you will see the price displayed with two decimal places: “The price is 7.26”.

For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes