Images FAQs
From SPARK
CONTENTS
- Tips related to Photoshop and creating icons
- How to put two images side by side with captions in sidebar
- How to put two images side by side with captions (Method 1)
- How to put two images side by side with captions (Method 2)
- How to Edit Images in Photoshop for Sidebars
- How to Add Images to Sidebars
- How to Make Images Clickable
_________________________________________________________________________________________________________________________________________________________________
Tips related to Photoshop and creating icons
Parameters for the image:
- 144px x 144px or 2” x 2”
- Resolution = 72
Parameters for the text:
- Font = stencil
- Size = 20 pt
- Crisp
- Layer Style Blending Options…
- Styles = Outer Glow
- Styles = Stroke
- Blend Mode = Hard Light
- Advanced Blending = Blend Clipped Layers as Group
- Advanced Blending = Transparency Shapes Layer
How to put two images side by side with captions in sidebar
| wikitext | ||
|---|---|---|
<div class="sidebar">
{|class="wikitable" border="0"
|-
|[[Image:Zoom H2 90-120 400x322.jpg|thumb|center|100px|Built-in W-XY Stereo Mic]]
|[[Image:Zoom H2 3D pan 400x220.jpg|thumb|center|100px|3D Panning Function]]
|}
</div class="sidebar_content">
| ||
| rendering | ||
|
How to put two images side by side with captions (Method 1)
| wikitext | |||||||
|---|---|---|---|---|---|---|---|
<div>
{|class="wikitable" border="0"
|{{imagebox
|image=Zoom H2 90-120 400x322.jpg
|caption=Built-in W-XY Stereo Mic
|imagesize=400px
}}
|{{imagebox |image=Zoom H2 3D pan 400x220.jpg
|caption=3D Panning Function
|imagesize=400px
}}
|}
</div>
| |||||||
| rendering | |||||||
| |||||||
How to put two images side by side with captions (Method 2)
| wikitext | |||
|---|---|---|---|
<center>
{| class=wikitable border="0"
| valign="top"|
[[Image:Zoom H2 90-120 400x322.jpg|thumb|center|300px|Built-in W-XY Stereo Mic]]
| valign="center"|
[[Image:Zoom H2 3D pan 400x220.jpg|thumb|center|300px|3D Panning Function]]
|}
</center>
| |||
| rendering | |||
|
How to Edit Images in Photoshop for Sidebars
The following are the steps in Photoshop to resize images for the sidebar:
- Open the picture in Photoshop.
- Click on Image --> Image Size to get the sizing menu.
- Make the following adjustments, if necessary:
- Width --> 218 px
- Resolution --> 72 px
- Click on Save As... to rename the image as desired.
- Click on Save
- If the file name did not change, Click on Yes to overwrite the file.
- JPG Options pop-up --> Click on OK.
How to Add Images to Sidebars
There are three methods for adding images to sidebars. The methods differ depending upon what is there at the beginning.
Method #1: When there is no sidebar in the article. In this scenario, place the cursor at the top of the page in the edit window. Hit Enter two times to leave space at the top of the edit window. Then place the cursor at the top of the page. Click on the "SB" button in the toolbar above the edit window. This brings down the code for the sidebar, which looks like the code below. Replace the "000.jpg" with "imagename.jpg" in the third line below.
<div class="sidebar"> <div class="image_box"> [[Image:000.jpg]] </div> <div class="sidebar_content">
Method #2: When there is a sidebar, but it shows as Image:000.jpg. In this scenario, replace the "000.jpg" with "imagename.jpg" in the third line below.
<div class="sidebar"> <div class="image_box"> [[Image:000.jpg]] </div> <div class="sidebar_content">
Method #3: When there is a sidebar, but there is no code for the an image (see example below). In this scenario, you need to add the third line of code from the examples above, and replace the "000.jpg" with "imagename.jpg" in third line added during the step above.
<div class="sidebar"> <div class="image_box"> </div> <div class="sidebar_content">
After following the instructions above, click on the "Show Preview" button at the bottom of the screen (scroll down if necessary). If the picture is there and looks good, there are two final steps. First, if there is a line at the bottom of the edit screen that looks like:
[[Category:Picture Queue]]
Delete the line. Second, in the "Summary" box below the bottom of the edit screen, add a comment, such as "added image to page" to describe the editing change you made.
How to Make Images Clickable
The following is the code for using images for navigation:
{{clickpic|Page Title|http://www.vernacularmedia.org/images/f/f6/Purpose.jpg}}
- Where "Page Title" is the article you want the link to go to and
- The address after the "|" is the full address of the image
- To get the full address of the image, go to the "Gallery of new files" and click on the image you want to use
- Right click with the mouse, and select "Properties"
- Copy the URL and paste it into the code above in place of the address above
