Jump to content

Recommended Posts

I have a png file of an image of tool I give away to prospective clients. I've attached it. Im looking for ideas to make it look more 3D on the page where I present it. I could probably do shearing and shadows but if you have any other ideas or picts of cool looking effects I'd love to see or hear about your technique. Thanks and Happy New Year.

SafeTalkNavigatorVisual.png

Share this post


Link to post
Share on other sites

The colours are a bit jarring to the eyes, the vertical dashed lines aren't aligned and the top one the dots are bigger than the rest of the vertical lines. The dashed lines colour is not working with the blue.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Simple combination of black, red and white?


Cecil 

iMac Retina 5K, 27”, 2019. 3.6 GHz Intel Core 9, 40 GB Memory DDR4, Radeon Pro 580X 8 GB, macOS,iPad Pro iPadOS

 

Continuous improvement is better than delayed perfection 

Share this post


Link to post
Share on other sites

Im ok with the layout even though its not perfect. Im looking for ideas on how to present it on a page where someone is going to give me their name and email.  Right now Im investigating how to do shearing and maybe do something to one of the edges. Would be nice if I could "curl" up and edge. Something to give it more of a 3 D look suspended in space.

Share this post


Link to post
Share on other sites

Adding a shadow under the icons would probably help lift the icons off the page

 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Added a drop shadow to the magnifying glass?

237284215_ScreenShot2020-01-02at20_11_03.png.36e32198cd5f69a407c0b5886bef9226.png


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Yes I really like the drop shadows. The problem is I created this originally in Canva because its a derivative of a template they have already designed which save me a ton of time. Then I wanted to enhance it in Affinity Photo or Designer. I checked Canva and they don't have a feature to add a shadow to the icon. Thanks though. Mainly looking for ideas on how to make the image pop on a page. 

Share this post


Link to post
Share on other sites
39 minutes ago, GentleGiantEd said:

Yes I really like the drop shadows. The problem is I created this originally in Canva because its a derivative of a template they have already designed which save me a ton of time. Then I wanted to enhance it in Affinity Photo or Designer. I checked Canva and they don't have a feature to add a shadow to the icon. Thanks though. Mainly looking for ideas on how to make the image pop on a page. 

We may be talking at cross purposes here, is this what you mean?

Background@0_5x.thumb.png.5a4129f598b9147ec8b5d5ebfa7ba7d5.png


MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.9.1 | Affinity Photo 1.9.1 | Affinity Publisher 1.9.1 | Beta versions as they appear.

Share this post


Link to post
Share on other sites
2 minutes ago, Old Bruce said:

We may be talking at cross purposes here, is this what you mean? EXACTLY can you film or tell me how you did that? Is there also a fairly simple way to angle it so it's pointing to the right and back some? I will use this over and over again. VERY cool!

Background@0_5x.thumb.png.5a4129f598b9147ec8b5d5ebfa7ba7d5.png

 

Share this post


Link to post
Share on other sites

Change of Icon colours?
1009479098_ScreenShot2020-01-02at21_00_04.thumb.png.d4b8bdb2cc933f54ddd416ca353f7b21.png

1100633289_ScreenShot2020-01-02at21_01_22.png.59257c034d6b40ef308d4424a29ffae3.png 648539234_ScreenShot2020-01-02at21_01_04.png.931c1fa311bce49d1d62bc88e6423181.png


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

The contrast ratio is not good and I find the color unappealing together. If it was a web page or app you wouldn't pass any WGAC accesibility requirements. Not a good sign in any case. Just compare the contrast and pop from the webpage below with the design and colours I understand you can't change too much. 

image.thumb.png.102e134df5d4841c96cd3f04edf106b5.png


  • "The user interface is supposed to work for me - I am not supposed to work for the user interface."
  • Computer-, operating system- and software agnostic; I am a result oriented professional. Look for a fanboy somewhere else.
  • “When a wise man points at the moon the imbecile examines the finger.” ― Confucius
  • Enjoy waiting for Godot. 

Share this post


Link to post
Share on other sites
1 hour ago, firstdefence said:

the vertical dashed lines aren't aligned

