Processing of architectural photographs. How to Create an Architectural Sketch Effect in Adobe Photoshop

This lesson is suitable for those users who prefer Archicad to other drawing programs. The method is designed for confident users. I will make a reservation that I will not explain the elementary functions of the main buttons and talk about the technology for constructing the drawing, but I will describe the process of converting it from a standard one to an interesting sketch one.

Handmade graphics always look attractive and are appreciated by customers. But what to do when she doesn’t large quantity time, or perhaps you don’t have drawing skills at the proper level, but the usual appearance of a drawing developed on a computer has become boring? In this case, you can depict it in sketch style, using a computer and spending a minimum of time on it.

List of programs involved: ArchiCAD 16, ArchiSuite from Cigraph (add-ons or plugins for ArchiCAD).

Files used when working on the lesson: https://yadi.sk/d/uaSmIBICk3vR2 https://yadi.sk/d/INTF5eXxk3vF2

Before you start working in the ArchiCAD program, you need to download and install on your computer a font suitable for our task: control panel > fonts.

It's time to open our drawing in ArchiCAD.

Let's do one more preparation. Click: settings > extension manager. We register the path to the folder with ArchiCAD extensions in the extension manager window. This way the program will surely find its way to them. The check mark next to the add-ons we need indicates their availability.

Let's look at the drawing. When constructing it, standard tools were used: walls, windows, doors, lines, arcs, hatching, axes, etc. You can choose the width of lines, color and transparency of hatchings to suit your own taste.

You only need to change the default font to the newly installed one. It looks more hand-written than strict Arial. Click on the “Text” tool in the toolbar on the left, then Ctrl+A to select all the text in the drawing and change its font at once (the “font” field on the information board at the top).

Select all sizes using Ctrl+A, and in their properties change the font to the one specified earlier. Let's repeat this operation with marks.

All preparations are completed and we move on to the process of artistic design of the drawing. Let's go: Design > Design Add-on > ArchiSuite > Show ArchiSuite Palette.

Press Ctrl+A and click on the pencil button in the newly opened ArchiSketchy submenu.

The Conversion Settings window opens, in which you can view the ArchiSketchy parameters.

At the very top you can choose one of seven proposed stylistic solutions. These can be options with induced or wavy lines, with bold hatching or bright fills. The choice is yours.

The next parameter is the amount of line release at the edges, i.e. the size of the “tails” at the corners. It characterizes the degree of emphasis placed on the ends of lines by lengthening them and is measured in millimeters. The standard value is 500 mm. You can play with it for best result taking into account the scale of your drawing.

We will select all the modeling elements to convert them into a sketch, but we can also exclude some, such as the font.

Adjust the colors of the feathers used.

In addition, you can change the style of the lines: replace straight ones with wavy ones, for example.

In a similar way, we change the hatching for different design elements: walls - one hatch, floors - another, etc., instead of the previously installed ones.

Under the icon with the letter “A” you can change the font, but this will be unnecessary, because... we excluded it from the drawing earlier.

You can also select a background for the picture that imitates paper or cardboard by clicking on Open Picture in the lower right corner.

When all presets are selected, click on “OK”.

After this, your cursor will turn into a hammer, and when you hover over one of the points, it will turn into a pencil. Double-click on it with this “pencil” and wait a bit for the system to make changes in the appearance of the drawing.

Now click on the free field on the side and admire the result.

The lines look as if they were drawn by a human hand, and not as if they were created by a computer.

Thank you all so much for your attention! I hope you will like this simple but interesting method of drawing up drawings and you will find the lesson informative.

Creating a beautiful image is a rather labor-intensive and time-consuming process, and pressing the shutter button is only a small part of it. If you're ready to learn how to take photos that are worthy of publication, then the material below will help you with this.

Every photographer faces the challenge of wide dynamic range, and architectural photos are no exception, although they often require only 3 frames. But the photo given in the example required 9 source images with exposure bracketing of -2, 0 and +2. Also, many photographers deliberately take a larger number of frames in order to get rid of people in the pictures.

