?
Solved

How is this effect being done?

Posted on 2013-01-03
2
Medium Priority
?
238 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 70

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 31

Accepted Solution

by:
captain earned 2000 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Suggested Courses
Course of the Month15 days, 8 hours left to enroll

741 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