Photoshop Map Art Wheaton IL- Wood Texture Style

Photoshop Map Art Wheaton IL- Wood Texture Style


Hello, this is Jeff at Magical Fruit Tuts
In this Photoshop tutorial we will stylize a map of Wheaton, Illinois. We will use the Wood Texture map style. I also will demonstrate how to use Place Linked
to quickly turn the map into different looks using a gold texture
and using a bamboo texture. If you not yet done so, you should view the
“Photoshop Map Art Basics” tutorial on this channel for instructions on how to make the
Basic Map and to export it to a Photoshop psd file. First you should create a basic Wheaton map
using the open source TileMill program and the Mapzen.com Metro-Extracts downloads to
retrieve the map data files needed For Wheaton I used the Mapzen Metro-Extracts,
to get the Wheaton, USA – locality extract. Then downloaded and uncompressed the Chicago
Metro Area shapefiles Notice that when you downloaded the Chicago
metro area in mapzen, where Wheaton is in relation to the the area
to be downloaded. If you have a problem displaying Wheaton in
Tilemill, see the example at the end of the Photoshop
Map Art tutorial on this channel. To make it easier for you, I have placed the
Carto CSS code for the Wheaton Basic Map in the desription area for this tutorial. Make these changes to the Basic Map code if
needed: I did not use any water layer as there are
no major water areas in Wheaton large roads, change line-width to 2,
small roads, change the line-width to 1.5, no airport runways code needed for this city Open up the WheatonBegin Photoshop file. Right Click and Rasterize the Wheaton Streets
layer You may want to crop your image for easy framing. The City image is essentially square
Open your crop tool set to square, with 1 to 1 ratio and adjust the crop so the map
is centered in the area. Make sure to leave room on the bottom for
the city name text. Click the big checkmark to accept
Now bring the cropped area up to the original 4000×4000 pixels that we want
Chose Command or Control plus Alt or Option Plus I for the image size dialog
Change the width to 4000 pixels, the height should automatically change
Rename the Layer1 layer to “City” name the wheaton streets laye to “Streets”
Move to the city layer Make a new layer below the City layer by holding
down the Control or Command key while clicking the add new layer icon on the
bottom of the layers panel. Name the layer Land
Save the file as Wheaton as we want to have WheatonBegin available in case we need to
start over again With the Land layer active,
Change the foreground color to #3e93ca Press Alt or Option plus Backspace to fill
the land layer with this color to make the city stand out better against it This map is not meant to be accurate, but
an artistic representation. So next we will simplify the city shape
Make the City layer active Turn off the eye of the Streets layer
Open up a standard hard brush Alt or Option click the city yellow to sample
the color Start simplifying as demonstrated
Fill in areas mostly surrounded by city proper These areas are usually unincorporated areas
that are not officially part of the city but are contained mostly within in it. Here is the result after these changes. add a stroke layer style
increase its size to see if any problem areas show up
If they do,you probably missed an area or two
just zoom in and paint over the problem areas with a brush
right click on the effects and select clear layer style Next, add a mask to the city layer
Use a black brush in the mask to remove any little juttty city boundaries
or smooth out indentations Or you could use the polygonal marquee tool. Select the area then press Alt or Option Backspace
to remove the selection. Deselect. The city shape should look something like
this when you are finished. we want the shape to end up smooth and have
no sharp angles Next to make the streets white
Make the Streets layer active and turn on its eye
Control or Command Click the thumbnail
your background color is white so press Command or Control plus Delete to fill the streets
with white De-Select
Control click the City Thumbnail to select the city area
select the Add Layer Mask icon at the bottom of layers panel
Now the city streets layer has only the streets inside the city showing Next we will outline an empty border around
the map on streets layer your mask should still be
active control click the Streets mask
select modify contract 36 pixels go back to streeets mask
inverse Alt or Option plus Backspace to fill with
black Deselect
now use a black brush in the mask to clean up small street areas partially removed as
shown Here is the image after cleanup Next, let’s get the wood texture set up. open a document
choose the wood texture, a link is in the description area
choose the crop tool at a square 1 to 1 setting. adjust as desired. click the big checkmark to accept
unlock the background layer Choose Command or Control plus Alt or Option
plus I for the image size dialog change the resolution to 300 pixels per inch
change the width to 4000 pixels Move to the hand tool
Save the image in your project file as squarewood.jpg close the image Open back up the Wheaton map
make the Land layer active Choose file – place linked
Choose the SquareWood image Press Enter
Delete the land layer as you don’t need it anymore
Control or command J 3 times to make 3 more linked copies of the SquareWood image
Rename copy3 to Text Wood Rename copy2 to StreetWood
Rename copy to CityWood Rename the SquareWood Image to land wood
Move the city wood layer above the city layer add a Color Overlay layer style to it
Blend mode Darker Color, Opacity 18% the color box should be black
Right click and chose create clipping mask Next to style the city
Make the city layer active Here is the city after adding layer styles
Some of the important Bevel and Emboss settings used were:
Style: Inner Bevel Technique: Smooth
Depth: 334% Size: 18 pixels
Angle: 120 degrees Altitude: 10 degrees Some important Drop Shadow settings used were:
Opacity: 57% Angle: 120 degrees
Distance: 21 pixels Spread 7 %
Size: 7 pixels and Contour: Linear Next to style the streets
Move the street wood layer above the streets layer
Make its opacity 55% Clip it to the streets layer,
Add a levels adjustment layer to it click the clip to icon
change input levels to 97, 1.57, and 231 Make the streets layer active
Here are the streets after adding the Bevel & Emboss layer styles
Some of the important Bevel and Emboss settings used were:
Style: Inner Bevel Technique: Smooth
Depth: 178% Direction: Down
Size:5 Angle: 120 degrees
and Altitude: 10 degrees Move to the top layer
Press T to Open the Text Tool choose the centered text option
I used Pump Demi Bold LET font at 80 points Strong
open the character panel If you dont have one choose Window, Character
from the menu Select the Tracking dropdown
and select 75 Type your text below the city
Press the big checkmark to accept Right Click the City layer and choose Copy
Layer Styles Go back to the Text layer and right click
and choose Paste Layer Styles Adjust the drop shadow style distance to 16
and opacity to 60% On the Bevel style, Adjust the depth to 178
and the size to 10 Next drag the Text Wood above
the text layer clip it to the streets layer
hold down the alt key while dragging the color overlay style from the city wood layer onto
the text wood layer Let go of the mouse
make the text layer active to center the text as needed
select the move tool use the up and down arrow keys to adjust the
city text vertically press control or command plus A to select
all click the align horizontal centers in the
options ribbon deselect
choose the hand tool Before we make final adjustments in Camera
Raw I will show you why we Place Linked the wood
texture Make the Text Wood top layer active
Right-Click and choose Relink to file point to your project file
I have made a few different square texture files in the project directory
They are all the same size and resolution as the original squarewood texture we have
been using. Here I have selected the gold texture file. Notice that all the instances of the original
squarewood texture have now been replaced by the gold texture. Now to repeat the relink again
this time choose the Square Bamboo texture now repeat the relink again
and choose the original SquareWood texture now we are back to where we started. Next, We will make final adjustments in Camera
Raw Move to the Text Wood layer
Press Control Alt Shift plus E to make a snapshop right click and choose convert to smart object
Choose Filter – Camera Raw I used theses settings
tempurature: minus 14 Tint: minus 8
shadows: plus 1 clarity plus 13
and virbrance plus 12 Next click the Tone Curve icon
Change the lights to plus 6 click ok to save your settings
this concludes the tutorial, hope you’ve liked it
Here is the final image Coming soon, Downtown Chicago
Using the modified cut-map style

One thought on “Photoshop Map Art Wheaton IL- Wood Texture Style

Leave a Reply

Your email address will not be published. Required fields are marked *