Some tips:

  • shoot in RAW format, because the source should be of the highest quality and flexible when proofreading;
  • use low light sensitivity;
  • use one white balance value for the entire series of photographs;
  • Bring along the heaviest tripod and a remote control for the shutter button to ensure there are no vibrations.

Camera

Cameras like the Canon 5D Mark II are well suited for architectural photography, which in combination with, for example, a 17mm TS-E tilt-shift lens gives excellent results. It's a good idea to have a couple of spare optics with you. If the last element of your lens is convex and limits the ability to use a filter, exposure bracketing will come to the rescue.

Computer and monitor

The computer must be powerful, with sufficient random access memory(it’s not bad to have about 24 GB), because RAW images sometimes “weigh” up to a gigabyte. The monitor is calibrated before any serious correction for the best color reproduction and, as a result, an objective assessment of the image.

Importing images

For import, many people like to use Lightroom, iPhoto, Picassa and other applications, but professionals prefer complete control over the situation, which is what they achieve by manually importing images.

On-site, it’s convenient to dump all the footage onto hard drives, the material from which can later be transferred to a pre-created location. It is very convenient to think over a system of folder hierarchy, labeling images of different formats and sizes with corresponding names that you understand, such as bw - for black and white photographs.

Selection photos

A good workhorse for many professionals is Adobe CS5. Preview is most convenient in Bridge, where the files you have selected among all are marked on the right, and on the left, using a filter, you can display individually selected material.

Camera Raw

The camera settings in the example under consideration are set to zero. This makes it more convenient to work by setting specific values ​​for each new edited series of photos.

Some more tips:

  • Make sure you are working in the same color space as the camera. Adobe RGB is most often used. Use the highest quality sources; you can convert them to the format you need later;
  • Edit in 16-bit mode;
  • Set the white balance according to the most successfully exposed photo;
  • With hot pixels, the “Recovery” slider will help. When you press the + combination while moving the slider, you will see pixels on a black background;
  • If you were forced to push the return slider too far, compensate by pushing the Exposure slider up.
  • Use a similar algorithm when working with the black level to avoid crashes
  • Having selected all the pictures after the above manipulations, synchronize the white balance on them using the menu
  • The last step is to open all the images in Photoshop.

Working in Photoshop

The retouching algorithm in Photoshop is quite simple. So:

  • Combining exposure bracketed images into one
  • Joining the images that make up the panorama
  • Save in psd format our result
  • We use masks to further process individual parts of the photo
  • Save the image with all layers
  • We combine the sievs, if necessary, crop them
  • Working with sharpness
  • Save the new version in psd under a different name
  • Change to desired size
  • Convert the space to srgb and change the depth to 8 bits
  • We save it in raster format and use our own designations for convenience.

Manual layer blending

First, let's insert all the frames exposed differently into one project. Using File - Scripts - Load files into a stack (File > Scripts > Load Files Into A Stack) you can do this automatically.

Don't be afraid of highlighting and working with masks! The example shows the Quick Selection Tool. It is inaccurate at first, so it’s worth adjusting the selection area as follows: click on the “Refine Edge” button, in the View context menu at the top of the “Refine Edge” dialog, select “Overlay”. This enables the use of a red mask, convenient for viewing both the selection and the area not included in it.

Using the Refine Radius Tool brush, we will manually refine the edge of the selection by boldly moving the cursor with the brush over it. Click OK.

Create a mask by clicking “Add Vector Mask”. In the dialog window we see the appearance of a black and white miniature. Black is invisible, and everything else is missed by the corresponding layer's image. We create similar masks for all photo elements with which we will work. To avoid excessive rigidity, we will reduce the transparency of the various layers. This will also add flexibility to our method of working with image dynamic range.

