A Web Developer’s Guide To Adobe InDesign

Advertisement

Over the past several years, there has been a big divide between designers: those who work in print distribution and those in digital distribution. The irony is that, despite the disputes, name-calling and flat-out arguments between the two camps, their techniques and methods are far more common than many believe. Both sides of this communications field are heavily influenced by each other. Grid systems and typography now play a strong role in Web-based design, and usability and user experience play a big part in developing print material.

Adobe InDesign is the primary application of print designers for laying out multiple pages and assembling print documents. This article gives you, the Web-based developer, a look at some of the tools in InDesign that translate directly into what you currently use. We’ll look at how the terminology in the two fields compare and how to apply your expertise to this other industry.

Jumping Right In

Folder Structure

As with any Web development project, organizing from the start ensures that you will have minimal problems with the files later on. Similar to many website root folders, InDesign gives you a main document folder and a resources folder:

Folder Structures1

Above on the left is my folder structure for InDesign, and on the right the folder structure for my website. They are so similar that, if not for the different file extensions (.indd and .html), they would be practically the same.

Setting Up the Document

Setting up an InDesign document is similar to setting up a mobile website. You specify the height, width and purpose of the document. For print-based items, set the “Intent” to “Print.” If you will be using the file for an eBook or digital publication, then specify “Web.” If you will be using the document for both, then specify “Print” to ensure that the colors are maintained properly.

Highlights of InDesign’s New Document Window2

The margins in InDesign are guidelines that are positioned on the page and are not like Web margins that affect objects on the page.

Your Main Tools

If you’re familiar with Photoshop and Illustrator, then you are used to finding the main group of tools on the left side of the workspace, at least by default. InDesign is the same. The way you interact with and build objects on the page, though, works slightly different than Adobe’s other design software. Containers are needed in order to place images, vector objects and textual content on the page.

You can import vector objects directly into the document, but you will usually be importing files into content boxes that you position in the layout. This should come easily to you because Web design operates on the same principle: creating DOMs that contain images or text, and then positioning them in the layout. The one major difference is that, while objects are positioned in a Web document relative to their structure (unless otherwise styled), objects on an InDesign layout are always given an x and y position based on the overall page (by default, the top-left corner, similar to absolute positioning).

Because we are working with a vector- and object-based layout, one of the main tools you will use for the majority of your editing is the Selection tool Pointer Tool Button, which gives you control of position and size. It also is used to select an object in order to change its properties. This is quite different from Photoshop, in which you edit individual layers. To change the color of an object, you need to select it first using the Selection tool, and then adjust it using one of the various ways to change color.

These content boxes can be created with various tools. The Type tool Type tool button enables you to create a box for text. The Rectangle Frame tool Rectangle Frame tool button creates a box to add an image or linked resource. The Rectangle tool Rectangle tool button is not assigned to any particular kind of content. These three frame types allow you to build the layout any way you want.

In spite of both the Rectangle and Rectangle Frame tools, many designers who were trained on older software use only the Frame tool. The one difference between them is that the Frame tool shows a placeholder (an x). The Rectangle tool merely allows for a cleaner workspace but does not affect the final output.

InDesign’s Text Contextual Bars3

The context bars and option panes help you style the content. As in Photoshop, various objects will open up a context-sensitive toolbar at the top, allowing for quick editing based on the type of object(s) selected and the tool selected.

Also like in Photoshop and Illustrator, a multitude of panes are available to control the values associated with an object. Again, they apply only to selected objects. Selecting an option from a pane when an object is not selected will not cause any objects to change.

Style Sheets And Their Origins

CSS did not originate with the Web. The model of defining a set of instructions in order to style content was originally built for desktop publishing applications. In InDesign, this takes the form of object styles, paragraph styles and character styles. There are also table styles, row styles and cell styles for designing table objects, but we’ll stay away from these in this lesson.

Styles in InDesign work similar to Web-based CSS but have one major difference: you cannot group multiple style sheets of the same type. For example, you cannot apply multiple paragraph styles to one paragraph. However, you can apply a character style sheet to content in a paragraph that already has a style sheet applied to it.

