WebOptimum (WebOp) Concept Documentation.

WebOp
WebOp 02

Intro

  • Have you ever wished you could open your PSD, make few changes, rename some layers and viola your HTML & CSS files are ready ?.

  • Have you ever wished to become a good web developer as much as you are as a web designer but it always seemed too complicated ?.

  • Well The Goal of this Concept is to aid anyone becoming more productive & creative without limiting him/her self to a one side of the equation (being a designer or a developer), thats why like any other tool it does most of the heavy lifting then leave you to fine tune and put the final touches to the end product.


The Tool

1- All the necessary tools like (node.js, bower, grunt, etc…) will be installed for you (no need to mess with trmnl/cmd anymore).

2- Every PSD you edit with this tool, a log file will be created next to the PSD file with all the operations you made (renaming, re-positioning/aligning, grouping, missing fonts, etc…), also a small indicator will be shown just next to the PSD name to indicate any unsaved changes.

3- When you save the project, all the images will be extracted and saved automatically, just make sure that you made all the necessary renaming, otherwise the HTML & CSS would be a mess.

4- The concept is heavily inspired by Emmet therefore the same coding pattern applies minus some ofcourse.

5- its Not a replacement for Photoshop rather its more like an add-on which made specifically for web developers therefore it doesn’t have every single tool you have in Photoshop instead it only have the necessary ones to help you put the final touches.

  • any changes you make to the PSD with the tool will reflect normally in Photoshop except for Fonts measurement because of the difference between PT/PX/MM and EM / REM, so the calculation for that will be saved in the log file the tool create so you don’t feel strange when opening the PSD back in Photoshop.

Usage

1- Rename your Layers/Folders the same way you would do with your HTML (img, a, ul, header, etc…)
 

2- You can rename multiple files by simply selecting them and press Ctrl+R for Windows or Cmnd+R for Mac. (you can Append/Prepend/Replace the current text)

  • if you found yourself (renaming more than searching) you can simply turn the search bar into text area by pressing the small icon on the right
     

3- by default all of your PSD Layers/Folders will be written under

<body>

therefore any Layer/Layers (unless its a part of a folder) will use the (body tag) as their container.

** to use a layer as a Background-image for the body container, that layer should be the very first layer from the bottom in the layer panel & renamed to @Body, this will add the properties of that layer to the body tag and save the image as (body.jpg)

  • if you want it as Background-color then add the color hex code after it
    @Body#FF3156

  • the margin-left & margin-right of that layer will be calculated based on your PSD Canvas Size and will be added automatically for you, its exactly what you’re thinking about. (Smart Margin & Padding must be enabled in the settings)
     

4- The wrapping containers are always Folders, you can have as many Folders/Layers or both as you would like, it all depends on how you structure your HTML file.

Folder x -> renamed to section (parent folder)
         |- Folder y -> renamed to header (child folder)
                     |- text layer -> renamed to h1 (child layer)
                     |- text layer -> renamed to p (child layer)
         |- picture  -> renamed to img (sibling layer)

// will result in 

<section>
  <header>
    <h1>..</h1>
    <p>....</p>
  </header>
  <img src="" alt=""></img>
</section>

 

5- by default any Layer/Folder name will be used as a tag.

 
Folder name (zzz) will result in <zzz>...</zzz>

