ScrabbleTiles

You’ve probably seen a couple of quotes written using the scrabble tiles somewhere on the Internet, like those on Tumblr and Pinterest. They’re really nice and different, but it’s not always easy to create them.

This tutorial will show you how to create your own scrabble tiles set from scratch, so that you can use them anytime with any background you like. It’s really simple and fun, so let’s get started.

The Final Result:

Scrabble Tiles Text Effect

Notes:

* the software used in this tutorial is Adobe Photoshop CS5 Extended
* the size of the final result image is 1152 * 864
* you might want to check the Basix Page to see some useful topics on dealing with Photoshop basics, such as loading palettes and some shortcuts.

Resources:

* Floral Fabric Patterns by ~sofi01.
* texture D by ~Knald.

Step 1:

- Create a new document with the dimensions you need (depending on the text you want to create), here, the document is 1152 x 864 px. Then, Fill the Background with one of the patterns in the Floral Fabric Patterns set, the one used in the tutorial is called “Textures-WhiteFlorals-01_inspyretash-stock.jpg”.

Scrabble Tiles Text Effect step 1

- Place the texture D image on top of the Background layer, then change its layer’s Blend Mode to Multiply.

Scrabble Tiles Text Effect step 1

Step 2:

- Set the Foreground color to #ead89f, pick the Rounded Rectangle Tool, and make sure that the Radius value in the Options bar is set to 5. Then, create the tile in whatever size you like. Here it is 65 x 75 px.

Scrabble Tiles Text Effect step 2

Double click the Shape Layer to apply the following Layer Style:

- Drop Shadow: Change the color to #3f2823 and un-check the Use Global Light box as we will need to adjust the shadow Angle to 147. Then, change the Distance to 13, the Spread to 15, and the Size to 13.

Scrabble Tiles Text Effect step 2

- Bevel and Emboss: Change the Size to 3 and un-check the Use Global Light box. Then, change the Angle to 140 and the Altitude to 21. Also, change the Highlight Mode color to #fdf8e8, and the Shadow Mode color to #dcd5bf.

Scrabble Tiles Text Effect step 2

- Contour: Change the Contour to Half Round and check the Anti-aliased box. This will make the Bevel and Emboss effect a bit more defined.

Scrabble Tiles Text Effect step 2

- Gradient Overlay: Change the Blend Mode to Soft Light and the Opacity to 10. Then, choose the default Black, White Gradient, check the Reverse box, and change the Angle to 0. This will make the right side of the tile (where the shadow is) a little bit darker than the left side.

Scrabble Tiles Text Effect step 2

- This is how the tile should look like.

Scrabble Tiles Text Effect step 2

Step 3:

- Now, add the letter you want inside the tile. Use the color Black and any font you like. The font used here is Code Bold – Code Free Font, and the size is 50 pt.

Scrabble Tiles Text Effect step 3

- Double click the text layer to apply a simple Drop Shadow effect. Change the Blend Mode to Normal, the color to #e9dfc0, the Opacity to 100, the Distance to 2, and the Size to 0.

Scrabble Tiles Text Effect step 3

- This will make the text look like it’s engraved in the tile, which will make it look more realistic. Once you’re done, group the tile and the letter, and rename the group to whichever letter it contains.

Scrabble Tiles Text Effect step 3

- Duplicate the group and type in a new letter, then rename the group to the new letter. After that, select the group and press the Move Tool (V) then move the tile around and place it in the document as needed.

Scrabble Tiles Text Effect step 3

- Continue duplicating and placing the tiles until you write the whole word. You can also create a full set of tiles (with all the alphabet letters and numbers as well) and save them in a separate PSD file so that you can use them anytime you want.

Scrabble Tiles Text Effect step 3

Step 4:

- Duplicate the tile group one more time, and delete the text layer. Pick the Custom Shape Tool and set the Foreground color to #d5593d.

Scrabble Tiles Text Effect step 4

- Choose the Heart shape, and draw the heart on top of the empty tile, inside the same group. Then apply the same text Layer Style to the shape layer (Right click any text layer, choose Copy Layer Style, then right click the shape layer, and choose Paste Layer Style).

Scrabble Tiles Text Effect step 4