Shortcuts and menu locations for the panes are given below. But the panes will already be open on the right side of your workspace if you have selected WindowWorkspaceAdvanced or have selected the “Typography” option. These function exactly like the panes in Illustrator and Photoshop: you can snap them together and arrange them to your liking, and they contract to icon format.

Object Style Sheets

Draw a content box on the page using the Rectangle tool. With the box selected, you can modify the content box — including the border, background and corner effects — as you would a div object. If you give it, say, a background color, a drop shadow and rounded corners, you can save that style by selecting a new “Object Style” in the Object Style pane when the object is selected (WindowStylesObject Styles, or Command/Control + F7). You can give the style a name (much like a class name) and modify any of the style properties you’ve assigned.

After saving this new style, you’ll still need to apply it to the object. This may sound redundant; however, you’ve only created a new style based on the properties of the selected object. By clicking on the new style with the object selected, you will apply that style. Think of it like adding class="object_style" to an HTML element after you’ve set up the CSS.

Paragraph Style Sheets

Select the Text tool, and click in the newly styled box. Add a few paragraphs of content (you can cheat by going to TypeFill With Placeholder Text). With your cursor in the first paragraph, you can start changing some of the properties of what, in Web terms, would be the <p> tag by using the Paragraph pane (WindowType & TablesParagraph, or Command/Control + Alt + T).

Notice that options for modifying font size, letter spacing and weight are not available. This is because these aspects relate to the characters of the paragraph. While a paragraph style can and most likely will include instructions for these values, the Paragraph pane does not provide access to them.

Let’s create a paragraph style via the Paragraph Style pane (WindowStylesParagraph Styles, or Command/Control + F11). This opens a new window that gives you God-like control over all aspects of the text. Name your style, and jump to the “Basic Character Formats” option on the left.

InDesign’s Paragraph Styles Window4

This is what I meant when I said that character properties could be defined in the paragraph style. Change the font size, weight and spacing here, and click “OK.” As you did with the object styles, you will still need to apply it to the paragraph you are working with. To do this, put your cursor in the paragraph text or select a portion of it, and then click on the paragraph style’s name. If you have selected the entire object using the Selection tool, then the paragraph style will be applied to all of the content.

Character Style Sheets

With the Type tool still selected and your cursor in the paragraph, highlight a portion of the text. Using the Character pane (WindowType & TablesCharacter, or Command/Control + T), adjust the properties of the characters. You can add italics or bold or change the font family.

Once more, let’s create a style that incorporates these modifications. In the Character Styles pane (WindowStylesCharacter Styles), create a new “class.” Name it something relevant, save it, and then apply it to the highlighted text. This would be akin to adding a little <span> tag to some text in a paragraph, which allows you to apply styles to that text independent of the parent element.

CSS vs. Style Sheets

We’ve just gone over a lot here. The reason we went over these three things is to illustrate that, unlike CSS styling, I cannot add a second style sheet of the same type to an element. In CSS, I can do something like this:

<div class="orange_box rounded"></div>

This would apply two styles to the same object (the orange box). InDesign attributes of a given type (whether object, paragraph or character) must be contained in a single style. Higher-level styles are overwritten by child items. For example, character styles overwrite paragraph styles, which in turn overwrite object styles; but you cannot apply multiple styles to a single object, etc.

As in CSS, I could overwrite an object manually. For instance, I could apply a style sheet that gives a paragraph a font size of 11 points and a leading (line height) of 14 points, but then manually change the leading to 16 points by adjusting it in the Character pane. This would result in Web code like:

<p class="standard_body" style="line-height: 16px;"></p>

As you can see, we end up with code that would be considered poor practice by most people. However, it does allow us to customize as issues arise.

Play Around With The Tools

Now that you’ve been introduced to how set up a document, start playing around with the tools, using what you already know of Photoshop or Flash. Position elements on the page, modify their color and font face, and create the layout for a product that you’ve already built.

In the next lesson, we’ll dive head first into learning how to create consistent layouts with some advanced style sheet options, and we’ll examine how to build a page structure from scratch. So, don’t forget your towel5.

Additional Resources