unless you wrote (.zzz) or (#zzz) which will then use

<div>

instead and the result will be

<div class="zzz"></div>
// or
<div id="zzz"></div>

 

6- for text layers, just rename them to the tag you want and the text will be copied to it.

text layer with text of (qwerty)

renaming this layer to (label), will result in

<label for="">qwerty</label>
  • for something like an items-list, rename the parent folder that contain the list-items to (select) then rename all the files to (option), same works for (ul & li) just use different names.
select -> parent folder
       |- text layer with text of (item1) -> renamed to option
       |- text layer with text of (item2) -> renamed to option
       |- text layer with text of (item3) -> renamed to option
       |- text layer with text of (item4) -> renamed to option
       |- text layer with text of (item5) -> renamed to option

// will result in

<select name="" id="">
  <option value="">item1</option>
  <option value="">item2</option>
  <option value="">item3</option>
  <option value="">item4</option>
  <option value="">item5</option>
</select>

 

7- for renaming an image layer you can use the same code you would use with Emmet.

img[src="xyz"]

// will result in

<img src="xyz.jpg" alt=""></img>
  • note that a class with the same name of (src=”…”) will be created to save the layer properties like (position, height, width, etc…).

  • you can’t use the same pattern you would use for renaming the text layers because text have many formats (p, h1, etc…) but images only use (img) and if you used only that the tool wouldn’t know which is which when saving
     

8- if you have a solid color layer and you want to use it as Background-Color not as Background-image, then rename it to any (.class or #id) and add (@Color + the color hex code).

.xxy@Color#FF2937 
  • if you want to use the same properties of that layer in somewhere else, just add its (.class or #id) to the layer/folder you want to have it
     

9- for something like a slide-show with say like 5 images, just rename the parent folder that contain the images to any (.class or #id) as you want then add something like (img[src=”xyz$”]*5) which will rename all the images layers in that folder when saved accordingly, so you don’t need to rename them one by one.

.name(img[src="xyz$"]*5)
    img1 -> child layer
    img2 -> child layer
    img3 -> child layer
    img4 -> child layer
    img5 -> child layer

// will result in 

<div class="name">
  <img src="xyz1.jpg" alt="" class="xyz1"></img>
  <img src="xyz2.jpg" alt="" class="xyz2"></img>
  <img src="xyz3.jpg" alt="" class="xyz3"></img>
  <img src="xyz4.jpg" alt="" class="xyz4"></img>
  <img src="xyz5.jpg" alt="" class="xyz5"></img>
</div>

 

10- any (text, image, smart Layer) have a Mask layer applied to it, rename that layer to @Mask and all the layers will be trimmed based on that layer.

  • if you want to save that layer properties (background-color, drop-shadow, border, etc…) then rename that layer to any (.class or #id) and add @Mask after that.
     #xyz@Mask 
    • to add this layer properties to any other Layer/Folder just add the (.class or #id) of that layer after the other Layer/Folder (tag/class/id)
       .zzz#xyz 
  • for folder masks you’ll have to create a solid color layer with the same Width & Height of that mask in the same folder + rename it to any (.class or #id) and add @Mask after it, then add this layer (.class or #id) to the containing folder to use it as reference, same as above.
    • note that when adding a mask to a folder, any layer that is bigger than the mask will be trimmed. (same as PS)
       

11- for video and audio, make a folder with the name of video or audio and create a solid color layer in that folder with the Width & Height you want then rename that layer to the path of the video/audio file. (the same path you would insert into the HTML)
# Audio

audio -> parent folder
      |- solid color layer -> renamed to "audio/xyz.ogg"

// will result in 

<audio src="audio/xyz.ogg" width="..." height="..."></audio>

# Video

video -> parent folder
      |- solid color layer -> renamed to "video/xyz.mp4"

// will result in

<video src="video/xyz.mp4" width="..." height="..."></video>
  • note that a class with the same name of the file name will be created to save the layer properties like (position, width, height)
     

12- for a link with a button, rename your text layer to (a + any class / id name you’ll use for you button) and the button variations to (*.:hover, *.:active, etc…)

nav -> parent folder
    |- text layer with text of (submit) -> renamed to (a.mybutton)
    |- button layer                     -> renamed to .mybutton
    |- button variation                 -> renamed to .mybutton:hover
    |- button variation                 -> renamed to .mybutton:active

// will result in

<style>
  nav { ... }
  .mybutton { ... }
  .mybutton:hover { ... }
  .mybutton:active { ... }
</style>
<nav>
  <a href="#" class="mybutton" tittle="">submit</a>
</nav>
  • if you have several buttons that use the same style, just rename one of buttons to any (.class or #id) and add (@ + any class / id name you choose) to the other button layers so they will use that button as reference instead of creating multiple classes with the same style, note that all of them have to be in the same container/folder (to avoid any conflict with same names in other containers / folders)
nav -> parent folder
    |- text layer with text of (home)    -> renamed to a.button
    |- button layer                      -> renamed to .button
    |- text layer with text of (about)   -> renamed to a.button
    |- button layer                      -> renamed to @.button
    |- text layer with text of (gallery) -> renamed to a.button
    |- button layer                      -> renamed to @.button

// will result in

<style>
  nav { ... }
  .button { ... }
</style>
<nav>
  <a href="#" class="button" tittle="">home</a>
  <a href="#" class="button" tittle="">about</a>
  <a href="#" class="button" tittle="">gallery</a>
</nav>
  • the tool will calculate the distance between each button and add that distance as a (Margin t/r/b/l) to the main button depending on the position of those other buttons, if you included a @Flex layer then the buttons position will be controlled by the container size
     

13- because Flexbox only applies to the parent div / container / folder then you will have to specify the height & width of that container and for that you can use either of this options
* if you already have a layer that is = the size of the container simply rename it to @Flex.
* or create a solid color layer that is = to the Height & Width of the container and rename it to @Flex, you can change its opacity to 0 if you want to.

  • if you want to save that layer properties (background-color, drop-shadow, border, etc… ) then rename it to any (.class or #id) and add @Flex after that.
     .xyz@Flex 

  • to add this properties to any other Layer/Folder just add the (.class or #id) of that layer after the other Layer/Folder (tag/class/id) same as (@Mask).

     .container.xyz 

     

14- if you made a layer in your PSD that the width / height is = to the width / height of the PSD Canvas Size then it will have a (width / height : 100% in the CSS) and the pixel width of that layer will be the (min-width)
 

15- all the fonts used in the design will be copied to your project folder (unless any were missing, then you’ll receive a message regarding that) and will be added to the CSS automatically so you don’t need to go through all your installed fonts and try to find what is what.

  • to use the FontAwesome Font Kit, just rename the icon you used in your design with the name from the FA kit + the class / id name you want your styles (unless its a flat icon then no need) to be saved with in the CSS.
a -> parent folder
  |- icon layer with styles          -> renamed to ".fa.fa-home.home" (child layer)
  |- text layer with text of (Main)  -> renamed to "span" (child layer)

// will result in

<a href="#" tittle="" class="fa fa-home home">
  <span>Main</span>
</a>

 

16- as you edit your PSD file, a temp HTML & CSS (it could be Less or Sass instead if you want to) taps will be created to help you have a better over all view of how things are going, also the taps updates automatically as you make changes to the PSD so note that this temp files will be as a Read-only because making any changes to the PSD will simply wipe everything you made into them, another thing to note is that when you select a Layer/Folder in the PSD it will sync with the code line in the HTML & CSS, something like (inspect element) in web-browsers
 

17- Smart-Objects Layers can’t be accessed or modified and when saving any as an image the tool will flatten & trim this layers according to their size and if the layer were bigger than the canvas size then it will be trimmed according to the canvas size before saving.

  • layers with effects can’t be modified but you can enable & disable any of the applied fx as you please, for editing any you will have to use Photoshop
     

18- The HTML title will be named the same as the project name
 

19- the Blending modes are limited to the CSS3 specification so any mode you have in your design that is other than the ones in the specifications, will be changed to the nearest mode


# Smart Recognition

1- the tool use smart recognition for things like (Twitter, Facebook, Instagram, etc…) so just rename your icons / images to their corresponding names and an anchor with the img source will be created automatically.

icon/image layer -> renamed to (github)

// will result in

<a href="www.github.com"><img src="images/github.png" alt="" class="github"></a>
  • same goes if you have a text, just rename it same as you would do with the icons / images.
text layer with text of "GH" -> renamed to (github)

// will result in

<a href="www.github.com" class="github" title="">GH</a>
  • a class name will be created with the same name (FB, Twitter, insta, etc…) wither its an img or text to save any styles and or positions

2- the tool also use smart positioning to detect which container / parent the element is part of and add the appropriate position (relative, absolute) to it accordingly.

  • for (position : fixed) the Layer / Folder must be the very first from the top in the layer panel, rename it to any (tag/class/id) then add @Fixed after it
    .zzz@fixed

  • same goes for the Margin & Padding between the contents them selves, it will calculate the space/distance between the layers according to the container that holds them (exactly as you expected, no more monkey business).

  • this is not the same as (FlexBOX) because it uses fixed pixels and it applies to each layer individually, where flexbox does the opposite


# Preferences

1- chose to use image masks which will save the mask along with the images, or if not then the images will be trimmed and saved based on the mask you made in the PSD.

2- chose to use Smart Margin & Padding, if not it will use the same CSS code Photoshop produce.

3- chose to use Flexbox or not. (still kinda new but solves lots of aligning/justifying problems, only applies to the parent folder)

4- chose to use Autoprefixer. (to automatically add any necessary browser prefixes)

5- chose to include a javascript library (JQuery, MooTools, DojoKit) or non
.then chose which version you want to include. (the tool doesn’t write any JS code, it will only include the library into your HTML).

6- chose to include Modernizr. (for helping with cross-browser compatibility)

7- chose to include IE fixes. (Modernizer is better but if you still like the “if comments” then use this)

8- chose to include one of the CSS reset options (YUI, HTML5Doctor, CSans) or non.

9- chose to install CSS FrameWork (BootStrap, Zurb Foundation) or non.

10- chose to include a CSS PreProcessor (LessCss, Sass/Scss) or non. (for compiling less or sass to CSS you’ll need a complier, search Google for any).

11- chose to include Font Awesome Kit or not.

12- use a global font size (pt, px, em).

13- chose a global type for saving images (JPG, PNG, GIF) thats why you don’t need to include any extensions when you rename the files, unless you want to specify a one or use something like SVG which applies only to (smart objects/vectors).

14- chose to show measured distance between selected layers (you have to select more than one layer, ruler tool must be selected).

15- chose to save as a WordPress Project. (Experimental)


Recommended to Check:

Avocode
Macaw
FramerJs
Marvel
PaintCode
Slides
WebFlow
Froont
Google WebDesigner

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s