Photoshop or illustrator compositions into edge code

ok so I could have swore I saw someone in an adobe youtube video take an illustrator or photoshop comp and put it into edge code, which in turn wrote the css for him.. it looked like he made what his site should look like in Ai or Ps and then edge code interpreted it into code.. I am a designer and I can write a little code jus not to the extent of what I want the site I;m working on to look like.. is this possible???? or am I losing my mind??

Hi Kurt,
You might be thinking of this: Comp to Code Tool in Brackets – Brackets Blog
However, "PSD Lens" doesn't automatically convert the whole PSD file into CSS for you in one go -- it just helps you extract targeted styles like gradients and background-image assets while you write the larger-scale CSS structure yourself. If you're not very comfortable writing CSS yet (e.g. creating layouts with CSS), you might have a difficult time using this tool. Another option is to import your Photoshop file into Adobe Edge Reflow, use Reflow to create a resizable/responsive layout structure, and then export your project as HTML & CSS.
Hope that helps!
- Peter

Similar Messages

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate?

How do I include a drop shadow effect when I import an Illustrator vector into Edge Animate? It should be noted that I also have another effect (an extrude & bevel) applied which does copy over when I paste (or create an SVG and import) into Edge Animate. Any thoughts on why the drop shadow disappears but the extrude & bevel carries over?

Which version of Illustrator are you using?
In earlier versions of Illustrator it is not that easy to apply drop shadows with spot colours.
Another reason why it's always important to tell which version of AI … well …

Is Bridge CC, Edge Code CC, Scout CC comes free with Adobe CC and Illustrator CC??

I have just bought Adobe Photoshop CC and Adobe Illustrator annual subscription both single user. Now after I downloaded the installer CreativeCloudSet-Up.EXE
I noticed that Photoshop and Illustrator has a "INSTALL" buttons.. other application like AFTER EFFECTS has a "TRY" button..
My internet connection failed a couple of times during the creditcard payment.,, now my worry is, I saw the following application below with a "INSTALL" button..
Touch App Plugin
Gaming SDK1.4
Bridge CC
Edge Code CC
Edge Inspect CC
Edge Reflow CC
Exchange Panel
Extendscript Toolkit CC
Extension Manager CC
Scout CC
I do not know if these Adobe applications are FREE with Photoshop and Illustrator. Or did I bought them unintentionally and will be charge in my creditcard? Please someone.. answer me. Thank you

Since you have purchased single app for Adobe Photoshop CC and Adobe Illustrator CC so you shall be able to download, install & activate these two products only.
Regards
Rajshree

How do I create a text style in CC libraries? Every time I drag and drop text into library form Photoshop or illustrator it turns it into a graphic.

How do I create a text style in CC libraries? Every time I drag and drop text into library form Photoshop or illustrator it turns it into a graphic.
If I select the text layer and click the text style button in the library it just creates a new text style for Myriad Pro 12pt - I'm not using that anywhere in my document.
Can anyone help? Seems like a bug to me as I'm trying what the video tutorials are saying.
Thanks

I realize AI is an illustration program.
Do you realize it is an object-based vector-based program? Do you know the difference between raster-based and vector-based content?
My question seems to be all over the forum but no one has been able to answer other than exporting to these file formats, which make text look awful and of no use....
And yet everyone else in the world makes proper web images every day using a plethora of programs, including these...go figure.
Am I missing something?
Yep. Pretty much.
Hello Adobe! People use transparency on website logos.
Hello, cocteau! What you're calling "transparency" is inherent to object-based vector artwork. But web browsers don't support object-based vector artwork, except via file formats like Flash and SVG, or by viewing as a PDF in a plug-in version of Reader. Raster imaging in general only supports "transparency" by either indexing a specific color (i.e.; "don't display this color", as in GIF) or including an alpha channel (i.e.; "blend all the pixels with existing pixels, based on values from this extra channel", as in PNG). It's all in the raster file format you use, cocteau; it has little-to-nothing to do specifically with Adobe software. Such things are among the most basic matters understood by someone doing web design.
When I export an eps from .ai file, and open the eps in photoshop,...I save as a gif for the web, it goes back to the original problem...creates jagged text. I"m giving up on this garbage...Thanks a lot adobe! Lower the price of this software if this is all that can be done.
Once it leaves Photoshop (or Illustrator, or whatever) as a non-proprietary raster image format, it's all about what the format can do re "transparency". You can do this stuff with most any graphics program. You should read about basic web design and the differences between raster and vector content, rather than rant.
JET