Save, in your opinion, the correctly exposed version of your photo with preliminary merging of layers in the menu “Layers -> Merge Layers” (Layer> Flatten Image) and save as a Photoshop document.

Working with color and contrast

Here, another image is used as an example. Here you can clearly see the difference between the corrected and original RAW image.

Processing an entire frame while improving color and contrast in one part would lead to a worse situation in another.

Let's create layer masks:

  • Select the desired part of the main layer
  • Adjusting the edge of the selection
  • Copy the selection
  • Paste it as a new layer, giving it a clear name
  • In the same way we create several layers

Saturation

Select the working layer. Add an adjustment layer (see picture) to work with hue and saturation. In order not to go beyond the boundaries of our layer, be sure to click “Use Previous Layer to Create Clipping Mask”. Give room to your imagination, you can use filters to add warmth, etc.

To work with contrast, we can add a layer of curves. It is convenient to use the “Strong Contrast (RGB)” parameter (Layer > New Adjustment Layer > Curves… - select "Strong Contrast (RGB)).

Adjustment layers applied to one image can be conveniently grouped together using Layer Grouping (Layer > Group Layers). By turning this group on and off, you can see with your own eyes the effect of your manipulations. Tip: If you want to adjust the exposure by a stop, add a curves layer with an opacity of about 38%. To add stops, set the blending mode to “Lightening” (Screen), and to reduce them, set the blending mode to “Multiply”.

We use the algorithm discussed above for all layers of interest to us.

Photoshop lesson

Photoshop lesson

Photoshop lesson

Photoshop photo lessons

Photoshop photo lessons

Alignment

There are only 2 methods: the ruler, or the menu “Edit” - “Change” - “Rotate” (Edit > Transform > Rotate).

Cropping

Sharpness

  • duplicate image
  • Apply a color shift filter to the copy with a radius of, for example, 1.0. sequence of commands “Filters” - “Others” - “Color shift” (Filter > Other > High Pass).
  • set the Overlay mode.

Preservation

We combine all the layers into one and save the image under the next name in psd format. It is this file that you will work with later to resize the image for publication. When finally saving, we convert the space to srgb, and change the depth to 8 bits.

The algorithm is below:

“Image” - “Mode” - “8 bits/channel” (Image > Mode > 8 Bits/Channel)

“Edit” - “Convert to Profile” (Edit> Convert to Profile)

Creating an image is a whole process and for me, pressing the shutter is only a small part of the journey to a photo of sufficient quality to publish. In this article, which is part two, continuing the material, I will show my photo processing process.

All photographers face challenges with high dynamic range scenes. Landscape and architectural photography is no exception. I shoot as many frames as necessary to cover the entire dynamic range of the frame. For architecture and interiors, 3 frames is enough for most situations.

The photo above required 9 photos - with exposure bracketing -2, 0 and +2, as well as additional series for the lower half of the room and for the ceiling. Additional shots also help me get rid of people in the frame.

You must not forget...

  • Shoot in RAW to maintain maximum source flexibility; We're not sports photographers shooting a stream of images where JPEG is much more appropriate.
  • Hold on low level ISO.
  • Use one white balance setting for your entire series of photos.
  • Use the heaviest possible tripod and a remote release, wired or wireless.

The photograph of Canary Wharf tube station shown above is made up of three frames. The goal in this shot was to have a well-exposed dark interior, a bright metal escalator, and a surprisingly bright dome. Each layer contains a correctly exposed portion of the composition.

Main camera

My Canon 5D Mark II camera with a 17mm TS-E tilt-shift lens copes wonderfully with architectural and landscape photography tasks. I use exposure bracketing largely because the front element of my lens is convex and does not allow the use of filters. I also always have the EF24 f/1.4 and EF50mm f/1.2 lenses in my bag. My tripod is a bit strange - Gitzo legs with a Manfrotto ball head.

Computer and monitor

I do all my image work on a dual-core Mac Pro with 24 gigabytes of RAM. I often work with images larger than a gigabyte, so a large amount of RAM is a necessity. I have a Dell 27″ Ultrasharp monitor that is calibrated using a Spyder 3 Elite.

Before any important image work, I calibrate my monitor.

Importing images

I understand that many of you use various automation tools such as Lightroom, iPhoto, Picassa and others. Call me a Luddite, but I hate being left without control over the process, so I use a completely manual import procedure.

At the location, I merge the photos onto 2 hard drives and upon returning, I copy about 100 gigabytes of information at a time to a pre-prepared location. The folder structure shown on the left has served me well for 10 years now.

You may notice that my finished files are prefixed with a pixel size for different sites; at 500px - 900 pixels wide, and for 1x.com - 950 pixels. I also add "bw" to the filenames with black and white images. This naming system makes it easier to find the images you need on your hard drive.

Selection

Of the many photo apps I have installed, I use Adobe CS5 on a daily basis. It's reliable workhorse for working with images.

Previewing and selection is fastest in Bridge. On the right, I select the images that interest me. Once I'm satisfied with my selection, I use the filter on the left panel to show only what I've selected.

Camera Raw

If you're like me, you have all of your camera's settings turned off or set to 0. Here in Camera Raw, I make multiple settings for all of my photos designed to compose a single image.

  • Make sure you import your photos in the same color space as in camera. In my case, this is Adobe RGB, which is wider than the Internet standard sRGB. Work with the highest quality source, and then convert to a target format, for example for the Internet.
  • Edit photos in 16-bit mode
  • Select the best and most correctly exposed frame and set the white balance based on it
  • If there are hot pixels, use the Recovery slider to compensate. Press + simultaneously while moving it and you will see the position of these points on a black background!
  • If the “Return” slider had to be moved too much, compensate for this with the “Exposure” slider by pressing + again at the same time.
  • The same combination can be used when correcting the black level - raise the black level so that there are no dropouts.
  • Then select all the images and sync the white balance for all the images in the series via the menu in the top left corner.
  • Then open all the images in Photoshop

Working in Photoshop

I have a pretty strict workspace in Photoshop and the editing process is pretty simple.

I have a number of actions for different tasks, such as changing the size, color space, etc. The individual tasks I perform can be divided as follows:

  • Combining Exposure Bracketed Images into One Layer
  • Joining the images that make up a panorama
  • Saving a composed image to a Photoshop PSD file
  • Use masks to highlight parts of an image that require separate color, contrast, or exposure adjustments. An example would be treating the sky separately from the building in the foreground
  • Saving this image with all created layers
  • Merge layers and crop if necessary
  • Sharpening
  • Preservation new version finished image in Photoshop PSD format
  • Resizing to suit the intended use, for example up to 900 pixels for 500px.com
  • Convert to color space sRGB and 8bit color depth
  • Saving in JPEG format. Don't forget to prefix "900px" to the file name to make it easier to find later.

Manual layer blending

First, place your differently exposed footage into one project as layers. You can do this automatically through the menu File - Scripts - Load files into stack(File > Scripts > Load Files Into A Stack).

Many Photoshop users are afraid of using masks, selections, etc., but it's actually quite simple. I will show!

Choose the selection tool of your choice. I used the Quick Selection tool, marked on the left in the picture. Then press to add a selection and to remove it. As you can see, I have highlighted the correctly exposed dome of Canary Wharf tube station.

This selection is very uneven and it will be better if we make it smoother and more elegant. To do this, click on the button "Refine edge"(Refine Edge), also marked at the top of the picture above.

The red mask is very useful for viewing what is selected and not selected, but you need to enable this option. Click on the drop down menu "View"(View) at the top of the dialog "Edge Refinement" and select "Overlay"(Overlay).

We use the Refine Radius Tool brush indicated on the left. This will draw the edge of the selection and Photoshop will refine the boundaries of what should and should not be selected.

Increase the brush size in the option "Size"(Size) and generously “paint over” the space near the border. Walk along all the borders!

The edge of the mask looks much more gradient now! Click OK to save this selection.

Now we need to create a layer mask. The mask will make part of the layer visible and other parts invisible.

Click the button "Add vector mask"(Add Vector Mask) indicated in the figure.

You can see the black and white thumbnail appearing next to my layer thumbnail (below). Black is invisible. It's simple. Anything that is not black will miss the corresponding layer's image. In my picture, the dome mask is white, so only the dome will be visible. This is good because the layers below will remain visible in addition to the dome from that layer.

I went ahead and repeated the steps to create the mask for the escalator and dome surround, as can be seen in the picture below. Layers at 100% visibility are too hard, so I lowered the opacity of the dome layer to 80% and the escalator and dome surround layer to 70%. This takes a little more time, but is a very flexible method of representing the wide dynamic range of a frame.

An important takeaway from this section is the power and flexibility of layers and masks. I'll handle colors and contrast in the same way in the next section.

Merge your differently exposed layers through “Layers -> Merge Layers”(Layer > Flatten Image) and save as a Photoshop document. You now have a properly exposed version of your shot. A base to return to. This is useful if you then want to convert the photo to black and white.

Editing: Colors and Contrast

I will demonstrate this work with a still from Kolmanskop, Namibia. I superimposed the processed frame on top of the original to show the advantages of the RAW format for processing.

If you tried to process a given frame as a whole, it would probably be a mess and improving color and contrast in one area would worsen them in another. Working with individual parts of an image is closer to me and is achieved again with the help of layers and masks.

Creating image layers using masks.

  • Select part of the main layer.
  • Refine Edge
  • Copy selection
  • Paste it into a new layer, name it something clear
  • Repeat for any areas that require special attention.

I'll show my process for processing color and contrast using sand as an example.

Saturation

Select the layer you will edit. I selected the "Sand" layer. Add an adjustment layer "Hue/Saturation" like on a picture.

Check the box next to (Use Previous Layer to Create Clipping Mask) to limit your edits to the “Sand” layer only. You'll get a new layer with a little arrow pointing down to show it.

I selected the "Increased Saturation More" preset option.

The sand should turn warm orange, so I'll add another one. adjustment layer - Photo filter(Layer > New Adjustment Layer > Photo Filter), first selecting the “Sand” layer and not forgetting the checkbox "Use previous layer to create clipping mask"(Use Previous Layer to Create Clipping Mask).

I chose the Warming Filter (85), setting its density to 50 for a fuller effect.

Finally, I added a curves layer for contrast. Select the “Sand” layer and from the already familiar menu, add a curves layer with the “Strong Contrast (RGB)” parameter (Layer > New Adjustment Layer > Curves… - select "Strong Contrast (RGB))

At this point you should save the file with all layers in Photoshop Document format.

Alignment

I have 2 ways. Using the ruler shown on the left is very convenient and quick. It is enough to highlight an important horizontal or vertical line in the image. Or this can be done using rotate mode - “Edit” - “Change” - “Rotate”(Edit > Transform > Rotate)

Cropping

A simple task, but difficult to undo once the image is saved. So I recommend saving the file before cropping.

Sharpness

On the issue of choice best method There are many copies of sharpening that have been broken and I personally have tried probably all the methods, but in my opinion the most elegant method is the “High Pass filter” color shift method. The result is sharp, but without artifacts or unevenness. I do not sharpen after resizing.

  • Duplicate the layer via “Image” - “Duplicate”(Image > Duplicate)…
  • Apply a color shift filter. A radius of 1.0 is enough for a well-focused image of about 10-20 megapixels. “Filters” - “Other” - “Color Shift”(Filter > Other > High Pass)…
  • Set the blending mode to "Overlay"(Overlay).

Preservation

“Merge Layers” in the “Layers” menu (Layer > Flatten Image) and save as a new Photoshop document with the appropriate name.

You now have your edited image in full resolution. When you prepare a photo for publication or for participation in a competition, this is the version you will return to to resize, save in JPEG format and transfer.

Change of size

I reduce JPEG files to various sizes for Blogs, Flicker, 500px and 1x sites, and competitions.

Preservation

Final saving to JPEG requires conversion to sRGB color space and 8-bit color depth. These attributes are standard for the Internet. If you don't do this, your images simply won't look the same to other people as you prepared them on your computer.

  • « Image" - "Mode" - "8 bits/channel" ( Image > Mode > 8 Bits/Channel)
  • “Edit” - “Convert to Profile”(Edit > Convert to Profile)…

That's all, that's how it is general outline my photo editing process.

I'm about to do a part 3 on professional black and white conversion, so stay tuned!

Sometimes designers want to somehow “revive”, colorize the furniture plan in order to present it to the client in a more in an interesting way. Whether this should be done or not, everyone decides for themselves; opinions are divided. But if you want, say, a not so ordinary plan-drawing,

By the way, how do you like the layout? Lively, huh? Korean or Japanese, I don’t really understand.

For something more creative, then, as an option, you can do it in Photoshop. For example:

1.

2.

3.

4.

5.

6.

7.

8. 9.

10.

11.

12.

13.

14.

15.

16.

Several links to videos that show how to color plans in Photoshop:
Of course, someone who doesn’t know Photoshop at all won’t understand anything at all; if they only know the basics, they’ll understand, but not everything. But those who know the program more or less confidently will be able to learn something for themselves. Well, for those who don’t know Photoshop yet or are just taking their first steps, the videos can serve as an impetus to figure out some new techniques, if the topic is relevant.

In these videos, the result, of course, is quite primitive, but the principle and working methods are important here.

Advice for those who draw: if you are going to color the furniture plan in Photoshop, make it as clean as possible from any additional lines: do not put dimensions, callouts, etc. on it. BUT- even if you are not going to color anything, but leave the furniture plan as usual, advice - make one clean furniture plan for the presentation, without any dimensions, etc., do not spare one extra sheet. It is much easier for the client to perceive and evaluate the layout and furnishings if he does not have to peer into a jumble of lines and numbers, trying to understand what goes where. And it’s just more pleasant to look at such a plan. I didn’t come to this right away, but now I’m making 3 plans with furniture: 1 - clean, without anything unnecessary; 2 - with the dimensions of the furniture; 3 - with ergonomic dimensions. I can combine 2 and 3 if there are not many dimensional lines, but I definitely do a clean one and now recommend it to everyone.

Question for non-designer readers: Would you, as a hypothetical client, prefer to be given a furnishing plan for review in the form of a regular drawing or colored in some way? Which option would be more pleasing to the eye and more understandable to you (and do “more pleasant” and “more understandable” coincide)? If painted, what kind - bright, multi-colored? Or more subdued, with few colors and effects? Of those in the pictures, which one would you personally prefer? Or which one is absolutely not?

The mantra of today's existence is: “the more you share, the more you receive.” This is partly why websites appear on the Internet every day in unimaginable numbers, with different designs and on different topics. And the field of architecture does not stand aside. You might be wondering what's so special about architectural website design? Oddly enough, but a lot, and if only because these sites attract users to the activities of the company/person.

However, there are a number of misconceptions about architectural web design. Many webmasters, like the architect clients themselves, believe that such “creative” work should be presented on the Internet in an original form, unique and unusual. At the same time, if you look at the abundance of different thematic sites, they are created very, very close in appearance to the most common ones. Actually, it cannot be otherwise.

But here's the rub... What do these sites usually talk about? About the company's activities, projects are presented in photographs, there is a page with contacts, news, and a media section. In general, there is little content as such, and therefore they try to pay special attention to the design of the site.

Esoteric navigation

The very first mistake and misconception of the masters is a creative approach to navigation. Sometimes even leading architects have websites whose navigation is frustratingly incomprehensible. It seems that if they actually design the same way, then woe to the buildings that will be created. For example, project Illinois College of Architecture. It’s a serious and respected institution, but it’s a bit difficult to read the website quickly and understand where to click right away.

Here's a selection htmlinspiration I am ready to please you with a variety of architectural projects that look unusual and are created quite modern.

Returning to navigation, we note that for some reason there is an opinion among architects that using “mystical” navigation is cool! This is when the site has a lot of text and pictures, and only if the user moves the mouse cursor over them do they change and become a link. But users don’t always fail and look for these very links in the wrong way. It may work once, but then visitors will leave because the target audience architectural sites is different. They come to such a site for work, for business, for orders, for the opportunity to conduct construction, and not for long-term enjoyment of beautiful Hover effects. As an example, the site snohetta. It looks beautiful, but on a PC, until you move the cursor to the photo, you won’t know what it’s about.

Flash sites

In order to create esoterically beautiful websites with big amount effects and animation, many web designers resort to using flash. Yes, 10 years ago sites on it were popular and appeared like mushrooms after rain. But now flash can be replaced by other engines and technologies. Moreover, Google indexes such sites poorly, and this is a sign that the project on the Internet will not find its target audience.

SingleURL

The importance of specificity

Architecture is a very specific area, even narrow, so to speak. Therefore, trying to keep up with the “know-how” is not always necessary. It's even bad. Even if the customer wants to post a huge number of photographs of buildings or structures designed by him, the webmaster’s task is to select both descriptions and the correct number of them on the page - so that all this does not turn the site into mush.

Of course, you need to remember to constantly update the content at least once every two weeks. Successful sites provide value to audiences on a regular basis and provide something of a media flow. Accordingly, if the site is updated very rarely, then there will be no visitors. And you can update, for example, by replacing photographs, adding new ones, changing the story about an object and presenting it as news.

You ask: But why does a designer need to know this? Create a website and you're done. In part - yes, but when “drawing” the design, the master must prepare and draw in advance the necessary blocks, pages, sections, icons, etc., which will be used in the future for the development of the site.

And here are some examples of interesting architectural sites that have separate blogs, news feeds, photo galleries, individual pages and an abundance of special effects. At the same time, they look modern and not overloaded. Many of them were created a couple of years ago and are still known on the Internet, and they do not strive to change the design, because it is beautiful. AGi Architects, Bjorken Architects, Case 3D, jamesmerrellarchitects, snohetta, haririandhariri, architecture.

Photoshop and architecture

All projects have small beautiful effects, transitions, use of photo filters and more. But sometimes architectural bureaus present some photographs of their work in the form of drawings or outline drawings. This is easy to do in Photoshop, so today we’ll see how this can be created for further use in design.

Drawings are created from the front, side of the building or in a top view. Moreover, drawings and diagrams only show the exact layout of the house, and finished photos have multiple third-party details, reflections, light sun rays. Of course, if you have beautiful 3D vector objects in stock, then it’s easier to work with them. But what if there are only photographs? Try to have less detail and good focus illumination.

Open the image, create a copy and go Image -> Adjustments -> Desaturate.

We apply Filter -> Styling -> Edge Enhancement and we see a completely different image, which almost forms the effect of the drawing.

Applicable Inversion of colors. Blue drawings usually have Blue colour paper, so we will need to make a light drawing on a dark background. If you leave the background light (for example, pink graph paper), then your drawing should remain dark. And in the future, where we will use light colors, you will have to replace them with black ones.

Any photograph includes, in addition to the building itself, many unnecessary objects. These could be trees, bushes, people, cars, etc. All this is not on the drawings, so we will use the Pen tool and select the outline of our building. Place more dots and more or less carefully circle the house. Then right-click on the outline and select Select an area.

The layer must be active and with the object actively selected, click on the layers panel to add a Layer Mask. Your object is automatically isolated on this layer. Now, if you have extra parts inside the work path (like we have on the left side near the stairs), you select individual areas and use the Del key on your keyboard to delete them. The background will be transparent and the object will remain solid on the mask.

It's time to create a blue background. Create a new layer and fill it with a suitable blue color. The layer itself is placed under the layer with the working image. For the layer with the image (black and white), select blending mode -> Screen. This will make the black background transparent and leave the white lines on the blue background.

Let's add a stroke to the entire object. Double-click on the image layer and select in the properties window Stroke with white color, inside, but the width see what suits you best. We chose 1 pixel, but sometimes 5px is more convenient. Depends on the design and the quality of the contour cutting.

That's all with this document for now. Let's save.

Now let's do the mesh. Question: " What size should I create the mesh?? - controversial. It all depends on the scale of your image, the object, and your desires. Sometimes 80x80px is just right, but we chose 50x50px, and it also looks quite nice. If desired, you can create several layers with grids and make something like graph paper (small squares, large ones, very large ones). The principle of operation will be the same, but we will create one grid. To make it easier to imagine, draw a small square on top of your house and look at its size using a ruler in Photoshop.

Create a new document and set its size to 50x50 pixels. We increase the scale for ease of work and create a new transparent layer. Using the tool Selection make a selection 2 pixels wide/length on the top and left side and fill it with white.

Go to the menu Edit -> Define Pattern and save the result. That's it, you can close the document.

Let's return to our drawing and create a new clean transparent layer. Choose Fill tool and specify a pattern instead of a color and select our grid from the list. Now click anywhere and.. voila, the grid has appeared!

Drawings are usually framed, so select using a grid (and this has become convenient) around the object with small indentations, right-click on the selection and select Stroke with white color, approximately 5px.

Without removing the selection, click on it again and from the menu select Invert selected area and click Del.

The drawings are not always new, and besides, any paper, whatman paper, etc. have a specific appearance, very different from the digital analogue. You can lower the brightness of the grid and leave the image as is, or you can add a little more realism.

Add a layer mask to the mesh layer and, holding Alt, click on it. Thus, it becomes available for editing. We find any interesting texture of dust and scratches on a black background on the Internet and open it in Photoshop. Copy it to the layer mask. You can change the scale and rotate if necessary.

Remove the selection and our entire finished image will appear. Leave the mesh layer mask active in the layers panel and click Ctrl+L (Levels) and move the sliders so as to achieve maximum contrast. Towards black. You will see how the grid will take on a less strict and clear appearance. Select the option you like and click OK.

Now take the paper texture (for example, from here) and paste it onto a new layer. Let's desaturate and invert, as we did in the beginning with the original photo. Blend mode applied Screen.

Yes, that's all! The drawing on blue paper is ready. Please note that such drawings are often used in applications, video games, on websites, in various posts, etc., etc. And creating it is not that difficult.

The same is done on a light background, but the blending modes selected are not Screen (which lightens the background), but Multiply, Darken and others, which, on the contrary, make light dark. Moreover, choose a background color without a lot of white. Light pink will make it difficult for you to work with contrast and the result will no longer look like a drawing, but a hand-drawn one, which is not at all suitable in this case. Let it be a little darker.

conclusions

Architectural websites, in general, differ little in terms of styling from ordinary websites of companies, blogs, and tourism projects. But their main task is to attract the attention of visitors. Since the target audience of such projects is very specific, it is better to create effects for photographs, for transitions between pages, but not for the interface as a whole, not for links.

One way or another, architectural topics are, first of all, drawings. Various drawings on different types paper. Therefore, using them together with photographs of finished objects is never superfluous. Or vice versa, creating only the boundaries of objects that are shown in photographs. Webmasters are not always given access to original drawings. Yes, in fact, they are not needed on the Internet. But their similarity fills the site with content, at least making it a little more interesting.

Web design is a creative profession, and therefore looking for new opportunities and ideas is perhaps one of the most interesting moments.



What else to read