logo VagMineTech project

Online Logo Maker, full fledged photo editor - VMapp.org

Click here to start making logos, banners, rounded cornered buttons and more!

How VMapp Logo Maker works

VMapp logo maker can quickly make logos and banners for your websites. You are "not" limited to using pre-made logo templates and simply writing your domain name on it like most online logo makers. With VMapp.org logo maker, you can let your imagination run wild and design your logos and banners online, the way you want it! Make tiny rounded cornered buttons, or logos, or full sized banners, your choice! You can even save your VMapp files for future editting, or to make changes to your logos and banners later.

  • Start by filling the boxes towards your left hand side. This controls how your logo background will look like.Use the gradient options to give your background a shadow or light fade effect.
  • Use the right hand side section to add shapes and text layers on your background. These are the visible text or shapes that will actually form your logo or banner.
  • You can supply your own shapes here, or use some from the "shapes gallery" VMapp has. You can fill the shapes and text with colors of your choice, give them shadow effects, or gradient effects, rotate them, resize them, give a border using stroke, etc stuff that you normally use photoshop for.
  • You can combine 2 or more shape layers to come up with your own shape! If you already have a logo or colorful image that you want to use as a logo, then type its URL here, leave the color fill box empty, and add that on the background as your logo, then write your company's name as a new text layer and you are done!
  • Important, when you create a new layer, do not forget to click "ADD" button to add it to the list of layers. List of added layers is shown just below the "ADD/SAVE" etc buttons. If you want to change something in a layer, click the layer name from the list, make changes in the form, then click "SAVE" button. You can delete a layer in the same way. Use the "CLEAR" button to clear the form. Clear does not deletes or saves a layer, simply clears the form for you to enter new values.
  • CSS style auto positioning! VMapp supports both fixed positions for layers and a CSS type positioning. You can either give values like "50,100" to place a layer at top left 50x and 100y position on your background, or you can simply give "top/left/bottom/right" (any one) keywords and let VMapp automatically join your layers! You can even leave all position boxes empty and let VMapp decide which layer goes where! The default image that you are seeing below is 100% CSS positioned, background height and width also decided by VMapp automatically!
  • The tiny up and down arrows next to layer names in the list is similar to what photoshop does with its "align layers" feature. Use this to place one or more shape layers above or below other layers. Important, the layer which is lowest in the list displayed, that layer is processed last by VMapp, which means that it will be the last layer which will be placed on the background image. This means that in your image this layer will appear as the top most layer, covering any other layers placed before on same position. So if you are placing 2 layers at same position (50,100), then second layer will cover the first layer. You can change this by moving the last layer upwards in the list.
  • Gradient fill: Currently VMapp supports gradient effect between 2 colors and you can choose how much solid colors will be visible on either side of gradient effect, and how much area gradient effect will cover. Simply give it a percentage. Like 5,15,80 means that first color will be visible for 5% of the image, followed by 15% of gradient effect, followed by 80% of final color, total 100% image fill. This way you can control which part of your image should have the gradient effect shown. In the default image you see, I used 1% solid gray, followed by 9% gradient effect, followed by 90% solid black. I also used a -45% angle for the gradient. This gave the background image an effect as if light is falling from top left corner on a black image!
  • Shadow styles: You can use some of the pre-made styles to give a realistic 3D shadow effect to your shape layers. For example, the "3D Glass shadow" will make your image appear as if its placed on a glass table and shadow of your image layer is falling on the table. Likewise, "3D front/back shadows" make it appear as if your image is standing straight and a 5:00 shadow is falling in the front or behind the image. These shadows look best on a white background image with a corner gradient effect on the background. Do not let the gradient effect reach the shadow itself.
  • Once you have created the layers you want in your image, then click the "Make LOGO" button and give it a minute to process all layers and background. Whistle for a while! Once your image is processed, it will appear in the area where the default image is being shown. If you like what you see, click the "Download PNG" link just above it to get a PNG file of your image, and also click "Download VMapp file" to get your VMapp file for future editting. This is like a photoshop PSD file which you can edit later using VMapp.org logo maker. Save the VMapp file somewhere for future use. Use the PNG file in your websites or your projects!