Photoshop 3D image export into Adobe Edge?

Hi,
I am hoping to design an image / animation like the one shown below, in software (probably Photoshop), and then import this image into Adobe Edge for the user to interact with.
I have a few questions that I hope people could help with:
1. Should Photoshop be used if I am considering importing into Edge (File Size issues?)
2. Is Adobe Edge suitable to animate this design? - Why? (Note: I am looking for the pitch to rotate and stop at certain frames when user will click on certain links.
3. This is planned to be hosted on a CMS Joomla, where users will have access to certain animaitons based on membership (tiered) - Is this possible? - Why?
4. Is it wishful thinking to link Photshop, Adobe Edge and Joomla in this way (compatibility issues)?
Many thanks for any help, an answer would be a god send and I am sure would help many developers and designers out there also.
JG

Thanks again Station_two..
Mylenium, thank you for your feedback and you make some, no doubt, valid points based on years of experience. But your point (I know it sounds rude, but no harm intended!). stands out like a sore thumb. There are many of us who are trying to learn these skills and I amongst others am really trying my best to become an effective designer and/or developer.
Short and to the point: I have created a site in Joomla with a backend database which I am hoping to get onto my remote host soon. This site contains information on users with ACL for specific members. Dependent on the subscription the users of the site have paid for, will determine what access they have to various features such as animations, the animations that I have requested some help and advice on creating. I have basic actionsript knowledge which I believe will be needed in whichever software I choose.
I am looking for software that will allow me to create this image and animation and I'm guessing after scrolling through hundreds of pages that Photoshop may be the answer initally and then be able to animate in another program, adding interactivity within it.
Now, I may be "pretty clueless about web techniques on a more general level", but I think I have done OK so far, and need some help from more expreienced and skilled users like yourself to get this project off the ground.
I sincerely hope that I can get a more positive and helpful response.
Thanks.

How do I turn off the alt scroll zoom? When I'm in Adobe photoshop and illustrator using the pen tool, alt is utilized for another short cut. I would like to use the alt command for the pen tool instead of zooming into the screen.

How do I turn off the alt scroll zoom?
When I'm in Adobe photoshop and illustrator using the pen tool, alt is utilized for another short cut. I would like to use the alt command for the pen tool instead of zooming into the screen.

I tend to select things from left to right and every time I am moving in a downward right diagonal motion during lasso selection I am missing a clear view and I am tending to have a more sloppy selection. All this does is slow me down since I need to go back and hit those areas again. The big arrowhead just get's in the way. The original lasso tool with the thin line and small active point at it's lower left was far better for me.
I don't like turning the cursors to precise because I like to see the active tool icon where my cursor is and as the icon changes as I hold modifier keys down. If I am forced to get comfortable with using pricise cursors I guess I will, but man, I've never had to do this in my 15 years of photoshop use...
I would absolutely LOVE to find a way to get the old lasso icon -- without the arrowhead above it.
Is there any chance this option could be inlcuded in cursor preferences? I'd give much thanks, Adobe.

Import Edge Animate compositions into In Design

Hi, how do I import Edge Animate compositions into In Design..? Cheers
p.s. perhaps i should have added: my main interest is to have the animate project imported to have it load in the adobe viewer for digital publishing. up until now I'd linked the html overlay from the standard Edge app. One of the things that caught my eye under the features for Edge animate was:
Digital Publishing support
Import Edge Animate compositions into the Adobe Digital Publishing Suite with Adobe InDesign CS6, or into Apple iBooks Author.
How I proceed: as per the help/resources:
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
Select File > Publish Settings.
In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
Note or change the target directory.
(Optional) Specify a poster image.
Click Save to save the publish settings, or click Publish.
but all i get is
Content generation error.
[Error: Invalid URL for Web Content Overlay]

Here is a walkthrough on Adobe Dev Connectings - http://www.adobemarketing.com/devnet/digitalpublishingsuite/articles/enhancing-your-dps-fo lios-with-edge-animations.html
The only difference in that walthrough is the reference to in the Publish Settings: in Adobe Edge Animate v1, its now called 'Animate Deployment Package' instead of 'Indesign/DPS'.
Darrell

When I try to sign into photoshop elements I keep getting error code 400 connection error. I am connected to wifi and have no connection problems anywhere else. How do I fix this?

When I try to sign into photoshop elements I keep getting error code 400 connection error. I am connected to wifi and have no connection problems anywhere else. How do I fix this?

FRANK M
What computer operating system is your Premiere Elements 9 running on? I will assume Windows 7, 8, or 8.1 64 bit for now.
As for the Help Menu/Update way for updating, are you doing that with antivirus and firewall(s) disabled? If not, please do so.
Do you have the 9.0.1 Update of the program installed? What version of Camera Raw do you have installed?
Premiere Elements 9 is an older program where you can still do manual installs for that one and only Update. And, Camera Raw for 9 is no longer being updated.
For the 9.0.1 Update
http://www.adobe.com/support/downloads/detail.jsp?ftpID=4929
Camera Raw (last update possible for 9) is 6.5
Camera Raw-compatible Adobe applications
Adobe - Adobe Camera Raw and DNG Converter : For Windows : Camera Raw 6.5 update
Please review and consider the above, and then let us know the outcome.
Thank you.
ATR

My Content/text/code is being deleted when selected in Dreamweaver, Photoshop and Illustrator

FOr the past week when I select text in photoshop and illustrator, or code in dreamweaver, it is deleted. I've updated all apps and uninstalled and reinstalled dreamweaver but nothing seems to work. Is this an app issue or a mac issue? Its only happening with adobe products.

Have you asked in the specific forums for those programs?
If you start at the Forums Index http://forums.adobe.com/index.jspa
You will be able to select a forum for the specific Adobe product(s) you use
Click the "down arrow" symbol on the right to open the drop down list and scroll

Drawscript - turn Illustrator shapes into code

I've just launched a little extension for Illustrator I've been working on called Drawscript - http://drawscri.pt
It converts Illustrator shapes into code (Obj-C, C++, JavaScript, Processing, ActionScript 3, JSON, Bezier array).
It's great for skinning UIs, creating vector assets for gaming and learning/teaching vector graphics programming.
If you have any comments, found bugs, etc. Let me know here or on my Twitter, Facebook, Google+.
Thanks!
Tom

Tried it on a few old illustrator files of mine and noticed that 'Javacript Canvas' often seems to have problems.
Selected all objects: no output in Javascript Canvas window
Selected one brush stroke: no output. Selected another brush stroke made with the same brush: output
Selected a region: no output. Selected another region of strokes/objects: output
Shapes seem to work fine so I converted all brush strokes to fills: no output or it makes illustrator freeze with the 'rainbow' cursor
Drew 50 standard shapes like rectangles, circles, stars, selected them all: output
Drew 50 brush strokes all made with the same brush: no output
Converted those 50 brush strokes to fills as it seemed to have less problems with shapes: still no output
Other languages seem to have less problems, though sometimes it takes a while looking at the rainbow cursor. Standard shapes work the best and fastest. More complicated objects like brushes seem to give them more problems. For other languages it takes a while for them to give output. Javascript Canvas often don't give output on brush strokes at all. Also not when converting them to fills.
All things which are still worked on when the final version comes out?

Can anyone give me a detailed explanation of how to upload my Edge Animate Composition into Godaddy?

I have a godaddy.com Domain and hosting acc. I have uploaded my composition into the FTP File Manager for my domain. I placed them in the html folder GoDaddy has in there by default. All the files are included, as well as the edge_includes folder and the Images folder (Not that I have imported any..) and when i attempt to view the page I get nothing but an error 404 message. I attempted to place a regular html file into the folder to see if the issue was with godaddy.com but it worked just fine. Any help would be greatly appreciated as I need this site up within the next two weeks. Thanks in advance.

A thought:
You guys are 'uploading' or 'publishing' the files to the public_html directory yes? ... when you log into GoDaddy FTPs you are presented with a lot of backend folders ... you need to select the public_html folder then put ALL of your website files in that folder ...
Also ... delete the default files and put your new files up ...
cheers
GemBro

How to Unload and Reload a Composition into the same HTML page?

TLDR:
When loading multiple Compositions into a html page via AdobeEdge JavaScript, how do I remove/delete/unload a loaded composition so that it can be added/loaded to the same page again later? I am open to options not mentioned here, but this is done externally, not within Edge's limited code abilities (working with multiple comps on one page).
*Note: I am making comps in Edge then loading multiple within my own JavaScript/HTML external pages. This programming is NOT done within Edge's code.
Overview:
I could have more than 50 compositions to load into my page, but only one is displayed at a time. In order to make this easier on the user, I load 5 into the page in divs with display: none. I set the id of the first one to an id that has my css to show the content properly. When clicking next, that div is set back to an ID that has hidden css values. Going forward and back works the same. This functions properly. This puts all the obvious preloading in the beginning so the user doesn't have to wait again, as comps are preloaded in the background while they are viewing other comps.
As the user moves farther, I drop the first div and add one on the end with the next comp. This works fine. I can go forward all day, no problem by removing the first div element and adding one to the end. This should make memory not horrible, since theoretically, the comps would be removed as needed...
Problem:
The problem is if the user wants to go back. If I drop the last div and add one to the front, the comp (which was loaded and dismissed earlier) cannot be re-loaded. It also cannot be re-added, even if the div is cloned and re-added later.
This is the code I am using to load the comps:
$.getScript('comp_' + i + '_edgePreload.js', function() {});
Options:
The options I have thought of (and not found a way to make them work) in order of preference:
Fully unload the comp from memory, that way when I make the call to load the comp, it will act as if it has never been loaded before. (Is there a way to unload a comp completely? I haven't found one, but the API is sorely incomplete) **I want this one to work very much.
Ok, maybe you can't actually unload a loaded comp. Can you re-add it to a new div? I have printed out every option I could thru AdobeEdge's interface, and cannot find a way to re-make a div the way it was. Heck, I'd be happy to load the content into a non-child element in JS, then append to html when I actually want to display it. I can't find how to re-setup the div, which has the correct Class and is set up the way it was when the comp was loaded the first time. (this option is bad because it seems all of the comps are still in memory, but at least it would work)
Worst case, I have tried this and ALMOST got it to work. When I removed the old divs from the page, I cloned them and added them to an array of objects in JS. Then, when going back, I pushed them back out, so it was an EXACT copy of the original div, all content was the same, all id, class, style, etc was the same. Unfortunately, AdobeEdge seemed to lose the ability to talk to it. (AdobeEdge.getComposition('EDGE-MyUniqueIdentifier').getStage(); // returns undefined). How do I tell it to re-associate the div with the object that still exists here? And obviously, this is an awful solution, since it appears that all of the comps stay in memory, but I was desperate to simply make it work somehow.
If you need code examples of any of my attempts at the previous options (I have tried them all extensively, and unsuccessfully), I can provide it. I hope someone has found a way to deal with this or has links to actually useful information. Most posts I have found simply tell you to load all your comps and hide/unhide them as needed. This works for small-scale, but when you have a lot of comps to move between, it becomes less of a viable solution.

Exactly the same problem here. Could anyone from EDGE TEAM answer to this question?
How we can UNLOAD and LOAD same or another animation using SAME or DIFFERENT dinamically created DIVS?
Affter loading the second animation AdobeEdge.getComposition('EDGE-MyUniqueIdentifier').getStage() returns undefined.
Thanks for ther support.

Questions regarding: 1) Photoshop and Illustrator softwares 2) .eps file formats.

I'm using a DELL PC running Win7. I have Adobe Photoshop CS (i.e. the first CS version from 2003).
I do not yet have Adobe Illustrator.
I'm creating images for a science publication. It includes graphs, chemical structures, color photos of lab
equipment. I use ChemBioDraw (Cambridgesoft, http://scistore.cambridgesoft.com) to draw chemical
structures and schematics. I've been using MS Powerpoint to draw graphs, make composites of photos, label
panels, and add annotation.
1) The publishing company wants line drawings to be in .eps format. I can copy and paste ChemBioDraw
and Powerpoint figures into Photoshop and then save them in .eps format. They look identical to me when in
.eps format. Will this be suitable for publication?
2) The ChemBioDraw figure file size increases more than tenfold when converted to .eps format. Is this
expected?
3) I have used Photoshop a lot in the past but not for my recent work. My coauthor uses Adobe Illustrator on
a PowerMac G5-9.1. He creates .eps files for line drawings. Are the drawing tools in Illustrator much
better than those in Photoshop? If I get Illustrator will I be able to manipulate photo images (create
composites, add annotation etc.) as I have with Photoshop in the past?
4) My coauthor has sent me some .eps line drawings. When I open them with Photoshop there is a gray and
white checkerboard pattern in the background. I believe this is because the background layer has been
eliminated (the image is in layer 1). Can such a file be opened in a way that the background is solid white?
5) Is there a Windows-compatible software for viewing .eps files that is simpler than Photoshop or Illustrator (i.e. no editing
function)?
Thanks,
Thomas C.

