Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree1Likes
  • 1 Post By Fireproofgfx

Thread: Trying to recreate something. I need help.

  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    2
    Member #
    50870

    Question Trying to recreate something. I need help.

    I'm trying to recreate a web page I found and would like to get some advice on recreating it in Photoshop.
    Here is the link to the page I want to mimic and a small screen shot of it as well.http://www.laymarie.net
    webpage-fav.JPG
    I will be working with two images. I started out blending the two images together using the marquee tool to select the portion I want to blend, added a layer mask, then inserted it onto the other image. I then selected my layer mask and used feathering and the warp tool to fade the image into the other. Now my question is, do I add the blue as an overlay then continue fading the other images, or?

    Just need to know if I'm heading in the right direction or is there a better way altogether? Any help would be greatly appreciated.

    Thanks
    Keri
    Last edited by geekgirl75; Jul 07th, 2015 at 11:27 PM.

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    There are going to be lots of different ways to do things with photoshop and for the most part its only "wrong" if the result isn't the one you were going for.

    If i were to recreate this image exactly i would crop the person out and use a gradient map to make the lights a light blue and the blacks the color of the background. Id leave the person cropped and alone on a png with no background and i would add the background using html and css. Same for the text. It wouldn't take long i think i could knock it out in about a half hour or less depending on how well the photography works with the concept. Depending on the photo you chose you may have more work to do.

    Like i said though, there is no wrong way of doing it if you end up with the result you were looking for. The reason id separate the image from the text and the background is more for web by making the image smaller and not having to complicate trying to match colors. If you aren't worried about that aspect then you would do it all in photoshop.


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member
    Join Date
    Jul 2015
    Posts
    5
    Member #
    50881
    Quote Originally Posted by Vapr_Arts View Post
    There are going to be lots of different ways to do things with photoshop and for the most part its only "wrong" if the result isn't the one you were going for.

    If i were to recreate this image exactly i would crop the person out and use a gradient map to make the lights a light blue and the blacks the color of the background. Id leave the person cropped and alone on a png with no background and i would add the background using html and css. Same for the text. It wouldn't take long i think i could knock it out in about a half hour or less depending on how well the photography works with the concept. Depending on the photo you chose you may have more work to do.

    Like i said though, there is no wrong way of doing it if you end up with the result you were looking for. The reason id separate the image from the text and the background is more for web by making the image smaller and not having to complicate trying to match colors. If you aren't worried about that aspect then you would do it all in photoshop.


    Sent from my iPhone using Tapatalk
    Plausible points are on this reply.

  5. #4
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    Just like Vapr said there are so many different ways to achieve the end result. Below I didn't this in 3 minutes with only Two layers. Open a new transparent Canvas, add the picture you want as the bg image, erase around the edges using a soft brush and I recommend lowering the flow to 75% so its even more softer. Then create a new layer fill with #3283de (blue) set to screen. Add your Text and you are done! If the image in the background is too dark or too bright then tweak the curves (CTRL - M) to your liking.


    Vapr_Arts likes this.

  6. #5
    Junior Member
    Join Date
    Jul 2015
    Posts
    2
    Member #
    50870
    Thank you. Your image is exactly what I'm trying to accomplish. Does the bkg image need to be black and white to achieve this?

  7. #6
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    I started with a blank transparent BG. If you use a white or black BG it will change the end result, since you are setting the Blue Layer to SCREEN to blend over the Image, it will make it like a bright Teal on a White BG. So use a transparent BG.

  8. #7
    Junior Member
    Join Date
    Nov 2017
    Posts
    7
    Member #
    57728
    If that text that goes over the image is going to move depending on browser size or if it changes when scrolling through the website, I would make the image just a transparent white with some masking to give it that feathering effect, but if it's all one solid image, you could use a blue overlay over the content of the image, but no need for a blue background, because if that's going to be the color of the whole page, you may just want to use a PNG image for the website, and have a transparent PNG with that kind of look to it. I recommend adding a background layer with the same blue color and then experimenting with the image on top to give it the same effect, maybe use Blending Options > Color Overlay with the top layer to give that slight bluish tint. Then remove the blue background and just save it as a PNG with some transparency, because then it will work on the website if the size changes for example.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com