Have a VMapp logo file made earlier?

Upload your VMapp file to edit it and re-make your logo, or create a completely new one below.

Background of logo:

Image size:

Leave it empty and let me decide the best size for your image.

Color of background: (Both RGBA and HEX are allowed)
Select

Optional second color for gradient effect:
Select
If you are planning to use 3d shadows in your shape layers towards right, then avoid gradient background. Use only a solid white background color (FFFFFF).

Type of gradient:

Vertical means colors will fade from top to bottom, Horizontal means colors will fade from left to right. To reverse the direction of gradient, simply switch the colors above.

Percentage of gradient (center) and solid colors (edges): example: 30,50,20:
In example above, 30% of image will be in solid background color, 50% will be in gradient effect, and rest 20% will be in solid color of gradient
You can give only gradient percentage (like 50), and I will calculate the other two.

Angle of gradient? zero means no angle straight line gradient, values between -360 and +360 are valid here.

Optional Place another image on background? Enter URL of your image:

Position of this image on background: (Enter top left x,y position, or enter "full" to stretch the image and fit on entire background, or enter "tile" for tiled fill )

Image corners:

Smooth & blur final image:

Note, you can use CSS's "float" values to autoposition shapes on this background, without having to use fixed x,y positioning.
For example, you have 3 shapes, and you want shape2 to appear next to shape1, then set "right" in position box of shape2... You can either enter "left" in shape1 position, or leave it empty, or give it a fixed position, your choice.
Likewise, if you want shape3 to appear on top of all other shapes processed so far, then enter "top" in its position box, and you are done!
Positions allowed are: top,bottom,left,right
Leave all position boxes empty, and let me decide how to place all shape layers, keep your fingers crossed!!!

Shapes & text on background of logo

 

Enter text or URL of image to add on background image: View Shapes gallery

Color of text or image: (RGBA or HEX)
Select

Optional Gradient fill color: Your original color will slowly fade into this color
Select

Percentage of gradient effect. 3 values are needed here, total to 100, example: 30,50,20
First value (30) decides how much main color to show as solid color. Second value (50) decides how much gradient effect to show. Third value (20) decides how much final color to show as solid color after gradient effect is complete.
You can only give one value of gradient effect, like 50, and I will calculate other two.

Direction of gradient:
Horizontal   Vertical  

Position on Background, example 200,100 means x=200 & y=100: (use CSS "float" values for auto positioning):

Size of image: Enter percentage here, like -50,-50 to reduce image to 50% of its original size, or 100,100 to double its size, leave empty to keep original size.

Font size of text: (used only if first box is plain text, not a URL)

Font to use: (used only if first box is plain text, not URL)

Rotate text or image at angle: Enter value between -360 to 360, leave empty for no rotation

Flip Image or text?
Horizontal   Vertical  

Color of stroke border: (leave empty for no border)
Select

Stroke thickness? (used only if stroke border color is provided)

Optional Shadow Style of text or image:

Optional colors for shadows, enter 2 colors separated by comma sign, leave this empty and I will use my default colors:

3dShadowBehind 3dShadowFront 3dGlassShadow 3dRising 3dFalling 3dZoomTop 3dZoomBottom 3dSplash 3dBlossom innerShineLeft innerShineRight innerShineTop innerShineBottom embossLeft embossRight engrave dropShadowRight dropShadowLeft shineLeft shineRight

 

Optional Distort or surround:

If circle is checked below: Circle settings:

Give 2 colors and border with separated by comma. (Inner color, outer color, border width)

if skew/perspective is checked below: Skew or Perspective percentage & direction:

Example: 50%top (give one for skew and another for perspective if selected separated by comma, ex: 50%left,100%bottom)

skew perspective circle ellipse ellipseOpen

 

          

Shapes currently on background are listed below. Click name to edit or delete

logo image