... and the space between "Step" and the number (04, 09) is not the same.

Icon style is inconsistent - most are black lines with purple fills, but two are only purple.


Affinity Store: Affinity Suite (ADe, APh, APu) 1.8.5.703.
Windows 10 Pro, Version 20H2, Build 19042.610.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200.

Share this post


Link to post
Share on other sites
10 minutes ago, Jowday said:

WOW where is this URL. Invaluable. Didn't know this existed. Back to the drawing board! sure appreciate your input.! I think now I will research colors that go well together!

Ed

 

 

The contrast ratio is not good and I find the color unappealing together. If it was a web page or app you wouldn't pass any WGAC accesibility requirements. Not a good sign in any case. Just compare the contrast and pop from the webpage below with the design and colours I understand you can't change too much. 

image.thumb.png.102e134df5d4841c96cd3f04edf106b5.png

 

Share this post


Link to post
Share on other sites
2 hours ago, GentleGiantEd said:

I have a png file of an image of tool I give away to prospective clients. I've attached it. Im looking for ideas to make it look more 3D on the page where I present it. I could probably do shearing and shadows but if you have any other ideas or picts of cool looking effects I'd love to see or hear about your technique. Thanks and Happy New Year.

...

Which program are you using, I did my clarification image with Photo. If you don't have that it would be another example using Publisher and sadly I doubt you can do the exact thing in Designer.


MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.9.1 | Affinity Photo 1.9.1 | Affinity Publisher 1.9.1 | Beta versions as they appear.

Share this post


Link to post
Share on other sites

iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites
14 minutes ago, Old Bruce said:

Which program are you using, I did my clarification image with Photo. If you don't have that it would be another example using Publisher and sadly I doubt you can do the exact thing in Designer.

Using Either . Have both programs. thanks

Share this post


Link to post
Share on other sites

Caveat: The Mesh Warp is destructive so do the work on a copy of the original.

This is from Photo but you can do the same in Publisher using the Photo Persona.

You'll need to play around with the Mesh Warp Tool in Photo to get the corner lift to your liking.Set up  Double clicking on the (imported and rasterized) image will give you more nodes to play with, use the handles (the round things) to change the curve and move the node (the square things) to where you want it.

Then apply a drop shadow using the layer fx Outer Shadow. Shearing can be done before or after using the Transform Panel or if you hover near a side handle whilst using the Move tool you will see two parallel arrows pop up you can then drag to shear and the same can be done on the top/bottom edges.


MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.9.1 | Affinity Photo 1.9.1 | Affinity Publisher 1.9.1 | Beta versions as they appear.

Share this post


Link to post
Share on other sites
1 hour ago, GentleGiantEd said:

WOW where is this URL. Invaluable. Didn't know this existed. Back to the drawing board! sure appreciate your input.! I think now I will research colors that go well together!

Happy to help @GentleGiantEd

Accessibility is not only for people with obvious or severe disabilities - excellent colour contrast will help the elderly and people with even just a  slightly degraded vision. That will happen for most people around 40 - especially in low light. Further - the easier it is for the eyes to decode a text or design, the better. You want to get attention and to keep it. So the color contrast thing alone is key. It is not only an accessibility issue - it is also greatly connected to usability. Did you ever try adjusting a black hifi system with labels set with gold letters ... in low light? Fail. I helped some elderly with their HIFI systems etc... had to put homemade stickers on buttons before they could actually see it and USE it. "What fools made it so dark?" they asked. 

General info here:

https://www.w3.org/TR/AERT/

https://www.w3.org/WAI/standards-guidelines/wcag/

I used this one for the image and tried with different text colors:

https://www.brandwood.com/a11y/

But you can simply google "color contrast checker wcag" and play with HEX values fx here:

https://webaim.org/resources/contrastchecker/

 


  • "The user interface is supposed to work for me - I am not supposed to work for the user interface."
  • Computer-, operating system- and software agnostic; I am a result oriented professional. Look for a fanboy somewhere else.
  • “When a wise man points at the moon the imbecile examines the finger.” ― Confucius
  • Enjoy waiting for Godot. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.