FAQ – Photoshop file edition

Photoshop file edition

When creating a Photoshop design,
is there any rules for layer tagging ?

Yes, there is. For how to choose the layertags, please refer to the "Tag list".
For more information about how to use the layertags please see the tutorial or the manual.

In what kind of case do we you div tag ?

If you did not set #section or #article blocks, it will set automatically a div tag.

In the case where the folder names and layers names
are in Japanese, what will happen ?

Layernames like "layer_1", "layer_2" will be automatically defined.

What will happen if I did not set the # on the folder or layers ?

By using div tag, the engine will output accordingly.

 

Do we have to rearrange layer name with tags for every layer ?
(e.g. For a layer called Layer1 what will happen ?)

If you let the layer names with special characters or foreign languages, the engine will recognize it and attribute automatically special names, so it will not become a problem.
However, if you would like to obtain the layer names/layergroup names as you intend, please define each layers.

Does it mean that I should rasterize
all of the layers that won't become text ?

If you do not use CSS3, you should rasterize all the layers exept text ones.
If you wish to output with CSS3, this will not be necessary.
For more information please refer to the "About the CSS3 generation" part of the manual.

Can I use rounded borders or text shadows for CSS3 ?

Yes, it is possible. For more information please check the "About the CSS3 generation" part of the manual.

What happen if I set layertags that are not valid ?

This will just not be interpreted, and it will be treated as an element out of the engine.
Also, special characters or foreign languages will be transformed into alphanumeric names.
e.g. A layer that will become an image and that have for layer name "レイヤー1", it will be transformed into "image1".
(Note: It does not mean that the name will be converted in english.)

if I set something like "abc#section",
will abc become the id or the class ?

It will become the classname.
By principle, if you set a name that is not id it will become a class.

If I wish to enclose header and footer in a wrap
or something else, should I create a folder accordingly
in the #wrap ?

That's it. If you close all folder in your Photoshop design and there only a #header#wrap#footer folder, it will become a structure likely to the question.

Can we use table tag ?

It is currently in development, so please wait a little bit more.
News concerning new releases and features are posted in the "New release" section.

How can I set an id ?

You can create a div id with the layername format #id{xxx} where xxx will be your id.
You can also combine with other tags, giving something like #id{xxx}#section or #id{xxx}#article.
For more information please refer to the manual.

If I want to create a link in a text,
how can I set the link destination ?

In a text, the part that are underlined will be automatically transformed into a link.
However, in order to define the link destination you will have to do it manually.

Can we set an onmouse state for menus or banners ?

It have been released as a new feature. To see how to do it check the "Onmouse" part of the manual.

How can I create a slideshow ?

It is currently in development, so please wait a little be more.
New features are posted in the "New releases" section, so please check it from time to time.

If I put a text as italic or bold, will it be interpreted ?

Yes, it will be taken into account. If it is set on the whole text, a CSS will be defined, and if it is set only on a part of the text, it will be output as "strong" and "em" markups.

What happens if special characters are used in a text ?
For example, characters like © or ♥.

It will be output as it is, as a normal text. It can be converted into special characters, so it may appear differently depending on the browser.

Can I use select box in forms ?

We are sorry, but it is not supported for now.

Can I use span tag ?

Yes, you can use it. If you change the color of a part of a text, it will be interpreted automatically.

Can I use hr tag ?

We are sorry, but as it have been depreciated since HTML5, it will not be supported.

Can I use tags like ol or dd ?

This feature is currently on development, so please wait a little bit more.
New features or updates will be posted in the "New features" section.

Is the conversion possible for design with clipping masks,
layer masks or vector masks effects ?

It is not possible. As explained in the manual, it is necessary to rasterize or combine the layers.

Will it work if I cut out the mask on the layer group ?

The conversion will fail. Please apply a layermask, or rasterize.
For more information, this is explained in the manual so please refer to it.

Do I have to respect the layer group order according
to the coding structure ?
If I make it in a different order will it work ?

This is not a problem. In any order it will appear nicely.

If I want to make multiple pages how should I proceed ?
How can I define the links if I want to make
a whole site with AUTOCODING ?

In the administration panel, set a Photoshop design as common.
By doing this, the #header and #footer that are described in this design will be ouput as common for all the files that are uploaded in the project.

If I want to output text as h1 or h2,
how should I proceed ?

When you are able to edit the text, by setting tags #h1 to #h6 you can create this kind of elements.

If I want to output h1 or h2 tags as image,
how should I proceed ?

You can do this by rasterizing the part you wish to make as image (the text will become not editable).
After this, you can set the tags #h1{the phrase you wish as alt text}, and it will become a h1 image element with an ALT attribute.

Do the line-height set in the text layer
will be interpreted properly in the output source ?

Yes, it will be output properly. Use it if you want to set intentionally a margin between paragraphs.

How should I use #fix and #flex tags ?

In the AUTOCODING administration panel, it is connected with the settings while creating a new project.
If you chose the "Fixed width" option, you can use the #flex tag.
If you chose the "Dynamic width" option, you can use the #fix tag.

■ Fixed width The entire page will have a width exactly the same than defined in the Photoshop design.
You can set any element that is inside this page to a dynamic width with the #flex tag.

■ Dynamic width The entire page will be output in the way that Photoshop design width will be interpreted as 100% of the browser width.
You can set any element that is inside this page to a fixed width with the #fix tag.

In which case do I use the #aside tag ?

You can use if for recommends like blogs, or where you want to add information refering to the main core.

What happens when there is a same classname more than once ?

A serial number will be automatically attributed.
e.g. if there is 2 topimage#section, the section will become topimage2

If I set #ul on a layer group, do all of the layers included
in this group will be interpreted as li tag ?

Yes. It will be automatically recognized and output as li tag, so no need to put li tag manually. However, for a list format like text marker image + text, you have to set the #image tag manually on the list marker.

When should I use #merge ?

#merge is for when you want to output many images or text layers as one image.

In what circumstances is the #img tag usefull ?

If you want to keep the text editable in Photoshop, by setting the #img tag, even after output the text edition will be possible so whenever you wish to edit the text, this tag is usefull.

Is is possible to implement a onmouse state ?

Yes, it is possible.
As for other tags definition, by setting exclusive tags, each link state (onmouse, active, selection) are possible.
For more information about how to use this method please refer to the tag list, or the "Onmouse link" part of the manual.

Is there a specific relation in the layer name order ?
(for example #alt or #link)

There is not any relation, so feel free to use them in the order you prefer.