Step 5:

- Click the Create new fill or adjustment layer icon down the Layers panel and choose Gradient Map.

Scrabble Tiles Text Effect step 5

- Change the Adjustment Layer’s Blend Mode to Multiply, and its Opacity to 40%. Then click the Gradient box to open the Gradient Editor.

Scrabble Tiles Text Effect step 5

- Create the Gradient using the colors #b7a781 and #f9f2ea.

Scrabble Tiles Text Effect step 5

- Select all the layers you have, including the Background layer, and duplicate them. Then go to Layer -> Merge Layers, or press Ctrl + E, to merge the duplicated (copy) layers. Change the merged layer’s Blend Mode to Soft Light, and its Opacity to 30%.

Scrabble Tiles Text Effect step 5

- Go to Filter -> Other -> High Pass and set the Radius to 8.0, then click OK. This will intensify the edges a little bit to make them look more defined.

Scrabble Tiles Text Effect step 5

And that’s it! Now you have your own “Photoshop Scrabble Tiles” that you can use easily to create any text you want in a couple of minutes. Hope you liked it.

Scrabble Tiles Text Effect

Don't forget to subscribe to our RSS feed and follow us on Twitter.

» 52 Comments

  1. Sü Smith says:
    May 13, 2012 at 8:21 am

    Aww, what a sweet tut. Just in time for mother’s day! Thanks for sharing. :)

    Reply
  2. Bitte says:
    May 13, 2012 at 5:04 pm

    Fantasctic. I love this tut.
    Thank you so much.

    Reply
  3. PSDDude says:
    May 14, 2012 at 10:40 am

    Great idea and the effect looks very realistic!

    Reply
  4. Badrul Alam says:
    May 17, 2012 at 9:37 pm

    Awesome design in photoshop. Nice looking and Helpful, user friendly tutorial. Thanks for it.

    Reply
  5. Vietnamese says:
    May 18, 2012 at 6:13 pm

    This tut so great :) Thanks for your sharing :D

    Reply
  6. Remo says:
    May 22, 2012 at 2:44 am

    totally awesome my friend. looks so real!

    Reply
  7. Mark Armstrong says:
    May 31, 2012 at 6:33 pm

    Outstanding effect, and the way you structured the tute with all the helpful PS windows was a thing of beauty. Great work, many thanks! : )

    Reply
  8. A boy from Vietnam says:
    June 2, 2012 at 6:10 am

    WOW! I think my Mom will love it =D
    Thank for your tut

    Reply
    • textuts says:
      June 2, 2012 at 11:04 pm

      Hope she will ;)
      Thanks for the comment.

      Reply
      • elliya stace says:
        June 8, 2012 at 3:48 pm

        how can i center the font inside the tile? thanks

        Reply
        • textuts says:
          June 9, 2012 at 8:54 pm

          You can either do it manually by moving the letters around, or you can select the “Vector mask thumbnail” (to the right of the shape layer), enter the text inside the tile, then use the Paragraph panel (Window -> Paragraph) to align it.

          Hope this helps.

          Reply
  9. Nishita says:
    June 10, 2012 at 1:20 pm

    Thank you so much..it’s wonderful

    Reply
  10. Vince says:
    June 10, 2012 at 8:32 pm

    My version I made for a friend.
    http://s19.postimage.org/9j9ty96eb/jellybean.jpg

    Reply
  11. kwannie says:
    June 14, 2012 at 11:58 am

    This is an user friendly tutorial and the product is sweet. :)

    Reply
  12. Nguyen Thanh Trung says:
    June 17, 2012 at 9:02 pm

    Oh. I love this tut. It’s Sweet and beautiful. I will make for Women’s day or Valentine’s day. Thank you so much!

    Reply
  13. Moonlampje says:
    July 10, 2012 at 1:49 am

    Wow! this tutorial seems awesome! Will definately try it as soon as possible!

    Reply
  14. Augustine says:
    July 16, 2012 at 9:43 pm

    Thanks it was simple and lovely

    Reply
  15. Bunty Webb says:
    August 8, 2012 at 7:22 am

    fantastic effect.. tutorial was easy to follow even for a non-professional like me and i was able to reproduced the results very quickly.

    You put in a lot of effort in making these tutorials. Thanks a ton man.

    Reply
    • textuts says:
      August 9, 2012 at 2:03 pm

      That’s great to know! glad you were able to get the same effect easily.
      Thanks a lot for the comment.

      (I’m a girl though ^_^)

      Reply
  16. Minh Y Nguyen says:
    August 20, 2012 at 1:30 pm

    Hi, I have done exactly what you taught, however, my rounded rectangle looks very sharp and the shadow is very small, unless I use Distance at step 2 to 130% :( . Help please? No matter what I have changed, the Review is not looked as same as ur

    Reply
    • textuts says:
      August 20, 2012 at 4:11 pm

      Do you mean the Drop Shadow “Distance” value? The problem might be caused by a very large rectangle size, or a very high resolution document (should be 72 not 300).

      If the problem is none of the above please feel free to add a reply.

      Reply
  17. Naresh says:
    September 4, 2012 at 7:22 am

    WOW……….. THANKS

    Reply
  18. Abdul Nayeem Khan says:
    September 27, 2012 at 6:29 pm

    I like the photoshop – scrabble-tiles-text- effect

    Reply
  19. C.J. says:
    October 31, 2012 at 4:41 pm

    Love the tutorial thanks… How Do you get that nice round shape on the tiles?

    Reply
    • textuts says:
      November 1, 2012 at 9:06 pm

      Do you mean the heart shape? It is one of the custom shapes that come with Photoshop. You can get it by selecting the Custom Shape Tool (one of the Shape Tools), then pick it from the “Shape:” drop down menu in the Options bar at the top.

      If you mean the tiles’ rounded corners, those are controlled by the Radius value shown in Step 2. Higher values create more rounded corners.

      Hope this helps :) Please feel free to add any other queries you have.

      Thanks a lot for the comment.

      Reply
  20. tyas says:
    November 12, 2012 at 4:22 pm

    i’m a newbie in photoshop.
    pls help. i have downloaded the texture (jpg format) but i couldn’t load it. it asked in psd format.
    i’m using cs3. it that really matter?
    thank you

    Reply
    • textuts says:
      November 14, 2012 at 4:58 pm

      The version doesn’t matter, you just need to load the .pat file, and not the images. You can check the Working with Palettes page to see how (just choose Patterns instead of Swatches).

      Hope this helps.

      Please feel free to leave any other queries you have.

      Reply
  21. Jennnifer says:
    December 22, 2012 at 11:42 pm

    What an excellent teacher you are! Thanks for being so generous with your artistry.

    Reply
  22. Kahn says:
    February 1, 2013 at 12:40 pm

    Almost with every tutorial I ever followed, I got stuck half way because the tutor skipped a crucial step or didn’t add proper screenshots.
    Even a simple tutorial sometimes takes quite some time to follow.

    With your tutorial here, It was really easy to follow step by step. The screenshot were very helpfull as well.

    Thanks a lot for your hard work!

    Reply
    • textuts says:
      February 2, 2013 at 9:03 pm

      That really, truly, means a lot.
      Very glad you found it helpful and clear.
      Thank you very much for the kind comment and for the support, appreciate it.

      Regards.

      Reply
  23. ozgu says:
    March 15, 2013 at 8:59 am

    Thank you very much! I have tried it and went well thanks to you! I appreciate your helps ^^

    Reply
  24. steph says:
    April 21, 2013 at 4:40 pm

    Hi, I’ve made this and such a great effect! :)
    But I just have one question if you don’t mind.
    How do I save full set of these tiles in a separate PSD file like you’re saying? And be able to use them separately?
    Thanks a mil! :)

    Reply
    • textuts says:
      April 24, 2013 at 4:18 pm

      You’ll need to create a tile for each letter, put it in a group, then save the PSD file that has all the tiles. Then, you can just duplicate and rearrange the tiles to create whatever text you like.

      Hope this clarified the idea. You can also buy the complete set for $3 here.

      Please feel free to add any other queries you have.

      Thanks a lot for the comment :)

      Reply

» Trackbacks/Pings

» Leave a Reply

(required)

(Will not be published) (required)