ps mockup template

Upload: swiftmouse

Post on 30-Oct-2015

28 views

Category:

Documents


0 download

TRANSCRIPT

Define Business Rule

tips & tricksNew tips and tricks added to bottom of listNote to users of this template:Link to:Color KeypageThis template uses a new color palette. If you are starting a new design from this template there is a page in this template entitled "Color Key"which shows in detail how the colors are organized and what to choose for what areas in your design.Warning: If you import this color palette into any designs that were built using the last template it will change your colors globally.I suggest that you start using this template when you start a new design.This new template offers new boxes and buttons that are closer in look and feel to actual HTML. Tabs that also are closer to the actual tabsused and new artwork in the images pages.These improvements were brought to you by Maggie Law who has taken this template to a new level. Thanks MaggieRow height = 13Column width = 1Clear background grid lines = tools > Option > View > GridlinesRight click on Table Cell > Format CellAlignment >Vertical > Bottom puts text at bottom of row> Middle = puts text in middle of row, good position for headers> Merge Cells =merges cells so that text is locked together, if text is link all text will be clickable, can also center textTo delete cells that are merged you will need to uncheck the merged optionBorder >Used to make borders around cells. Can choose multiple colors and widthsPatterns >Colors cells (see below for new color palette tips)Number >Can determine what attributes a cell will have. To make a numbered cell a text cell choose textTrick: if a group of numbers or a date only show up as a # symbol put a ( ' ) single quote at the beginning of the string ofcharacters and they will appear as text and the ' will be invisible.Sometimes when you paste the " ' " will appear, just retype it and it will disappearSave as HTML: A whole worksheet can be saved as an HTML file.It will save all the necessary files needed to build a site using all of the tabbed pages.The links that have been set up will work but unfortunately the drop down boxes won't.You don't have to save the page as HTML you can also just open up a file from Explorer and get the same effect.Graphics as links:Highlight a graphic and right click on it>Go to Hyperlink> assign a linkThis will also carry through when a page is converted to HTMLTo get a dropdown menu:- Bring up the widgets toolbar via View > Toolbars > Forms.- Click the icon that has the tooltip "Combo Box".- Drag across the cells where you want the dropdown menu. If it doesn't land exactly where you want it, move it like a graphic. (ALT may help.)- Type the menu values in a column of cells somewhere on your page, and leave a blank cell above the list.- Right-click on the widget, and bring up Format Control.- Go to the Control tab. Click the button next to Input Range. Drag-select your rows with the menu values. Close the little window.- Click the button next to Cell Link. Select the cell above the menu values. Close the little window.- Enter the number of menu values, and check the Shading checkbox. OK.- Use the dropdown to pick the value that you want to have initially displayed.- After you get it working, if you want to select it (e.g., for moving or resizing), click with the right mouse button and ignore the popup menu.(Terry Roberts)Radio buttonsIf you put multiple radiobuttons on a page, they all want to act as one big radiobutton group, i.e., turning any one on turns all the rest off.According to the documentation, if you put radiobuttons into a group-box (item #2 in the forms menu), they should form a set. That does work aslong as you're very careful to get all of the radiobutton widget's area inside the groupbox. The catch is that I don't want the groupbox to show --both because excel's box isn't PIA, and because I'm using layout to define my groups and I don't want extra lines. I can't find a way to make thegroupbox invisible -- it doesn't seem to have controls for what its outlines look like, other than that 3-D control in the Format d-box. So gettingmultiple radiobutton groups on a page to operate properly is still a mystery to me. If you or anyone has a solution, I'd be interested in hearing it.(Terry Roberts)Changing Row HeightYou can select non-continuous rows by holding down the Control key. Then you can then change their row height in one move.Tabs with curved edgesThese new tabs look more realistic but are a little harder to work with. Each tab has a small piece of art on either side to make thecurve. To move them it is best to capture the tab row it is best to highlight the tab row and the row above it. Then lay yourcurser a row above where you want to put it and click paste. Remember to only highlight one cell when pasteing.To delete tabs (as with the straight tabs) you will need to uncheck "merged" cell in "alignment" option before deletingTo change the width of one of the tabs move the whole row of tabs to the right of your page design far enough so that nothing is below it.Then by clicking at the top where the column labels are you can insert or delete columns. In this way you can increase ordecrease the width of the tab, without having to unmerge the the text and you won't effect the design. When you have the tabs to the correctsize copy and paste it where you want.New color paletteThe color palette has been updated and has an explaination on its own page called color keyColor KeyThe color key page was put together by Maggie LawHow to add a color palette from another worksheetIf there is a new color palette that you want use in an existing worksheet this is how you do it:Go to Tools > Options> Colors. You will need to have the the template open that you want to get the palette from. Then using the pulldown menu as seen below ind the template that you want to copy the palette from, highlight the name ,save and it is done.Be careful, if any of the colors are replacing have been used in the template that you are copying to it will overwrite those colors and theywill appear as the new color. That can be a good if you want to change a color globally but bad if you don't have that intention. This is notirreversable though. Merely reinstall the old color palette from an older palette or file and it will be back to normal.

Color KeyColor Key

color keyColor Key:This prototyping template employs a color palatte that supports the colors of PeopleSoft applications:1)R 40G 66B 1199)R 74G 89B 1402)R 255G 255B 25510)R 120G 156B 2023)R 128G 127B 12711)R 239G 239B 247123456784)R 247G 247B 24712)R 90G 134B 1815)R 49G 48B 20613)R 211G 220B 2329101112131415166)R 107G 105B 10714)R 252G 252B 1817)R 74G 113B 17315)R 214G 223B 2398)R 206G 207B 20616)R 181G 195B 214

03495499213844491012131115716453694114882

image libraryNote: there are more images below the foldGroupedButtonsIndividualButtons

boxes & buttonstextTextTextTextTextLine oneLine twoLine threeSaveOKCancelReturnSubmitApplyRunLine fourSaveOKCancelReturntSubmitApplyRun

tabs curvedExample tab1Example tab 2Example tab 1Example tab2Example tab3Example tab4Example tab4HeaderExample tab 1Example tab2Example tab3Example tab4Example tab4Example tab 1Example tabExample tabExample tabExample tabExample tab 1Example tabExample tab 1Example tabExample tabExample tabExample tab2Example tabExample tabExample tab 1Example tabExample tabExample tabExample tabExample tabExample tab 1Example tabExample tabExample tabExample tabExample tabExample tab 1More tabs below the foldShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShortShort

tabs straightExample tab1Example tab 2Example tab 2Example tab1Example tab2Example tab3Example tab4HeaderExample tab 2Example tab1Example tab2Example tab3Example tab4Example tab 2Example tab1Example tab2Example tab3Example tab4Example tab1Example tab 2Example tab2Example tab3Example tab4Example tab1Example tab1Example tab 2Example tab3Example tab4Example tab1Example tab1Example tab2Example tab 2Example tab4Example tab1Example tab1Example tab2Example tab3Example tab 2

gridsThis is Another HeaderTextTextTextText

basic pageHeadlineHeader Text:Smaller header textBold Header Text:Header Text:Smaller header textBold Header Text:Header Text:Smaller header textBold Header Text:HeaderHeader

basic page & headerHeadlineBold Header Text:Smaller header textBold Header Text:Bold Header Text:Smaller header textBold Header Text:Bold Header Text:Smaller header textBold Header Text:HeaderHeader

blank sheet