Photoshop Question posted in
The official user guide can be found here.

How to build a membership comparison overview? – Photoshop

I have a bit of an unusual question, but I’m stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.

enter image description here

Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?

Given that it’s still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).

Thanks a lot for any help!!

Tags:

2

Answers


  1. 0

    You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).

    Login or Signup to reply.
  2. 0

    The best you can do is to use bootstrap to reach this:

    <div class="container">
<div class="col-sm-3">
  <!-- Column one, detail list -->
</div>
<div class="col-sm-3">
  <!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
  <!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
  <!-- Column four, third membership option -->
</div>
</div>

    you’ll get a responsive well designed behaviour:

    https://jsfiddle.net/zzhs5w6n/2/

    The part that you marked in red are only images.
    You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
    Then, in the example, you must add responsiveness to this images, check the next complete fiddle:

    https://jsfiddle.net/zzhs5w6n/10/

    Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.

    Hope it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search