Solved

How is this effect being done?

Posted on 2013-01-03
2
221 Views
Last Modified: 2013-01-05
On the Fox News app, every news item is separated with a background image that consists of a gradient topped off with a line / divider at the top.

I get the gradient, but every time I attempt to duplicate the line at the top, I get something less than what they appear to be doing.

Is it an effect? Is it embossed somehow?

I'm hoping there's some ninja out there that can recognize the technique that's being used and then tell me what it is so I can replicate it on my app.

Thanks in advance.

Screenshot of app is attached.screenshot
0
Comment
Question by:brucegust
2 Comments
 
LVL 69

Expert Comment

by:Merete
ID: 38742930
Hi,
until the true experts come in, my thoughts,
I believe they probably used a combination of things, tools may be fireworks,
also if the web page was created in CSS using for example a template from Joomla
http://www.shape5.com/
http://www.artisteer.com/?p=joomla_templates
Do you mean the top bar? Button like effect with a clear button layer over the top?
something like these is the basics of it' but it probably includes CSS
http://dhtmljavascriptmenu.com/how-to/javascript-disable-menu.html
http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/
http://www.icoblog.com/2008_07_01_archive.html
http://www.skinyourscreen.com/site/Articles/creating-a-stylish-button
http://line25.com/tutorials/css-basics-how-to-design-code-a-stylish-button


If you want to take a look
 open the web page internet explorer and view >source.
0
 
LVL 30

Accepted Solution

by:
captain earned 500 total points
ID: 38743883
Well, I think they used a very small bevel on the gradient to make it look like a floating tile, the line looks more like they simply have a 1px space between the tile and use the grey background to do the magic.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
This video will demonstrate how to find the puppet warp tool from the edit menu and where to put the points to edit.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now