For some more tools to help you build an initial layout and to learn the basics of building a document, please see the following:

(al) (il)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2011/06/Folder-Structures-Large.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/06/InDesign-New-Document-Large.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/06/Context-Bars-Large.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/06/Paragraph-Styles-Window-Large.png
  5. 5 http://en.wikiquote.org/wiki/The_Hitchhiker's_Guide_to_the_Galaxy
  6. 6 http://www.smashingmagazine.com/2011/03/17/indesign-tips-i-wish-i-d-known-when-starting-out/

↑ Back to topShare on Twitter

Matthew currently freelances and works as a consultant for a multitude of companies. He specializes in graphic communication software however has extensive knowledge in design workflows and development processes. He is currently one of 3 Toronto InDesign User group Representatives, involved with several start-ups including the Toronto Social Media Café and HTML5 Meet-up Group.

Advertising
  1. 1

    I use InDesign for my wireframes. Works great!

    9
    • 2

      Interesting, if you don’t mind me asking, whats your process from there?

      4
      • 3

        If I may humbly reply, the easiest thing to do after designing in InDesign is simply converting few elements needed for your html, jpg or svg.

        Then I simply wrote my css layout according my grid in InDesign. It does save times for some projects by having a “visualised” calculation on screen :)

        PS. is there some sort of an automation tool to create css out of paragraph styles? That would be awesome! :D

        0
        • 4

          In InDesign CS5.5 you can export as HTML and choose ‘Embedded CSS’ from the options. The CSS will be written for you in the HTML file (though if you’ve mapped the styles to standard tags it assumes you’re using a separate style sheet and won’t give you the CSS).

          0
    • 5

      I was thinking of doing that. Cool to know it works. :)

      0
    • 6

      Where is the example website so it can be evaluated?

      2
  2. 7

    this is what i looking for, thanks matthew and smashing magazine TEAM

    0
  3. 8

    I’ve never used ID for any web creation… but I might have to try this out to see.

    Thanks!

    0
  4. 9

    Thank you for the info. The important matter is where can I use it for.

    -2
  5. 10

    Another great point to mention that it is possible to map InDesign’s Character and Paragraph styles to h1-h6, p, strong, em, span with CS5.5. This is really useful if you are getting a finished print piece and want to reporpose the content for the web. If the designer was using styles (hopefully they were), you can map Headline to h1, subhead to h2, and so on. Then export the entire page to HTML without CSS and get clean content.

    5
    • 11

      James, you’ve hit it on the nose there. I’m planning on making this into a series of use cases. The style conversions to html and PDF tags as well as custom class names are on the list. It’s great to see that your working with them already, not many are taking advantage of that yet.

      1
  6. 12

    Kristam Moffett

    June 23, 2011 10:34 am

    I usually find ID a nightmare – never even though to use it for any web development. Handy tips there guys!

    -1
  7. 13

    Bjørn Johansen

    June 23, 2011 10:45 am

    At my company, all the web designers acually use InDesign. Photoshop is for image processing, Illustrator is for vector graphics and InDesign is for layout.

    4
    • 14

      This makes sense to me, but then I come from a print background.

      2
    • 15

      Damned… these web designers must lose an incredible amount of time when they have to cut the layout into html. InDesign is great for any print project but terrible for any web project (except wireframing).

      4
    • 16

      Interesting… I’ve never thought of using ID for web. We use Fireworks in our studio. It seems to be a great hybrid of vector and bitmap.

      0
    • 17

      Milton Cantellay

      March 27, 2013 8:03 pm

      Yes, this is exactly how I use Adobe CS applications. Illustrator for illustrations (duh), Photoshop for image manipulation, Fireworks for web graphics, InDesign for layout (web/print). I’ve met so many designers that just use Photoshop for everything, seems like such a huge hassle to me.

      0
  8. 18

    InDesign is not a web authoring tool. I can see it’s benefits for some, but it’s simply not an effective part of my workflow. Converting character and paragraph styles may help for some, but I write the font attribute in css in a way that InDesign most certainly does not output, so I’d have to rewrite it anyway. I find it easier to mockup and develop from Notepad++, get things done much faster that way.

    10
  9. 19

    I am the only member of a small design agency in the Netherlands who can actually write websites. All my colleagues use InDesign for website design: it is the tool they use most of the time, so why not? Actually, it is faster to design a website in InDesign than in Photoshop (a multi column setup takes half a minute to set up in InDesign: a similar setup in Photoshop takes half an hour if you do not use a standard setup).
    Remember to switch measurements to points (in stead of millimeters) so you can translate the design to pixels without to much trouble.

    5
  10. 20

    I’m not sure how much value this would offer web developers, but I definitely see it for designers. I came from a print background and used ID quite frequently. I think switched to doing web full time and started using Photoshop to do mockups, as is kinda the standard. PS is an absolutely awful tool for creating websites, primarily because its not object oriented, so you just end up tripping over the layer groups all the time. I switched to using ID for layouts last year and would never go back.

    I find personally I don’t get too much into the style aspect of things, but that is definitely something you could build a tool kit of common styles you use, almost like how you use a CSS reset when beginning to code. I find the best part is being able to reference old designs and just copy and paste elements from one to the other.

    Doing stuff like rounded corners and dropshadows is a snap. Try resizing a rounded corner box in PS to understand how ridiculous it is for web design.

    6
    • 21

      Fireworks is THE software for web design. Try it and see how quickly you can create web pages.

      0
  11. 22

    Photoshop is the worst took for web design…especially for those of us who do their own front-end developing. Defining styles from the get go and being consistent produces clean markup and CSS while reducing headaches.

    Personally, I use Illustrator (sticking to a rigid pixel grid) but I make copious use of styles. The ease of making columns, setting up document grids, and text styles is something I long for in Illustator. Maybe I’ll try it for the next project?

    1
    • 23

      Iif you long for easy columns, document grids and textstyles, what the hell are you doing in Illustrator? InDesign had all of those since v1.0..

      4
  12. 24

    Hi Matthew Potter

    Good post this one!!! I had no idea that someone could use Indesign to produce web layouts… ok, of course you can use whatever you want i know that, but why should you adapt a print/typographic software to do this kind of work? Why? Do we have any kind of advantage?

    Why should we use Indesign, if we have softwares such as Photoshop or Fireworks that were developed to serve also the web development?

    I´m not saying that we can not do the same with Indesign, what i´m trying to say is if we have softwares more prepared for this situation, why should we use Indesign?

    “Each monkey in their tree”… (in Portugal we use this expression for this kind of context LOL, i´m not sure if this makes sense in english…)

    Indesign – Print Development
    Photoshop – Web Development & Image Processing
    Fireworks – Web & Icon Development

    P.S- Sorry about my english

    -2
    • 25

      “Cada macaco no seu árvore” ? (Google Translate)

      1
      • 26

        I wanted to say… each software should be used for a specific task! Photoshop it´s good for image processing, Indesign it´s the best tool for print based media…

        1
      • 27

        Cada macaco no seu galho :)

        0
  13. 28

    Ok… i have to admit that sometimes Photoshop it´s a bit hard on the web development!!! But did you try Fireworks? Does anybody tried Fireworks on web development?

    -4
    • 29

      Fireworks is an awesome design tool, especially if you understand how to make symbols with custom scripts.

      1
    • 30

      Fireworks is definitely awesome – it supports ‘pages’ too so you can have multiple layouts in one file (Homepage, Internal etc) and even create a ‘master’ type page with elements that other pages share (like a shared header on your layout). The vector drawing tools are ideal for creating web page elements and I find them easier and more intuitive to use than Photoshop

      0
      • 31

        That´s the point… if exist a tool as Fireworks why should we adapt Indesign (a print based software) to this kind of situations?

        1
  14. 32

    Great article. Thank you so much. My wife is a web designer and she really liked this article. I’m also a JavaScript developer. I also recommend readers to take a look at Network Information API.

    -2
  15. 33

    Surely this article should be called “A Web Designers’s Guide To Adobe InDesign”.

    1
  16. 35

    never realized that indesign can be used for that

    3
  17. 36

    This has to be the best explanation of how to get started in InDesign for me that I’ve ever read! NOW it actually makes sense. haha

    -3
  18. 37

    Aweee Where was this tutorial 2 months ago!? lol

    I had the WORST experience with this program using it the first time.

    1
  19. 38

    InDesign is basically a layout application. I use it for webdesign because i hate counting pixels in Photoshop, aligning in PS sucks, making columns and margins in PS sucks. So i create layout in Indesign bring it into PS and design from there, then i go to Dreamweaver or Textwrangler and code. I originally started designing for print so i have an extensive knowledge of InDesign, so the process is pretty easy for me. InDesign CS5.5 is kinda amazing, the new features added have made it more than just a layout tool, not it can be used with more interactivity for the end user.

    2
    • 39

      Hi RVLT – You said you create layout in Indesign then bring it into PS and design from there…How do you convert InDesign into PS? I just paid a firm to create a website layout for me and they used InDesign. My web developer doesn’t use this program. Can he convert this InDesign to PS to edit and build out the website?

      0
  20. 40

    John Mindiola III

    June 27, 2011 3:05 pm

    This article could be a great primer for web folks who need to crank out some print work.

    -4
  21. 41

    the “CSS vs. Style Sheets” part is so unprofessional. you write about inline css vs. any other form of css under this title.

    what you’ve written in brief: adobe indesing uses css code, but doesn’t care about cascading. instead of this, you have to set up each and every display information of an element in its own style attribute. no inherited values, no initial/user-agent values…

    if it really works like this, you (a few commenters) don’t really want to create web pages using indesign. use your imagination, draw a sketch or download a wysiwyg html/css editor, but stop the misuse. why don’t you design websites with a video editor? because it’s not intended to do that.

    (the same with ps… adobe photoshop is the worst – imprecise – graphic program out there, but thank to this kind of adobe fanboys it became a “standard” for webdesign in the past years. photoshop is for photo editing, maybe for creating graphics for a website, but please go f* your “psd designs”. hopefully this trend terminates shortly because of css 3… css should win the “a bit more css code vs. ps shadows, rouded corner background images, image headings, ps gradients, ps box borders” battle. i can’t see a reason why should anyone use the ps slice tool to make a webdesign.)

    -5
    • 42

      Oh yeahhh!!! At least someone has the same opinion as me!!!

      I really appreciate this part of your comment:

      “if it really works like this, you (a few commenters) don’t really want to create web pages using indesign. use your imagination, draw a sketch or download a wysiwyg html/css editor, but stop the misuse. why don’t you design websites with a video editor? because it’s not intended to do that.”

      And yes, i won´t comment the part of inline css…

      -3
    • 43

      you *can* actually set up nested styles with InDesign easily so there is inheritance (use the base on style option). For lots of cool stuff with InDesign styles check out the series on them from theindesigner.com

      1
  22. 44

    Reminds me of the time I had to build a newsletter template from something designed in Illustration (never do web design in Illustrator or I will kill you). What’s InDesign like in terms of clicking of objects and being able to save them out similar to Fireworks?

    1
  23. 45

    We’ve tried switching to INDD over the years for web layouts, but the translation from PTs to PXs always gets us… When we go to slice page elements, we’ve tried going from ID to PS or Illustrator, but the borders and strokes always get messed.. like a 1px stroke gets totally aliased and we end up having to rebuild in PS and then slice… Type which looked nice and crisp in ID (when used as a graphic) get aliased oddly and needs to be reset etc… Does anyone have a good workflow for slicing graphic aelements out of INDD?

    -1
  24. 46

    Great article!

    I use indesign for webdesign as I like clean column layouts a lot.
    I do the mockup in ID, code the grid I set up in the program as a css grid layout and develop and code everything in the browser from then. As indesign is made for layout you can space and kern headings that will be used as an image much faster too.

    -1
  25. 47

    I started out in print design, my first project being a 214-page large format coffee table book. InDesign became a great friend during the ensuing months of design. 5 years later, I do mostly web design and [largely front-end] web development. This article really isn’t about ‘development’, as another poster pointed out. It’s design, and how it can be somewhat achieved in Id.

    I *love* Id, and still use it frequently. But I just can’t see it’s real power passed wire-framing. On Ps, the idea that it’s an “image processor” is narrowly scoped. It can process images, you bet – but it’s immensely more powerful than that. Not all Adobe products fit into neat little buckets, owing to ever increasing versatility with added features (the software engineers could use some help in producing software patches/updates, but that’s a whole other story…). Each tool – Ai, Id, and Ps (in 5 years I have never used Fw, maybe at my own peril) has its merits for web *design*, but I find Ps and its layers and layer groups, copy-merged, font-aliasing selections, layer effects, masking, etc., to be the best design tool.

    On development – none of the above. A good syntax editor is a start for that.

    -3
    • 48

      You should try out Omnigraffle now that you are on the Mac side.

      0
    • 49

      I started designing in PS 12 years ago, and chanced upon Fireworks a year later. Since then it’s FW all the way for web design. Even now, PS CS5 can’t do what FW can. Raster and vector capabilities, animations, image swaps, navigations with sub menus, image maps, and so much more…

      -1
  26. 50

    Thanks for the article. I think that the most practical application for this is converting a print publication into an ePUB, since that format is based on XHTML/HTML and CSS. If the print designer keeps these guidelines in mind while creating the print version, conversion should go smoothly.

    1
  27. 51

    I use indesign cs4 all of the time to fine tune layouts. I use points, but I would never export the document to photoshop for slicing. In fact, I only use photoshop to create the digital assets and then go directly to my text editor and start coding. It is actually pretty seamless. Indesign is much better for typography than either illustrator or photoshop.

    There are other similarities in that in indesign you can create text boxes that include padding, cause text to wrap around images, easily create grids, style text with borders (called rules in print), style line height, the amount of space before or after a paragraph. The list goes on and on about the similarities between the two.

    I am trained as a print designer, so I have been using the tool for years and know my way around quite well. The web has really become much more fun to design for since the implementation of css2.
    And it is possible to nest tags within styles, but it works a little differently than css.

    2
  28. 52

    Anne-Marie Concepcion

    July 14, 2011 11:09 am

    InDesign is awful at creating web sites. It’s okay for look-and-feel if you remember to use pixels; but if you’re going to do that, why not use Illustrator, which at least has a number of web-centric features (pixel alignment/preview, save for web, table slicing, etc.).

    I *though* this article was going to be about developers using InDesign for wireframing or something. For that, there is no better (free) solution than EightShapes Unify, a series of wireframing templates and library items for InDesign.

    http://unify.eightshapes.com/

    They also have a series of video tutorials on how to use the wireframing tools.

    Anne-Marie
    co-host, InDesignSecrets.com

    4
    • 53

      Dear Lord, at last – a voice of reason in these comments.

      I am a web developer, and in over a decade of doing this work, I have never had a web designer come to me with InDesign files to be converted into a living, breathing website. I can fly Photoshop, and it is normally sufficient for me to slice up images, sample gradients, measure text, etc. and then build a site which 9.95 times out of 10 looks, in the browser, exactly like the Photoshop documents I have worked from.

      I do not know any web developers, or even front end developers, who work with InDesign when creating a site.

      The only contact I have had with InDesign is indirectly, when a print-based creative agency (who have simply changed the medium and not their toolkit) have designed layouts for websites. Normally they work in InDesign and provide me with a Photoshop file full of (ironically named) “Smart Objects” which are cumbersome compared to the layers of Photoshop.

      Yes, Photoshop was initially designed for retouching of images/image manipulation/etc. but it’s use has changed. Trying to use a print-focused piece of software to design the dynamic world of the web is foolish. Wireframes and the like? Fine. But for real, heavy-duty layouts and imagery and elements? Give me a PSD any day of the week.

      3
      • 54

        It’s extremely sad to see that message, the design with Photoshop it’s floathing, you can’t have a good sense of dimension, it’s hard to find the grid, is not flexible at all to rearrange the design. InDesign it’s faster, you can do many option, and he works exactely as css and html, the logic is the same. The stupid people like you which actually I supposed you are from a technic background they want to make a difference between a print and web application, for a view as a designer I don’t see this limit, actually is the same structure. What the hell…. can you tell what is it the difference if you make a box of 20 x 60 px with InDesign or Photoshop

        2
    • 55

      @Anne-Marie, do you know of any sources to learn how to use properly Eight Shapes unify for InDesign?

      -1
  29. 56

    Thanks for such informative post. i was looking for it from last 2-3 months. You make my task easy, I’m so happy to have your blog. Thanks a lot, keep on like that. From now I’m a regular user of your blog. interior painting

    -1
  30. 57

    InDesign is a huge time saver when creating sites… One thing that I didn’t see mentioned in the article, which I find EXTREMELY beneficial, is the ability to import other indd files. This allows you to break your site into individual “buckets”. By creating a separate header file, for instance, you can add pages and layers as needed to account for various states, like logged in/logged out, as well as nav rollover/highlight states and flyouts. Then, when importing the file into the main page layout, you can choose the state (page) you wish to display. You can also right click in the placed image to control the layer visibility, independent of other instances of the file within the same layout.

    Then, if say, you need to edit the header, you can do so in the main file, and it will automatically update on any page that links to it… Much like html.

    1
  31. 58

    Great article. I was thinking about writing one similar to this and I found this one, but this does a great job explaining everything. I’m a webdesigner working for an InDesign plugin developer and there’s tons of features in InDesign (like styles) that make it really nice for us. I even find it a bit easier to use than Fireworks for mockups in certain ways, although both have their advantages. There’s been a lot of talk in the InDesign community of being able to export InDesign docs as a full html websites, which would rock my socks off.

    If you’re working with database driven documents like catalogs (CSM style) check out data merge, which is a great native InDesign feature, or for automating complex InDesign documents feel free to check out our plugins at http://fuga-tech.com, which provide a sort of simplified scripting language for creating InDesign documents.

    1
  32. 59

    I’ve been designing websites in Photoshop for over 10 years. I’d love to use something like inDesign to get around some of the frustrating issues in Photoshop. Over the years both Illustrator and InDesign have slowly crept into the pixel world but its never enough to really blow Photoshop out of the water.
    I’ve just spent a couple of days putting Indesign CS5 through its paces (before I embark on any commercial work). It’s not bad but it’s still not there. For example when I define a paragraph rule at 1px thats what I want to see. I don’t want to see a blurry antialiased line. Pixel perfect positioning and preview is crucial for web designers and develpoers.
    Also… HEX values. Hello! I had to download an extension so I could create HEX colour swatches and even then updating the HEX value is tedious.
    Last but not least. Output to PDF. For some strange reason Adobe acrobat still uses a default of 93dpi to display files. You can change it to 72dpi in the preferences but try telling that to every stakeholder on the project. I don’t even want to talk about saving out a PNG.
    It’s possible to work around all these issues and I’m going to keep trying but to be honest if I come across many more road blocks and compromises I’ll have to throw in the towel and go back to my old friend Photoshop.
    Thanks for listening to my rant.

    5
  33. 60

    Would it kill Adobe to just add pixels as a unit in the document settings

    2
  34. 61

    Print guys: Please please please stick to Illustrator when supplying files for web dev…. (Photoshop if you must)

    72dpi!!! Pixel perfect positioning… none of this weird blurry lines and masked off picture boxes with giant high res files behind them that look all pixelated in preview mode… Yuk!

    Just like you should not use a hammer on a screw… you use a screw driver…

    :-)

    6
  35. 62

    Thank you very much for this guide Matthew Potter!
    As an entertainment-marketing student, inDesign is VERY usefull for my final thesis.
    This introduction to inDesign is very welcome.

    -1
  36. 63

    I have made a 18 page document with Indesign CS5. The document has images and text aligned in a particular format. Now, when i export the same to HTML version, everything gets distorted with images and text haphazardly placed. Can anyone tell me how to get the same design output from ID to HTML.

    Thanks
    Yesh

    0
  37. 64

    Web development company

    February 26, 2014 3:08 pm

    Thank you very much for this guide Matthew Potter!

    0

↑ Back to top