1) No. Photoshop does not create true vector files. Anyone asking for an EPS more than likely wants a true vector EPS file.
2) No way of telling without seeing the results. But it could be perfectly normal. Increased file size in an EPS does not automatically mean there is a problem.
3) Illustrator is a drawing tool. The tools in Illustrator are designed for object-oriented vector drawing. In many respects they are better than Photoshop's tools for those type of projects. And No, you can not edit photographs easily with Illustrator. While you can include photos or raster items within an Illustrator file, Illustrator is not inherently designed to edit iamges at a pixel level.
4) Just add a new layer and fill it with white (or whatever color). Vector EPS files have no background.
5) If you have Photoshop or Illustrator you have Bridge. You can view files in Bridge. I wouldn't know of any other Windows software. It may exist, I simply wouldn't know.

Importing Illustrator layers into After effects, released to layers yet still one layer- ?

Hi,
Please bear with me as this should be a simple fix but the situation is hard to describe.
I want to import layers from Illustrator into After Effects. I need the AI layers to have their "handles" (the four corners of the object) close in around the object and not spread out to the corners of the composition. I figured out how to do this: by "releasing layers to sequence" in Illustrator and then dragging them out of the group they were all in. Then I "import as composition - retain layer sizes" into AE. When I open the illustrator composition in AE, it's layers appear in AE as separate layers and with the layer 'handles' tight around the objects (all is well). BUT here is what I want to do: I have a layer/object in Illustrator that I "image traced" to make it black but it still has some white parts to it. So I drew two black rectangles around the white parts. But now when I bring it into AE, they all appear as separate layers (the image traced object and the two rectangles) but I want those black rectangles to be literally part of the object that I image traced. In photoshop this would be akin to "flattening the layers". I can do this in AI by "merging" the layers, but if I do that I am brought back to the problem of having AE put the layer's 'handles' to the corners of the comp window and not tight around the object. Frustrating!
So I basically want to be able to paint over/cover up the white parts of my object without that creating new layers/objects.
Thanks for reading!
T

