Create a Jumbotron Effect in Photoshop

In this tutorial we are going to use Photoshop create a jumbotron screen effect like you would see at big sporting events, with the LED lights representing each pixel. We are going to use some patterns as well as some filters to create our effect.

What you will need

Adobe Photoshop

Baseball Photo

Face photo

Step 1

Lets go get a baseball photo and open it up in Photoshop.

I am going to add in “HOME RUN!” using Migra for my font (but any bold font will work). We are going to go ahead and crop the image around the batter and the “HOME RUN!”

Step 2

We are going to change the size of the image, by going into Image>Image Size. Change the width to 1200px in the top box, the Resolution to 72 pixels/inch and make sure all the boxes are checked.

Step 3

Now, we are going to merge the text and image layers together. Click on the arrow icon on the top right of the layers palette and click on Flatten Image.

Step 4

Go into Filter>Pixelate>Mosaic and change your Cell Size to 10. This should give the image a pixilated look.

What the 10 means is that the filter is making 10px squares to make up the image. This information will be important in the following steps.

Step 5

To get a “jumbotron screen” look we are going to change all of the square pixels into circles.

Since we made the squares 10x10px we are going to make a new document the same size so we can make a 10px circle. Using the Ellipse Tool (U) create a circle starting at the top left edge and going to the bottom right edge.

Fill the circle with white (if it isn’t already) by changing the foreground to white and fill with Alt+Delete.

Step 6

Click on the eye to the left of the layer to make the layer disappear and then go to Edit>Define Pattern and call it “10px Circle”.

Step 7

Go back to our baseball document and create a new layer (Ctrl+Shift+N).

Select the Pattern Stamp Tool (S) then select the pattern we made from the options at the top of the screen. Make sure Aligned is checked in the options at the top of the screen, then start painting in the entire document.

Step 8

Create a new layer (Ctrl+Shift+N) and make sure it is the top layer.

Ctrl and click on the pattern layer to select it. Now do Ctrl+Shift+I to get the inverse selection and fill the new layer with black. Click on the eye icon on the pattern layer to make it disappear.

Now you should end up with each circle having a single solid color, which makes up our photo.

Step 9

Click on the background layer that has the image, and then go to Image>Adjustments>Posterize. Change the levels to 10.

This will drop down the amount of colors being used to give it a lower quality “jumbo-tron” feel.

(Alternate Version)

Step 10

We can also create an old jumbo tron (a simplified version of the left screen in the photo) look by following roughly the same steps as 1-9.

We are going to need a higher contrast photo for this to work, so we will use a close up face photo.

Steps 1-6 will be the same. After step 6, before we add in our pattern we want to go to Image>Adjustments>Threshold. This will change our image from color to just black and white.

If we did the Threshold before pixelating the image, we would have had gray pixels along with the black and white, which we don’t want.

Step 11

Repeat steps 7 and 8 to get the jumbotron look. Finally we are going to add some color, to give it a yellow look. Create a new layer at the top of the layers and fill it with a yellow color, something like #FFD964.

Change the Blend Mode to Multiply.

Final

With a few finishing touches, here is what I came up with, and here is the full version.

Alternative Version

Here is the full size version.

Here is a text version

We can make your 70-648 success easy for you. Just subscribe for test-king online prep and get free access to up to date 642-357 plus 1Y0-A08 exam dumps.

  • Tweet




You might also like these articles...


Loading...


Only comments in English will be approved!

19 Comments

  1. 22/02/2022

    This is actually the same effect that is used on the inner sleeve for the new Mario video game for Wii. :)

  2. chotrul seo and design
    18/06/2021

    This is absolutely awesome. I’ve been wondering how this design technique was done - since seeing a TV ad the other week which had similar. Many thanks indeed for this.

  3. Curtis
    21/06/2021

    This is utterly amazing. The effect looks so cool in the final design. It served as an inspiration for my logo design. I got my designer from logodesignstation.com to design it based on some of the elements I liked and it turned out great. Many people were quite amazed at how good it looked. Thanks for posting this! :D

  4. Free online kids games
    28/07/2021

    Great tuorial. Will try it over the weekend.

  5. know now
    02/08/2021

    Step 5 not clear!

  6. GroupeDzigaVertov
    29/08/2021

    Thank you for sharing!
    Simple but effective tutorial.I loved these 8bit like taste.

    I’ve already tried it…
    http://superwarp.pa.land.to/photo/8bit-world/

    Thanks a lot:-)

  7. gobineitor
    18/09/2021

    Absolutely great tutorial. Thanks. From Argentina.

  8. sean
    29/01/2022

    step 8 isnt working for me?

  9. ray
    15/03/2021

    nice tutorial,..i really lyk it

  10. Doug
    27/03/2021

    @Sean: I also got hung up on Step 8, since there was a step missing in it. After you select the layer (have it highlighted in blue in your layers palette) switch to the Wand Tool (W). Click once and all the white dots that make up the pattern will be selected.

    Then select the inverse to get the marching ants around the inverse of your white dots. Select the top/new/empty layer, and fill the selection with black.

    Once I got by that, the effect worked great. Thank you.

  11. 29/03/2021

    In step 5 all you are doing is making a 10px x 10px document and making a circle with the ellipse tool.

    …thanks, I’m glad everyone likes the tutorial!

  12. Oscar Horimoto
    24/05/2021

    Hey webmaster ,MUST SEE! The most fun PlayStation games 2011 with inexpensive price.Click here for far more details http://bit.ly/kJqFch . You may not be disappointed.Best regards.

  13. Christine
    19/09/2021

    Great tutorial! Thanks!

  14. Pope
    08/10/2021

    Hello,
    Thanks immensely for taking the time to put together this tutorial. I only recently started using Photoshop, but I hope this tutorial will give me the information and confidence to design some nice themes.
    Cheers,
    Pope

  15. Authentic Jets Jersey
    10/12/2021

    You made a few great areas truth be told there. I was able to a web search on the subject and located primarily guys would have a similar impression with all your blog page.

  16. photo editing monitor 2010
    17/12/2021

    naturally like your web-site but you have to take a look at the spelling on quite a few of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the reality on the other hand I’ll surely come back again.

  17. Ressie Gaska
    17/12/2021

    I am forever saying that its difficult to get good help, but here is: canadian junk silver

  18. Comission Crusher
    19/12/2021

    The original Video where it was shown? was on TED. . look up [David Perry: Will videogames become better than life?]

  19. ebook gadget
    13/01/2022

    Loving the site and video. Keep it up.