I'm not clear what you are describing. Have you actually tried other import settings in AE? There is some bug with the retain layer size stuff, but other combinations might work. Also try exporting a PDF of the artwork and using that. This may work better.
Mylenium

Edge web fonts non intégré (Edge Code)

Bonjour !
J'utilisais jusqu'à présent que Photoshop et Illustration pour les produits Adobe, et les outils du web viennent d'ailleurs. Aujourd'hui j'ai décidé d'abandonné notepad+ pour Edge Code qui m'a l'air très prometteur et surtout très confortable.
J'ai eu du mal à comprendre toutes les vidéos qui traînent sur le net car étant donné ma surdité, rien n'est sous-titré. J'ai tout réussi à comprendre sauf l'extension Edge web font. D'après ce que j'ai compris cette extension est déjà incorporée dans ce logiciel. Mais quand je clique sur "font-family" et ses polices rien ne s'affiche contrairement aux vidéos de tuto.
J'ai regardé dans la liste des extensions, c'est totalement vide. J'ai vu quelques réponses anciennes dans les forums qui disaient d'aller dans le dossier extension etc mais il manque le dossier edge web font justement. D'autre dit que c'est le firewall mais j'ai autorisé le programme en vain...
Bref je ne sais plus quoi faire et je vous remercie d'avance pour votre aide !

Dites, juste pour vérifier, parce que du coup j'ai mis le nez dans Edge Code / Brackets et cette histoire de polices, je voulais m'assurer qu'on faisait bien la même chose :
Dans le html, vous éditez le css d'une balise (cmd/ctrl-E)
dans ce css, vous saisissez font-family
Et là, vous cliquez sur Parcourir les polices web pour avoir accès au panneau
Est-ce bien ça ?

Photoshop or illustrator compositions into edge code

Similar Messages

Maybe you are looking for